Before we start into what typography guidelines are we have to first understand what typography is. The basis of typography is the typeface or fonts you choose to use but it’s so much more than this. Typography is everything to do with that font and how you choose to display it, this includes things like line length, line height, font size, decorations such as italic or bold and even the amount of whitespace you leave around your type.
All of these aspects combine together to create a visual hierarchy of content in your UI Design. The hierarchy of content on a page is vital to the success of a website or digital product and can seriously affect the user experience of your site. Poor hierarchy can mean your users simply can’t find the button you want them to press or the link to sign up for the product.
Visual Hierarchy in Typography
Visual hierarchy can be affected by a number of visual changes a designer can make to the typography they are working with.
Size
The size of your font will significantly influence what content appears most prominently on the page. A header with a larger font size will stand out more than a paragraph with a smaller font size. Generally, you will have a different font size for each type of heading you have within your site or product. Though you may have two headings with the same font size and use weight to differentiate them.
Weight
The weight of your font will play a big part when you are trying to highlight a word or sentence in relation to similar-sized text around it or to highlight an action to be taken. Depending on which font you are using you may have a choice of a number of different font weights from ‘thin’ all the way up to ‘block’ or ‘extra bold’ options. The font-weight you choose will depend on the style and brand feeling you are going for. But generally speaking, regular and bold should be enough to cover most requirements.
Positioning
The positioning of typography on a page can help group elements together visually. Gestalt’s proximity principle tells us that items that are near to each other will cause viewers to assume they are related in some way or another. For example, if you have a heading far away from a paragraph, viewers may not realise they are related, however, if they are visually grouped together users will know that the heading is for the paragraph.
Gestalt principles outline the rules we apply mentally when we perceive the world so we can make organised sense of things. You can read more about Gestalt principles here.
Typeface
The typeface you choose will play a big part in affecting your choices of weight or height. Some typefaces have a heavier regular weight, making them bold in comparison to other typefaces, this is something you will need to keep in mind if you are using more than one typeface, some will also have larger line heights or variations in the letter spacing that will affect how it appears on the page.
When choosing a typeface for use on a digital site you should also consider how different your font is from the basic fonts included in the browser. If there is ever an error in fetching or rendering your typeface, a browser will switch to using either its default serif or sans-serif typeface depending on which is specified. If your typeface is drastically different it may result in some spacing and styling issues in future. If you want some inspiration on the use of the fonts, check out this collection of examples.
Colour
Colour is an important aspect of the visual hierarchy in typography. If you have a grey paragraph ending in a blue link, the blue text will stand out in comparison to the rest of the paragraph as it will be visually very different. You can use colour to bring users’ attention to actions, the most common use case for this is links. If you were browsing the internet in the early 2000’s you will know links used to be bright blue by default. We can and should continue the trend of visually indicating links through colour as it can help with accessibility and findability of important actions.
Adding typography guidelines to your design system
An often overlooked aspect of web typography is creating some guidelines in your design system to ensure your design decisions around typography are consistent. The copy we use in our designs are a vital part of the experience of the product and if not included in the design system is a missed opportunity to ensure the brand is conveyed the right way. Guidelines can ensure consistency and when they are always in front of you, in the system you use every day, you are more likely to keep them in the forefront of your mind as you are designing.
Creating a font size ruleset
The first step in creating consistency in your web typography is choosing the sizes of all your main typographical elements. A good place to start is with the body copy, this will make up a large portion of your web content and will be the base size the rest of your typography should be based on. Best practice is to start with a body text size of 16pt and try that in a few different scenarios throughout your design, with some typefaces you may be able to go a bit smaller but generally speaking, 16pt is still accessible but not too large.
From here you can choose what sort of steps in size you want between your body and your headings. Many designers go with a 4px grid and choose typography sizes to match. However, most browsers do not work with px or pt’s instead they work with rems’. Rems are a way to size typography relative to the base typographic sizing, so if you had a body font set to 16pt’s this would be 1rem and your heading that is 20pts in your design would be 1.23rem’s. There are handy calculators out there which you can use but this may be an additional point you would want to add to your design system to make it easier for your front-end devs to implement. By default, most browsers have body font set to 16px so if you choose a different base size this will be something that will have to be set separately in the CSS.
Choosing a capitalisation style
Depending on the tone of voice of your product’s brand this may already be decided for you, different capitalisation styles come with different ‘tones’ associated with them. Title case is where you capitalise all words in a sentence barring any minor words with three letters of less and is generally more formal in tone. Sentence case is where you capitalise only the first letter and any proper nouns in that sentence and is a more natural and relaxed way of writing headings.
Formatting for dates, numbers, currency, etc
Finally, while you are thinking about web typography you may also want to consider guidelines for formatting a range of different content items like dates, currencies, temperature, and time. Different currencies have different requirements around decimal places; times can be in 24hr or 12hr formats and each of these will affect the length of your written content and all of the above will affect the style of your design and may even affect your choice of typeface.
Bringing it together
As we can see above there is more to web typography than just choosing a typeface. There are a lot of things to consider when laying out the rules for web typography and we should endeavour as designers to be more aware of the many ways our choices can affect the visual hierarchy of the typography within our designs.
Sympli is a Saas company that creates tools for design collaboration, handoff, and version control. With more than 5 years on the market, we had helped thousands of designers and developers work together by providing a single source of truth and reducing back-and-forth communications, resulting in faster delivery.
