See Part One: Basic Principles

In part two of my series introducing design principles to developers, we’re going to look at text. Text is the most important part of any page or design as it conveys information. Ensuring text is designed and presented well makes it easier and more pleasurable to read, greatly enhancing the user experience.

Choosing Fonts

Fonts are an art in themselves, with thousands of professional and amateur fonts published each year, and millions of words written about typographic design.

Fonts come in many different types. The key two are serif and sans-serif. Serif fonts have strokes on the edges of the letters (known as serifs) and are considered more traditional, while sans-serif fonts remove the strokes, appearing curved and modern. Both types are fine to use, but keep in mind the client’s industry, audience, and aims when choosing between them.

It is especially vital for body copy that you stick to an easily legible and quickly readable font. With titles you have more freedom to experiment but legibility is still a key factor. Although using almost any font is possible, it is easiest development wise to use a font from an online library such as Google Fonts. Each Google Font is fully usable online, open source, and fast.

To use a Google font, just add this call at the beginning of your code and the html will automatically pull the font from the library.

Sizing Text and Headings.

Body Text

A good place to start with sizing text is the body copy. From a user experience perspective, larger body text is more legible. Default browser font-size is commonly set to 16px, but depending on the font, anything between 16–22px is generally user-friendly. Medium, for example, uses 21px for it’s body text.

Header Tags

Header styling can vary with each design, so there’s no right or wrong answer. However, a good approach is to use a typographic scale and the em function.

Typographic scales create balanced text sizings, where the size of the largest header is directly related to the size of body text, and all headers in between. This means certain font sizes won’t feel out of place, and makes it easier to be consistent across the design.

Ever wonder why Microsoft Office and other programs use certain font sizes?

By using the em function, you can simplify the process of defining text sizes and responsive design. For example, if body text is styled as 20px on desktop, 1em will equate to 20px. Then, we can define our headers, small text, block quotes, and any other text tags using multiplications of em.

Although there are plenty of popular typographic scales, it’s important to remember they are not law and can be changed to fit the design. On the Forge website for example, we use this scale:

Body: 20px (1em)

H3: 24px (1.2em)

H2: 30px (1.5em)

H1: 40px (2em)

In CSS, this is how you define the sizings:

body {

font-size: 20px;

}

h1 {

font-size: 2em;

}

h2 {

font-size: 1.5em;

}

h3 {

font-size: 1.2em;

}

Responsive Design with em

The em attribute makes it easier to design for various screen sizes. All you need to do is define the size of the body copy for the device’s screen size and em will resize the fonts accordingly. Additionally, this means there is a relationship between the device text sizes and the desktop sizes, rather than them being arbitrary.

Line Height and Tracking

Line height can mean the difference between easily legible and crowded text. Each font has a different x-height (the distance between the baseline and the top of a lower-case letter) and therefore, the required line-height changes. However, 1.5em works for most body text, giving enough space between lines for the eye to move over them with ease.

1.5em tends to be too much for larger fonts and headers with a bigger x-height, so reduce this accordingly using em to keep line height consistent across the design.