Design for Developers Part Two: Typography and Content
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.
<link href=”https://fonts.googleapis.com/css?family=PUT-FONT-NAME-HERE" rel=”stylesheet”>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.
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.
Letter spacing, or tracking, is another text attribute to pay attention to. Tracking is the empty space between letters, and can be increased for more legibility. Most of the time, body fonts are set up with the required amount of tracking (0px), but labels in all-caps occasionally need a little extra space. Use your best judgement, but if you need to add spacing, here’s how:
body {
letter-spacing: 0px;
}
h1, h2, h3 {
letter-spacing: 1px;
}Using Type on a Busy or Coloured Background
Using text on a busy or coloured background can render it difficult to read. The simplest method around this is changing the colour of the text to contrast with the background. Be careful you’re not breaching brand guidelines by using non-brand colours. Black and white are usually included in most brand guidelines, and shades of grey are common too.
Drop Shadows
If changing the colour doesn’t help, or you want to make text stand out more, a drop shadow could be your answer. Drop shadows help text pop out from a page, and provide something for the copy to contrast with. Being subtle with the shadow is usually the right idea as opaque or large shadows can look rough.
Try adding a shadow like this:
text-shadow: 1px 1px 2px rgba(0,0,0,0.25);Editing & Writing Text
A common, but big mistake made when populating text online is having too much of it. The attention span of an online reader is short. Users don’t want to spend more time on a website than they need to, and want to be shown answers to their problems without having to search for them.
Ensure everything from titles to body copy, to the text used on buttons is short, simple and precise. That means deleting sentences and paragraphs that don’t add anything new, refining sentences with improved structure and no unnecessary words, and editing what remains to guide the user towards their (and your) goals.
Here are some general tips for improving online writing:
- Be ruthless when removing text, even if it means cutting it by 50%. If you can get the point across in fewer words, do it.
- There are plenty of unnecessary words and phrases that can be removed or tweaked to improve the flow of a sentence.
- Complex words and sentence structures might not be understood by everyone, and may put people off. Aim for content anyone could understand, even if it’s something technical.
- Give links, CTAs, buttons and the navigation clear, precise copy that tells the reader what to expect when they click.
- Ensure spelling and grammar is perfect. Any mistakes hinder a user’s experience and reflect badly.
- Always proofread to find mistakes and sentences with bad flow. If you stumble over words, the reader will too.
- Use headers, sub-headers, bold, and italic font to break up a page and label parts of the copy.
Here’s an example:
Original Paragraph:
Welcome to XYZ’s website. We are the manufacturers of power tools such as the cordless drill and the handheld circular saw. We’ve also won some awards such as best power tool website of the year which puts us in great stead to serve your needs. Please get in touch in order to discuss any requirements that you have.
Removing and refining:
Welcome to XYZ. We manufacture power tools such as the cordless drill and the handheld circular saw. Winning best power tool website of the year puts us in great stead to serve your needs. Get in touch to discuss your requirements.
Getting the point across in fifteen words rather than fifty:
XYZ is an award winning power tool manufacturer. Get in touch to discuss your requirements.
While writing content is more the responsibility of a copywriter than a developer or designer, understanding the underlying concepts behind what makes good content can prove useful when making creative decisions. Everything you do with text, whether it be in design, presentation, or writing, should aim to improve the user experience, as it will pay dividends turning visitors into customers.
