Typography Workshop

Finer points of typography

Let’s dive back into the details of typography today by styling a longform article. Demo code is in: /activities/typography-workshop/

  1. Choose an article on wikipedia
  2. Copy the text into your own webpage
  3. Markup and typeset the article, including selecting several pull quotes for highlighting
  4. Make the page responsive

Considerations in typography

When typesetting, we have 2 components to consider.

  1. The black shapes on the page
  2. The white shapes on the page

As a typographer, we consider various relationship of the black and white shapes.

  1. The overall site / the book
  • Black shapes: inversed pages, dense pages
  • White shapes: normal pages, light pages
  1. The page
  • Black shapes: blocks of paragraphs, images
  • White shapes: page margins, space between columns, paragraphs, images, all components
  • Relevant general CSS: width, margin, padding
  • Relevant CSS Grid: grid-template-columns, grid-gap, grid-column, grid-row
*

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

  1. The paragraph
  • Black shapes: lines of text
  • White shapes: leading (line-height), heading margins / padding, text indents
  • Relevant CSS: line-height, text-indent, margin / padding. Best used in unit-less form (1.2 instead of absolute 20px).

Lorem ipsum dolor sit amet, consectetur adipiscing 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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

  1. The line
  • Black shapes: words
  • White shapes: word-spacing, alignment, white-space
  • Relevant CSS: text-align, whitespace.

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

  1. The word
  • Black shapes: letters
  • White shapes: letter space, tracking, kerning
  • Relevant CSS: letter-spacing

Lorem ipsum

  1. The letter (more for type designers)
  • Black shapes: black shapes of the letter
  • White shapes: the counterforms of the letter

L

For more details, I suggest the primer: Inside Pargraphs by Cyrus Highsmith

Checklist

  1. Font Loading

    • Roman and Italic
    • Weights
    • Text and Display cuts
    • Variable Fonts

  2. Semantic Markup

    • Spelling (maybe)
    • Headings
    • Paragraphs
    • Lists
    • Quotes, Pull quotes
    • Footnotes
    • Metadata

  3. Typesetting and optical sizing

    • Alignment
    • Paragraph measure
    • Line-height
    • Letterspacing
    • Margin, Padding, Borders

  4. Punctuation and Symbols

    • Quotation marks
    • Hanging puntuation
    • Dashes
    • Open Type Features
    • Figure styles
    • Bullets

  5. Responsive Typography

    • Type hierarchy
    • Size adjustments — font size and font space
<>