The more professional a website looks, the more likely a visitor is to give the content on that website positive attention. The saying may go: don't judge a book by its cover, but the reality is you have less than 3 seconds to impress. 3 seconds is actually generous. Here are some extra tips to polish your website's typography.
Typ-what now?
Typography specifically refers to the size, shape and art of arranging the printed word. This applies to the "digital word" too. Did you know that choosing the correct typeface can make it easier to read your site?
You probably did. We don't see any websites made entirely of Joker, 10pt.
It may seem like a simple observation, but when the nitty gritty details of typography are thoughtfully met, they give an overall professional impression to your site. Correctly applied, you can even clue in the visitor to the expected "tone" of the website.
Is your brand lighthearted? Serious? Factual?
Say it all in one glance with typography.
Choosing A Font (or Two)
When choosing a font, there are several factors at play, and it can become complicated very quickly. Times New Roman, 12 pt. is perhaps the most familiar font. Helvetica may be it's largest competitor, with an entire documentary dedicated to it! Both typefaces are great examples of the first group of decisions in choosing a font: serif or sans-serif?
A serif typeface has "feet" on the ends of each letter while a sans-serif does not. Why does this matter? Serif typefaces tend to take slightly longer to read on screen. On the other side, Sans-serif typefaces are very easy to scan. Serifs often have an academic or more trustworthy connotation, while sans-serifs have a more friendly connotation. Neither is better than the other by default, but one will probably fit the tone you'd like your website to have better than the other. Use this first decision of serif or sans serif to quickly narrow down your font search.
There are also exceptions to every rule. Josefin Slab is an example of an open, fun serif. Pathway Gothic One is a more serious sans-serif.
Whether serif or non-serif seems to be more in-line with your company's branding, it is important to remember that, along with images and video, fonts have a large impact on your website's loading time. Choosing fonts that don't hurt your website's load time can be tricky. This is where an online library of fonts can offer you some of the best of both worlds: variety and quick loading times. GoogleFonts is a staple font library for a large selection of unique, free, and load-time friendly fonts.
After a typeface is chosen, the next important decision is the size. The size a font needs to be to be easily read depends heavily on the typeface chosen, but a safe rule of thumb for a minimum size is 14pt for body text. A quick tip for choosing heading sizes is to increase in multiples of 2 or 5 as a rule of thumb from the body text size. Continuing our minimum example, headings of 16pt, 20, 24, and 30pt may be good proportions to try. However, 14pt may be too small to comfortably read for some typefaces. Adjust accordingly!
One quick note while looking for fonts: some typefaces are made to be large and can become very difficult to read at smaller sizes. These types of fonts are often marked as "display" fonts and are not for paragraphs of text.
The third important decision after choosing a font (typeface and size) is: which font will be paired with it? Pairing fonts can be very tricky. Complementary opposites of serif and sans serif are often paired together with one as a heading and the other as paragraph text. This can create an easy balance of fun and serious, and provide a quick visual clue to the reader when to read quickly and when to pause.
An easier font pairing to use would be another from the first typeface's "font-family" which many modern typefaces now have. Font family's are meant to have enough contrast to stand out from one another and enough similarities to easily be seen as a set.
Finally, after choosing your fonts (or font family), it is time to move on to the next two big decisions: color and spacing, which are powerful tools to increase readability.
Color
Color is an important and tricky principle that may seem too simple. The heading is green, the body text is black, done. But typography's principle of color also refers to the use of bold, italic, and line-height which all play into a line or paragraphs' "color" overall. The text's color plays into the principle of contrast, which makes things either more easy or more difficult to read.
Giving some text more or less contrast than the surrounding text is a simple way to create emphasis. Emphasis, when used sparingly, makes information easier to digest.
Emphasizing everything has the opposite effect: information becomes more difficult to digest and may be ignored entirely. This principle is especially important with ads and websites.
When using a web or email format, try selecting key phrases and making them bold or semi-bold. It can quickly make the most important information easy to find and remember while scanning this blog page. This helps readers get all the most important information they need even when studies show that readers only read roughly 25% of what is typed on a website. (study performed in 2008 by Harald Weinreich).
Bold and italics are easy enough to quickly see how they affect a text's color: italics tend to appear lighter and bolds tend to make text appear darker. But what about the other two?
Line-height is trickier to properly incorporate because there are no set rules. The best result will always vary. However, as a general rule of thumb more line-height space makes a paragraph's overall color lighter, and less line-height space makes a paragraph's overall color darker. To apply the principle of contrast to make text easier to read on dark mode sites, this is why extra line height is needed to remain easy to read. Because line-height makes a paragraphs color lighter, you want to be extra careful not to space the lines too far apart or too close together.
A good starting minimum line-height for a light mode or white background website is 1.5em or 1.5 times the height of your line of text.
A good starting minimum line height for a dark website is 1.8 or even 2 em, depending on the font's size.
Spacing
Most reading occurs from the shape of the word, not from the individual letters in a word. That's why we can strll read wrrds in spite of srrall typos. It is important to let words have the appropriate amount of space to breathe. If they are too crowded vertically or horizontally, readability is severely affected.
Keep in mind when choosing fonts that they have clean and even spacing, especially for paragraphs of text. When choosing script or cursive fonts, the letters are often pushed too close together to comfortably read, and will need some more fine-tuning.
Be mindful of the margins! Text that is otherwise nicely spaced and sized, when running from edge to edge of the web page makes reading more difficult. Keep the width of paragraphs roughly the length of three alphabets strung together. This often results in close to the optimal spacing, but adjustments are almost always necessary for each font. Check that margins on the mobile version of your site are just as friendly as they appear on desktop, there are usually some spacing tweaks necessary when the website is shown at a different size.
Readability for the Win
Entire libraries have been written about the subject of typography. It is an art unto itself. However, the difference between a thoughtfully typeset website and one that isn't can make a big difference to your business.
To wrap up, our five methods to improve a professional website's typography are:
- Carefully chosen typeface to convey the company's tone
- An easy to read size font
- Complimentary header fonts that are multiples of 2 or 5 when larger than the text font
- Adjust a paragraph's color and spacing for optimum contrast
- Purposeful use of emphasis to make the most important information easy to read.
Great advice for deciding how to emphasize text is this: you choose and can have two changes at most to emphasize text. Choices to change can include: typeface, size, color, spacing and case (Capitalized or lowercase).
Want to read more about typography's impact on your company site? This article is a great start with more graphs and studies behind typography's impact on your website's user experience: https://cxl.com/blog/the-effects-of-typography-on-user-experience-conversions/
