Basic typography rules for the web

Following are a handful of typography guidelines for your Maker story:

Select a font: Serif vs. San Serif fonts

Serifs are the tiny strokes at the end of a letter’s main strokes. Serif fonts have these extra strokes; sans serif fonts do not. (Sans is French for “without.”) Serif fonts also vary the thickness of the letter strokes more than sans serifs, which have more uniform lines. When selecting a font for the story, keep in mind that san serif fonts are much easier to read, therefore, we recommend those for the body of your Maker story. Serif fonts can be used for headings and hence create a good balance and visual delight.

TEXT

serifs

Serif font

San Serif font

Select a font size

Start with your body text and choose a font size for your desktop between 15-25px. Reading a larger body text size is much easier and puts less strain on the eye of the user.

Font size 12px

Diam in arcu cursus euismod quis viverra nibh cras pulvinar. Tellus in metus vulputate eu scelerisque felis imperdiet proin. Feugiat scelerisque varius morbi enim.

Font size 15px

Start typing here...

Font size for headings

The font size of your H1 should be 1.8-2x the size of your body font. If you have an H2, the font size should be 1.3-1.5x of your body font.

H1 Font size of 18px

Auctor elit sed

H1 Font size of 28px

Set the line height

Lack of white space between lines makes text hard to read. As a rule, line height of 1.2-1.5x is recommenced.

Line height of 14px (1.1x)

Line height of 23px (1.5x)

Add proper white space between headers and body text

Negative space between headings and body should feel open yet, tight enough to signal a relationship between the body and headers. The total margin between headers and body should be 30px, 20px and 15px.

Margin 30px

Margin 20px

Margin 15px

Header 1

Header 2

Header 3

Line length

The line length for a single column text block should be around 45-90 characters or 500-700px wide. Any more than this and the readers will feel overwhelmed.

Line length of 700px

Tortor id aliquet lectus proin. Aliquet eget sit amet tellus cras. Eget nulla facilisi etiam dignissim diam. Ante in nibh mauris cursus.Tortor id aliquet lectus proin. Aliquet eget sit amet tellus cras. Eget nulla facilisi etiam dignissim diam. Ante in nibh mauris cursus.Tortor id aliquet lectus proin. Aliquet eget sit amet tellus cras. Eget nulla facilisi etiam dignissim diam. Ante in nibh mauris cursus.

Line length of 1000px

Tortor id aliquet lectus proin. Aliquet eget sit amet tellus cras. Eget nulla facilisi etiam dignissim diam. Ante in nibh mauris cursus.Tortor id aliquet lectus proin. Aliquet eget sit amet tellus cras. Eget nulla facilisi etiam dignissim diam. Ante in nibh mauris cursus.Tortor id aliquet lectus proin. Aliquet eget sit amet tellus cras. Eget nulla facilisi etiam dignissim diam. Ante in nibh mauris cursus.ine length of 700px. Tortor id aliquet lectus proin. Aliquet eget sit amet tellus cras. Eget nulla facilisi etiam dignissim diam. Ante in nibh mauris cursus.Tortor id aliquet lectus proin.