Typography

Table of Contents

Introduction
Font size
Type Color

Introduction

There is 3 principal types of fonts:

Sans-Serif typeface like the one used in this text.
Serif typeface which have a small line attached to the end of a stroke in a glyph.
It forms a virtual line which help to read the text of a paragraph.
It is well adapted for printed book but it can be less suitable on electronic device where the dpi resolution is limited.
Monospaced typeface where all glyphs have the same width, usually a e is shorter than a m.
This typeface is used when an homogeneous character spacing is required, for example to show a source code.

Additionally, it exists a plenty of fancy fonts, like curvy etc.

Rule: A font must be readable on all devices by everybody.

The main factors that affect the readability of a font are:

font design
font size
font weight (stroke width)
contrast between the type colour and the background

And these factors which cannot be chosen by the author:

media resolution (dpi)
Which have a large range nowadays.
anti-aliasing algorithm applied to the font by the raster engine
It can be observed with a magnifier tools or using a screenshot.

Rule: We have to choose a font, a size (weight) and a contrast which work together on all devices (responsive design).

Rule: The relative importance of the different parts of the text must be established by a consistent couple of font styles.

Accessibility Rule: Peoples with visual impairment need a larger font size. It is mandatory on wide audience site.

Font Size

8 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

9 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

10 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

11 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

12 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

13 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

14 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

15 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

16 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

17 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

18 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

19 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

20 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

21 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

22 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

23 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

24 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

25 pt Neque porro quisquam est qui dolorem ipsum quia dolor sit amet

Paragraph ~ Type Color ~ Gris Typographique

The line height must be chosen judiciously in order to make a nice type color.

8 pt

Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.

9 pt

Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.

10 pt

Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.

11 pt

Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.

12 pt

Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.

13 pt

Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.

14 pt

Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.

15 pt

Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.

16 pt

Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.

17 pt

Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.