Typography is an essential aspect of your website design. Choosing a font style is easy – with most modern site builders, switching a font style is just three clicks away. However, choosing the *right* font style for a website is never an easy task. A website with the right typography gives a professional impression and allows its visitors to read easily.
In this article, we'll explore the different elements of typography and share tips on choosing the right typography for your website.
What is Typography?
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
Some essential elements of typography you need to be familiar with before we go deeper include:
Typeface & Font
A typeface is the design of a particular set of characters. For example – Times New Roman, Arial, or Helvetica are some common typefaces that you are likely to have come across in the past.
Font is the specific weight, width, and style of a typeface, for instance – Arial Bold or Times New Roman Italic.
Font Size
The size of a font is measured in points. In web design, font size is measured in pixels (px), ems (em), rems (rem), and percentages (%). Pixels (px) is an absolute unit of measurement that defines the font size in a fixed number of pixels. Ems (em), Rems (rem), and Percentages (%), on the other hand, are relative units of measurement that are based on different elements in a webpage. The right font size depends on the screen size and the distance between the readers and the screen.
Generally – 16px – 20px is recommended for desktop and 14px – 18px is recommended for mobile. The font of this site you are reading is sized at 18px for both desktop and mobile screens.
Line Spacing
Line spacing is the amount of vertical space between lines of text, also known as leading.
Hierarchy
Typography hierarchy refers to the arrangement of different levels of text on a page. Most web designers break content into sections by topic and use typography hierarchy to make content easy to navigate and digest.
For example – this blog post starts with the title text (aka. Heading 1 or H1), followed by different section headings (H2) and sub-headings (H3, H4, bold), body text (the content blocks you are reading now), and subtext (the small prints that appear in the footer section).
By using different levels of headings, subheadings, font sizes, font weights, colors, and white space – you can create a clear visual hierarchy that guides the user's attention to your most important information and make it easier to scan and digest the content.
Typography Tips for the Beginners
Now that we are cleared with basics – let’s check out some actionable tips you can apply to your site design.
1. Choose Fonts that Reflect Your Website Brand Personality
Different fonts have different personalities. It is important to pick the ones that align with your website brand's identity and values. Typically – a sans-serif font may be more modern and sleek, while a serif font may be more traditional and elegant.
For beginners, it's often best to start with common fonts such as Arial, Helvetica, Roboto, Open Sans, Lato, Montserrat, or even Verdana. Not only that these font types fit in easily to most layout designs, but they are also widely available on most devices and browsers – which makes them “web safe”.
Typography Examples
When selecting a typeface, consider factors such as legibility, readability, and tone of voice, and ensure that it matches the overall style and branding of your website. Below are some real-life examples captured from the World Wide Web.
2. Use No More Than Three Typefaces
Less is more. Using too many fonts often results in a cluttered and confusing design. A general rule of thumb is to use no more than 2-3 different fonts. At WHSR, we use only one font type throughout our site.
3. Pay Attention to Font Pairing
Fonts should complement each other, not compete with each other. Use a font pairing tool to find fonts that work well together.
4. Use sufficient spacing (line-height) between lines to improve readability
A line height of at least 1.5 is recommended for body text and can be adjusted based on font size and type. The right amount of line height can help prevent text from appearing cramped or cluttered – which makes it a lot easier for readers to scan and quickly grasp the idea of your content.
5. Avoid animated text
We are not living in the 90s anymore. Animated texts are not cool. Further, they can be distracting and make your content difficult to read. Instead, use animation sparingly and strategically to draw attention to important information.
For example, you can use animation to highlight a call-to-action button or to reveal hidden content on the page.
When using animation, the general rule of thumb is that it doesn't interfere with the readability or accessibility of the content.
6. Minimize the use of all caps
All capped sentences – be they in the body text or headlines, can be challenging to read. If you need to emphasize a point – consider using bold or italic font styles, or contrasting color backgrounds instead.
7. Test your typography on different devices and screen sizes
Testing your typography on different devices helps identify any UX issues or design inconsistencies. Make sure that the font sizes, line heights, as well as other design elements are adjusted accordingly for both small and bigger screens so that your website is easy to navigate and understand.
Don't be afraid to experiment with different fonts, sizes, and layouts. Test the design with users and iterate based on web analytic data (time on page, bounce rate, etc) and their feedback.
Useful Typography Tools & Resources
Here are some useful websites and tools that can help you select typography for your websites:
- Google Fonts: A free collection of web-friendly fonts that can be easily integrated into your website.
- FontPair.co: Free fonts and font pairings gallery for all types of designs.
- Fonts.com: A website that offers a large selection of professionally designed fonts for both web and print use.
- Font Squirrel: A free font resource that offers a wide selection of high-quality fonts for commercial and personal use.
- Font Sprint Matcherator: A free font finder tool that helps identify font types from uploaded images.
- DaFont: A popular website that offers a vast selection of free fonts that can be used for personal and commercial projects.
- FontSpace: Another free font collection that offers a wide selection of high-quality fonts for personal and commercial use.
- Fontanello: A browser extension that lets you display the basic typographic styles of a text by right-clicking it.
Wrap up
Typography is a crucial aspect of web design that can greatly impact the readability, legibility, and overall user experience of your website. By understanding the basics of typography, you can create more effective and engaging websites.
