Shapes
When typesetting, we have two components to consider. As a typographer, we consider various relationships between them.
- The black shapes on the page
- The white shapes on the page
The Overall Website
Consider the pace of dark & light across an entire document or website; how this may signify hierarchy and structure.
- Black shapes: inversed pages, dense pages
- White shapes: normal pages, light pages
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.
The Paragraph
- Black shapes: lines of text
- White shapes: leading (line-height), heading margins / padding, text indents
- Relevant CSS:
line-height, text-align, text-indent, margin, padding. - For alternate text directions:
writing-mode: vertical-rl;,text-orientation: upright / sideways;
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.
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.
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.
The Line
- Black shapes: words
- White shapes: word-spacing, alignment, white-space
- Relevant CSS:
text-align, whitespace, letterspacing.
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
The Word
- Black shapes: letters
- White shapes: letter space, tracking, kerning
- Relevant CSS:
letter-spacing
The Letter
- Black shapes: black shapes of the letter
- White shapes: the counterforms and exterior shapes of the letter
- (Relevant CSS:
font-kerning, transform)
Resources
- A typography primer: Inside Pargraphs by Cyrus Highsmith
- A practical reference: Practical Typography by Matthew Butterick
A Checklist
Font Loading
- Roman and Italic
- Weights
- Text and Display cuts
- Variable Fonts
Semantic Markup
- Spelling?
- Headings
- Paragraphs
- Lists
- Quotes, Pull quotes
- Footnotes
- Metadata
Typesetting and optical sizing
- Alignment
- Paragraph measure
- Line-height
- Letterspacing
- Margin, Padding, Borders
Punctuation and Symbols
- Quotation marks (', ", ’, ”)
- Hanging puntuation
- Dashes (Em, En)
- Open Type Features
- Figure styles
- Bullets