Modular type
Why?
- More flexible layouts—less work
- Reduce code duplication
- Be more declarative & clear
- Cohesive vertical rhythm
- Abstracts type size from HTML semantics
- Easier working on teams
How?
- Pick a scale (musical scales are popular)
- Use math to calculate all the things
- Use only those set classes
All the maths!
font-size: base-font-size × type-scale ^ distance-from-base
line-height: ceil(font-size ÷ base-line-height) × (base-line-height ÷ font-size)
(With a little finessing based on our design eyes.)
Typografier
I don’t want to have to write this code every time!
- Generate a whole type system
- Media query size configuration
- Type scale selection
- And lots more features…
Classes for size
- Different sizes are defined by different classes
- Each class has an optimized
line-height - Remove the top margin from everything and standardize on bottom margin
- 10 different font-sizes—you shouldn’t need more
- Based on the metric system:
.micro, .milli, .kilo, etc.
HTML
<link href="css/type.css" rel="stylesheet">
<h1 class="micro">Heading Level 1</h1>
<h2 class="giga">Heading Level 2</h2>
<p class="yotta">Text block</p>
<p class="milli">Another text block</p>
Classes for spacing
- Different classes to add amounts of spacing
- Spacing is always divisible by
line-heightto fit the vertical rhythm
HTML
<h1 class="push-0">Heading Level 1</h1>
<h2 class="push-2">Heading Level 2</h2>
<h3 class="island">Heading Level 3</h3>
Type-specific utility classes
- Different classes to change styles & weights
- Different classes to change alignments
- Classes to control line-length
HTML
<h1 class="italic not-bold">Heading Level 1</h1>
<h2 class="text-right">Heading Level 2</h2>
<p class="max-length">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>