🔠 Typography
Text Styles

Updated at 2018-01-07 06:56

Paragraph vertical margins. Choose one:

  • Bottom margin half of the body line height, no top margin.
  • Bottom margin equal to the body line height, no top margin.
  • Bottom margin double the body line height, no top margin.
  • No bottom or top margins and indent first line of all paragraphs that come after another paragraph.

Paragraph horizontal margins. Choose one:

  • Left and right margin same as the bottom margin doubled.
  • Left and right margin same as the bottom margin tripled.
  • If you have no bottom or top margin, use the body line height as left and right margin.

Headings. Choose one:

  • Top and bottom margin equal to the body line height.
  • Top margin double to the body line height and bottom margin equal to the body line height.

Keep heading indentation constant. Don't change indentation between different level headings. It just looks silly.

Bold and italic do not mix well. Avoid using both bold and italic on a same block of text. Avoid italics on headings as they usually already have more weight. It will cause the big picture to look chaotic. Although there are rare places where it can be applied e.g. academic texts where you use italics to specify foreign words and bold to emphasize.

Do not use automatically generated styles. With CSS, you can make any font bold or italic. Avoid those automatically generated styles and use font variants. Automatically generated styles reduce the font quality.

Google Font example: ...?family=Roboto+Condensed:400,700,400italic

Make your typography crisp with CSS to achieve a professional look. Your UI should use a sans serif font that works with various weights.

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

Prefer smart quotes over simple quotes. Smart quotes are a lot more professional looking. Remember that 6 comes before 9.

"bad" “good”

Underline is for hyperlinks only. Underlining anything else will cause confusion. I personally avoid underlining even in print because of this.

Use special characters sparingly. With special characters I mean e.g. ampersands and exclamation points. Question marks are underused, use them whenever required by content.

Use all caps only for texts that fit on a single line. You should include 5%-12% extra letter spacing for all caps. Avoid using small caps.

Separate columns from each other. Recommended spacing between columns is 1/12 of the column width.

Make sure you can read the text eyes half closed.

  • Dark text on light background => increase space between lines.
  • Light text on dark background => increase font weight.
  • Light text with dark outline can be read on any background.

Here are good basic values for web typesetting. The best values depend on the typeface being used, the message being communicated and the context in which the text is being read.

# Font Size
                Traditional     Fibonacci       Golden Ratio
    h1 (title)  48px            64px            68px
    h2          36px            40px            42px
    h3          24px            24px            26px
    p           16px            16px            16px
    annotation  12-14px         12-14px         12-14px

# Line Height
Line height should be larger than space between words.
Line height should be the larger the more characters there are per line.

    Heading line height:   1.00x - 1.10x the heading font size.
    Body line height:      1.25x - 1.75x the body font size.

# Line Length
Line length to line height ratio should be around 25.

    You should always have 50 - 70 characters per line.
    Bigger screen sizes require less characters per line in multiple columns.
    Does not affect understanding the content but makes reading faster.

# Colors

    # On Screen
    Headings:       #222222 #333333 #333333
    Body:           #444444
    Background:     #fbfbfb

    # On Print
    Headings:       #000000 #000000 #000000
    Body:           #000000
    Background:     #ffffff