Typography testing

Put together in .

This is still very much a work in progress.

Go back home.


No. 1: Writing

First published on protprototypr.io.

The one thing I sometimes really hate about good design is all the writing.

Good designers write.


Good coders write.


I do fundamentally disagree with people who think that good design speaks for itself, simply because it’s a total misconception of reality.

Design is not created in a vacuum. Design is created in context and (imagery) conversation with the end user / customer / Developer (if there is one) / printer (if there is one) / engineer (if there is one), etc.

Good design needs documentation. And good documentation means good writing.

I am reworking my portfolio right now. It’s an exercise in writing as much as it is in pushing vectors and some pixels. It is also good training.

In my current job (as UX designer) I have to write a lot, even if I develop stuff myself. There will be people interacting with my designs, with my code. It should help them to know what I was trying to do.


But for crying out loud, as much as I love writing; keeping myself short (which makes for good and understandable documentation) is hard. I am a really bad editor. Hence, I sometimes really hate all the writing that comes with (good) design.




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.


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.