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

This is an intro paragraph. It supports bold text, as well as italic, the combination of the two and also text links. It’d be great to keep it short and to the point, but of course each person is different and somebody might decide to write a really long intro. That’s okay, too. They might even …

… create a second paragraph, but that’s really not encouraged!

Posted by Team Village One on Jul 26, 2022; updated on Nov 11, 2022

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:

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!

Team Village One sitting around a table and signing documents
The Village One team sitting around a table signing stuff. This caption supports basic formatting and also text links! The image itself is also linked! It also uses responsive images through srcset. 👾

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

Another caption goes here!

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

Stronger together: Come along for the ride!

The Villager’s Dispatch

Subscribe to our newsletter

Virtual office hours

Got a project to discuss or simply want to say hello? Book a video call right away!

See office hours

We’re on Mastodon

Our main social presence is on Mastodon, follow for inspiration and regular updates:

Follow along