Typography is the appearance of text, and he purpose of typography is to enable readers to focus and immerse themselves in the content of the text. Good typography, by definition, is typography that helps text fulfill its purpose of communication.
There are four essential properties required to get typography right:
We have chosen Roboto Slab as our headline font family and Montserrat as our body copy and all-purpose font family. The font weights we use for each depend on the use case, but are intended to provide the most legible option for each situation.
For our font sizes, we use a 1.200 Minor Third type scale. This provides a subtle but powerful consistency and rhythm to the way in which different aspects of our typography renders at multiple screen sizes.
Typography also has both a vertical and horizontal rhythm to help improve readability. The 1.200 Minor Third type scale also provides us with the line height we need.
In a fluid layout, browser width and typographic measure are linked: the wider the viewport, the more characters per line. Keeping in mind that a range of 45-75 characters per line is generally accepted as safe for comfortable reading, there are a couple of things that can be done to avoid extra long lines of text in fluid layouts.
The first thing we do is control the width of a container. We can test our container width by dropping some lorem text into the layout with two asterisks. The first marks the 45th character, and the second marks the 75th. See below at various widths.
Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua.
If at any point the two asterisks appear on the same line of text, we know it’s time to either decrease the width of the container or increase the font size.
The typography for the design system is set using the rem relative unit. This helps to ensure that our designs are relative to font or viewport size, meaning that the layout will continue to look correct even if the user drastically increases or decreases the font size via their browser.
p
Note that every effort has been made to reduce the number of variants in this typography system. Do we have unordered lists without bullets? Yes. Has spacing been adjusted to accommodate specific layout requirements? In some cases. However, our objective and prime directive is to keep things simple and try to avoid creating customized typography for each obstacle encountered.