Your website is a presentation. Communicating to visitors and readers occurs primarily through the text on your website. A website’s typography can help make the entire experience on your website fluid and enjoyable.
But incorporating typography into a website is strategic.
Information online comes in the form of text, pictures and videos. But, web design in and of itself is 95% typography. Websites that have good typography have better graphic balance, readability, usability and accessibility.
Focusing on user interface allows for a clean, easy-to-navigate website.
A few small changes can make your website go from an eyesore to an enjoyable site that offers perfect balance and functionality.
Changes you can incorporate into your website are:
1. Stick to Standard Fonts
It’s tempting to choose an exotic font. After all, websites need to stand out, but fonts should be standard. There are a few websites that may have a purpose for a custom font or a font that is rare. Embedding services offer more than enough fonts that you can use (Typekit and Google).
But it’s best to stick to common fonts, like:
- Arial
- Calibri
If a font is a system font, it’s often a good choice. Standard fonts may not have the exotic formation other fonts offer, but they’re easier and faster to read.
2. Line Length Matters
A good reading experience means that you need to limit the amount of text that is on each line. You can choose to go with the recommendation of 60 characters per line. This number can vary, but it’s a general consensus that 60 characters is best for readability.
Mobile devices are much smaller than a normal screen, so up to 40 characters is recommended.
Web designers have several ways to limit the number of characters on a line. Text block widths are the best option. Set the em or pixels of the text block to allow the desired character amount for best results.
3. Font Sizes Need to be Crisp
Fonts need to look good at different resolutions and screen sizes. The introduction of mobile devices forces web designers to think critically about the fonts they choose. C. Lee Services has a great example of a font that looks good as:
- Body text
- Headers
- Large text
- Small text
- Titles
- Captions
- Buttons
It’s vital that the font be legible in a variety of different sizes – with a focus on smaller mobile devices when testing.
4. Incorporate Fallbacks for Fonts
CSS allows web designers to make fast and easy changes to a website’s style. An often-overlooked style that needs to be corrected is the font-family. If you’re choosing a font that is not a system font or is a system font, you want to include a fallback in the CSS file.
Why?
This allows web browsers that don’t display your font to display the backup font instead. Web font providers are the main concern here. Some providers will have an automatic fallback font. Typekit covers how to setup fallback fonts the right way.
Typography makes a drastic difference in your website’s appearance and the reader’s experience. It’s worth spending the time to implement the tips above to make your site a pleasurable experience for every viewer.
