Typography
Typography expresses hierarchy and enables improved consumption of content. Good typography, by definition, helps content fulfill its purpose of communication.
There are four essential properties to typography:
- Font family
- Font size
- Line height
- Line width
Font Family
The Delta Design System uses Ovo as our headline font family and Montserrat as our body copy and all-purpose font family.
Font Size
Font size is another established part of the system we use to provide a subtle but powerful consistency and rhythm to the way in which different aspects of our typography renders at multiple screen sizes. We utilize a type scale to help enable this consistency.
- Headline font sizes are set to a 1.200 Minor Third type scale
- Body copy font sizes are set to a 1.250 Major Third type scale
Line Height
Typography also has both a vertical and horizontal rhythm to improve readability. Type scale enables us to combine font size and line height to provide a better, more consistent user experience.
You should notice that the Delta Design System has a consistent vertical rhythm to copy. Line heights are set differently for headline and body copy, but both are optimized to make it easier to consume content. This is also true of the spacing between headlines and body copy, as well as copy and other elements on the screen.
Line Length
Long lines of text have been proven to be more difficult to read. Browser window 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.
The first thing we do is control the length or width of each line. 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.
Relative Units
The other thing the Delta Design System uses to improve legibility and prevent extra long lines of text is use the rem relative unit to define things like font size, margins, and padding. Using rem means that all size is relative to the base <html> element (instead of each individual parent container).
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.
Typography System
The Delta Design System typography system engineered for semantics, legibility, consistency, flexibility, and simplicity. Too often typography becomes a complex web of customizations, and we want to avoid that situation. Here are some of the basics of the typography system:
<h1>,<h2>,<h3>, and<h4>section headings<p>for body copy<ol>and<ul>for ordered and unordered lists<strong>,<em>, and<bold>for importance and emphasis. Please consult the Usage notes by Mozilla Contributors for more detail on how to use<strong>,<em>, and<bold>.- All text is left-aligned by default. You can change the horizontal alignment of text by adding either a
.centeror.rightclass to any text element.
Also, here are a couple of things to avoid:
- Do not skip heading levels: always start from
<h1>, then<h2>and so on. Semantic headings use are part of the document outline and proper use is critical for adaptive technologies. - Do not use heading tags to resize text. Use CSS for general-purpose resizing.
Typography Examples
A quick brown fox jumps over the lazy dog.
For a little extra panache, you can add a .title class to the first <h1> tag on a page. On screens smaller than 48rem the font size will render the same as a normal <h1> tag. On screens wider than 48rem the font size will change to from 3.157rem to 4.209rem.
In addition, the first paragraph after an <h1 class="title"> is set to a larger font size compared to normal <p> copy to better match the increased size of the .title heading.
A quick brown fox jumps over the lazy dog.
A quick brown fox jumps over the lazy dog.
A quick brown fox jumps over the lazy dog.
A quick brown fox jumps over the lazy dog.
A quick brown fox jumps over the lazy dog.
- A quick brown fox jumps over the lazy dog.
- A quick brown fox jumps over the lazy dog.
- A quick brown fox jumps over the lazy dog.
- A quick brown fox jumps over the lazy dog.
Link Examples
A quick brown fox jumps over the lazy dog.
To use an icon, add an .icon class to your <p> tag and paste your preferred icon svg code inside a <span>.
<p class="icon"><a href="#!">Read more<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg></span></a></p>