Typography
Typography is understanding the relationship between font family, font size, and line height.
Font Size Normalization
Typefaces vary in optical size. This means that at any specific pixel value, an optically small typeface like Source Sans Pro will appear smaller than an optically large typeface like Merriweather. Optical size is a function of internal font metrics and typeface design choices like x-height.
Using “font size” classes (e.g. .text-lg) automically applies the font normalization multiplier to both the font-size and line-height attributes.
Using “line height” classes (e.g. .leading-tight) does not apply the multiplier, so use with caution.
Native Size
Normalized Size
Reference Chart
| Supported typeface | Multiplier | Initial size | Final size |
|---|---|---|---|
| Open Sans | 1.01 | 16px | 16.16px |
| Public Sans | 1.0 | 16px | 16px |
| Merriweather | 0.98 | 16px | 15.68px |
| Source Sans Pro | 1.06 | 16px | 16.96px |
| Roboto Mono | 0.95 | 16px | 15.2px |
| Georgia | 1.05 | 16px | 16.8px |
| Helvetica | 1.01 | 16px | 16.16px |
| Tahoma | 1.0 | 16px | 16px |
| Verdana | 0.99 | 16px | 15.84px |