Typography: Every­thing our CMS can do, on a single test page

This is a smaller headline

As you can see it’s good practice to start the actual body copy with a headline, but it’s not required. What you’re reading right now will become a standard paragraph, pretty interchangeable. Nothing special going on here. It’s medium length. Moving on.

Never design with lorem ipsum they said, it’ll be better they said! It would be a lot easier to just fill this with blind text though, I gotta tell ya! Would also make it less interesting though, and you probably would’ve stopped reading by now. So here we are consciously writing dummy copy. Sigh.

This is an even smaller and also longer headline, so that it breaks across multiple lines. It’s essentially just bold text because we couldn’t be bothered to make a real headline style. We will if we need it.

Let’s do another short paragraph before we test some button styles. Oh wait, I’ve got an idea!

All work and no play makes Jack a dull boy
All work and no play makes Jack a dull boy
All work and no play makes Jack a dull boy
All work and no play makes Jack a dull boy
All work and no play makes Jack a dull boy
All work and no play makes Jack a dull boy

Okay, time for some buttons!

Click me, click me! No real links, sorry!

We should really link those buttons to something funny. Oh well.

Okay, so far that was pretty standard stuff, but we’ve added a few extra things to this editor, for example…

Introducing the infobox! Unfortunately this is simply bold text, but an editor used it as a headline! Bummer.

Oh wow, it’s an infobox! We can use this to explain some context relevant to the main article. Not sure what that would be in this case. We could tell you that we’re using GT Flexa for all type on this website. Check it out on Grilli Type! Some inline bold text. Can we do italic? Apparently not, I’ll file a bug ticket. If this text appears italic you’ll know we squashed the bug! Isn’t the internet magical?

You can only have one paragraph here, but you can fake it with <br>s. You shouldn’t though!

Btw, why not sign up for our newsletter?

Now we do a list, ordered:

1. I am the first list item. Doesn’t make me the best though. Man, I’m just typing stuff here so that it breaks across at least two lines. My wrists hurt.
2. A wild list item appears! It’s very effective!
   
   1. Here’s something nested deeply!
   2. And another thing!
3. Third time’s the charm. Third time’s the charm. Third time’s the charm.
   

And now we follow up with an unordered list:

• Weeeee, those arrows are cute!
• Second one is always the hardest. Where do we go from the arrows? No idea. Enough of this nonsense!
  
  • Another nested list!
  • Another one! Another one! Another one! Another one! Another one! Another one! Another one! Are we there yet?
• Last list item on the whole page, gotta make it count. Running out of ideas though, the sun is shining outside, it’s really nice weather. What am I doing here?

We can do another list by rendering a table of contents:

• What we offer
• About Village One
  • What’s in the name Village One?
  • Why is Village One a cooperative?
  • Membership: How to join the team
• How we work
  • Projects wishlist / blocklist
  • Office hours
  • Digital tools & services
• Library
  • What the heck is a cooperative?
  • Resources about cooperatives
  • Shout-out to our network
• The Villager’s Dispatch
  • 031: Europe Talks—meet a fellow European for an unlikely conversation
  • 030: A new brand and website for YouthPolicy.org
  • 029: Quality time as a distributed team
  • 028: “Der Krieg und seine Opfer”—creating an online documentary with dekoder.org
  • 027: What’s your dream project?
  • 026: Julia Shkatova becomes a co-owner of Village One
  • 025: Season’s greetings from the village!
  • 024: Visiting the Rochdale Pioneers, in 1844 and today
  • 023: Teaming up with Germany’s Sovereign Tech Fund
  • 022: Villagers, assemble!
  • 021: Join our first Berlin coop meetup
  • 020: Meet Julia, our new designer!
  • 019: Thank you for celebrating with us!
  • 018: The next democratic paradigm
  • 017: Anniversary One
  • 016: The World Talks—a global dialogue experiment
  • 015: Member Interview: Doro Schwartzmann
  • 014: Welcome Sev Furneaux, our fifth co-op member!
  • 013: Member interview: Christoph Rauscher
  • 012: Say hello to the all-new TypeMates website + shop
  • 011: Member interview: Harry Keller
  • 010: Member interview: Zhuo-Fei Hui
  • 009: Communicating, fast and slow
  • 008: Oof, what a year!
  • 007: Join our design team!
  • 006: Look ma, no bosses!
  • 005: Why we’re called Village One
  • 004: All hands on deck!
  • 003: Welcome Zhuo-Fei Hui, our fourth member!
  • 002: New website, a digital garden and a little peek behind the scenes
  • 001: Our full team, the inaugural co-op meeting and a few photos!
• Miscellaneous
  • Typography
• Legal documents
  • Satzung
  • Statutes
  • Arbeitsvertrag
  • Employment contract
• Our work
  • Neue Narrative: Brand + website relaunch

Sounds like it’s time for a quote:

We should add a really significant quote by a really significant author here, to add some gravity to the page. Another missed opportunity it seems!

Well, whatever. How about images?

Look at us, signing the papers to become a freshly founded cooperative!

This was somewhere in Neukölln! The photo was taken by our friend Hella!

We can also display larger images, spanning the width of the page:

Alright, that’s it for now! Sleep tight and eat your veggies! Bye!