Typography

Guidelines for using typography as a tool for effective communication.

#​Type Scale

Don‘t compose without a scale Robert Bringhurst - The Elements of Typographic Style

Our typescale is a modest set of distinct and related intervals optimized for usage on the web. Adjust font-sizes across breakpoints to maximize readability for each device size and context.

Using a consistent typographic scale and a limited set of spacing and sizing values is an effective way to maximize visual harmony with limited effort and maintenance. By encoding these constraints in our theme file and enabling access through Styled System, we can speed up our velocity while making the visual design of our applications inherently more consistent.

#​Scale

#​Font weights

#​Line heights

Line-height affects how easy it is to read a piece of text. Set line-height to 1 when the text will never wrap and you have appropriate white space around the text to help with alignment ui elements. Titles set at larger font-sizes can use line-heights of 1.25. Body copy should always be set to 1.5. This helps readability while also keeping us on a vertical grid the majority of the time.

#​Default line-height

Most browsers default to a line-height of ~1.1-1.2. As noted, according to accessibility guidelines, this isn‘t enough for some people, and leads to difficulting tracking text.

#​Titles (1.25)

Titles often have a line-height set between 1.2-1.3. For titles we use 1.25 to ensure all of our line-heights will compute as integers. Note that titles exceeding 3 lines in length should often be set to 1.5.

#​Body copy (1.5)

Common typographic standards recommend body copy be set between 1.4 and 1.6. Our lower boundary of 1.5 from the accessibility guidelines to falls perfectly in the middle of this range. The benefits of using 1.5 instead of an alternative value between 1.4 1nd 1.6 ensures our vertical rhythm falls on integer pixel values, and will often fall on a number divisible by 8.