Typography testing

Put together in October & November 2018.

This is still very much a work in progress.

Go back home.


No. 1: Working with stakeholders

First published on prototypr.io.

Before writing about the how to, let me address why working with stakeholders instead of convincing them is important.

If you are focused on convincing someone about something it is usually, because you are in a real or perceived adversarial relationship (commonly it’s the latter). Instead of trying to come to a shared goal, you are trying to bring them around, show them the light, tell them what’s right.

This can surely work, but you have to start over at every step of the way and gaining someone’s trust is so much harder.

a fork to hold steaks
At best this is a steak holder.

Working with stakeholders expressly means you try to pull in the same direction. It does not mean you will agree at all times and you must not just follow their wishes. But it is a good basis to come to a shared understanding, build on a shared set of values and in turn, manage to have a good and speedy process to come to an agreement.

There will always be stakeholders who need to be convinced, but do not allow this to become the modus operandi. Instead work towards working together and arrive at a common set of rules and understanding.


When you start working with a new shareholder, first try to understand their needs and their frame of reference.

You could start by asking the following questions:


For each question there may be a need to share information or discuss how to meet their needs and expectations; try to be prepared as much as possible.

If you need to push back on something, do so friendly and back up your reasoning with data and / or research. If you cannot do that, say so. And instead of letting this become a source of conflict, make clear you will follow up regularly and report and feedback on progress.

Doing so allows you to show them you are not just pushing opinions, but you are coming at a situation open minded and interested in archiving the common goal.


Finally make sure everyone is on the same page. It is quite natural to be short on time, so keep discussions short.

What can help is writing on a white board and erasing withdrawn ideas, keeping what is agreed upon.

Make sure to take notes, and compare them with minutes send out. If no minutes are taken, try to sum up what was decided and send it to everyone, so you can be sure you are all on the same boat.


When working in multilingual environments it may help a lot to compare notes with peers to make sure you got it right and of cause ask stakeholders to send comments.

This will likely still fail from time to time and there will be misunderstandings.

When that happens, remain positive and sort it out. That can be really hard (I’m a pessimist and I can be bone headed, so I’m struggling, too, but try and do not give up), but it’s worth it.


One note on ongoing relationships you might have: try the above if they went bad. If nothing helps, try to speak with peers and managers and if that does not help you might have to find another department or job.

But more often then not, a friendly question and a thank you can turn a shop around. 😄


To sum up: don’t be a fork, don’t sting. Be respectful, honest and always take care of yourself.




No. 2: The full typographyic scale

Here is the kitchensink.

A Header 1

There will usually some small text below with a time element.

A header 2

To be used a sub header. Since this can be longer, I would keep an empty line between header and text.

A header 3

Usually for sections.


This is a short paragraph.

This is a long paragraph. Usually paragraphs will be close together, seperated by inset first words. I am also considering to add an “end mark” at the end. I have enough glyphs, but a simple square might do. Up to be decided.

In the end I decided against it. Too much signal.


If there needs to be an empty line, just add a br. (That br is wrappted in a code element.)


  1. This
  2. is
  3. a simple
  4. ol.

Fineally we need to show links, small, emphasis and loudness.


This figcaption still needs a figure.



No. 3: The 1st draft

I do need an intro paragraph.

A simple h1

A p and some italics for emphasis and some strong to test, but that needs to be longer.

A simple h2

A p and some italics for emphasis and some strong to test, but that needs to be longer.

A simple h3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A very short p.

A br in the following:


After said br.

A p and some italics for emphasis and some strong to test, but that needs to be longer.


This is a small text. With some emphasis for fun and some loud text as well.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a figcaption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

And now some code.

And here is some Code inside a pre:

<figure>
      <figcaption>This is a figcaption.</figcaption>
    </figure>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Long h1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

A p and some italics for emphasis and some strong to test, but that needs to be longer.

Long h2: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

A p and some italics for emphasis and some strong to test, but that needs to be longer.

Long h3: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ok, for super script I have 2 variants: the normal one: Friday, 13th and the nice one, which only really works in Firefox, but the @support test also kicks in in Safari and looks really bad, like this: Friday, 13th.

Here on more with italics: Friday, 13th and Friday, 13th.