8 Fundamental Typography Tips for Designers
Many web designers spend too much time and energy on the overall theme of their sites but forget entirely about typography, so I decided to share with you some typography tips. Typography involves making language visible through type. Your site’s visitors are not stopping by to look at the design you have created – they are there because of your content. Have you considered if your content is clear and your type legible?
Here are eight typography tips to consider. How does your current design strategy measure up?
1. Color and Contrast – #1 in Typography Tips
Have you ever left a site with a headache and eye strain? This can easily happen if you do not have enough contrast between your background and font colors. Think in opposites – black and white – when choosing colors for your site. Positive contrast (black on white background) is easier to view than negative contrast (white on black background). Among all typography tips from below, consider it the most important.
2. Directing the Flow of Traffic
Use your type to point out where you want your visitors to start reading and where they should go next. Typography variations can also be used to highlight important points or quotes. Your typography can be used as a map for your readers.
You may be capable of designing all the pages so they are unique and creative from each other, but don’t waste your time and energy because visitors like uniformity and consistency.
Center text shouldn’t be too much used on a website. Because we read from left to right, a center justified block of text can be difficult to read because of the jagged edges. Don’t make reading your content a chore for your visitors.
5. Signs and Symbols
Most content management systems don’t play nicely with word processors. Strange things tend to happen with quotation marks, accents, and umlauts. If you aren’t paying attention, you’ll have to go back and correct these pesky problems. Instead, consult your HTML entities and stop these issues before they happen.
6. Size Matters
Most text design features 10-point font. This is a pretty universal number these days. However, not all viewers appreciate this standard display size. For example, baby boomers tend increase the font size for their browsers. What will happen to your site when they view it with this larger font? Will the text and design adapt? Or will the visitor encounter visible problems and endless scrolling?
7. Font Selection
For decades, writers have been turning to serif fonts to share their words of wisdom. The little marks at the end of each stroke lead the eye on to the next letter. However, this only occurs with high resolution (print) materials. In the digital era, serif fonts on websites (low resolution) just complicates things and makes reading more difficult. Plus, serif fonts often become blurry and pixelated on a computer screen.
Therefore, it is important to stick with sans-serif fonts on pixel-based displays. In fact, Verdana was specifically designed with computer screens in mind.
If serif fonts hold a special place in your heart and you just can’t seem to part with them, use these fonts in the headings and other small chunks of text. Choosing has never been easier. There are a lot of free font foundries and websites showcasing free fonts, like FontSquirrel and Google WebFonts.
8. Testing, testing.
Even if you are not responsible for your site’s content, check the content for clarity and readability. How does the text interact with scrolling? Check for any excessive line breaks. Is the content left-justified? What font is being used? Overall, can you easily read the content?
Flow is critical for any website. You want your visitors to be able to seamlessly flow through your website with ease and without unnecessary eye-strain and frustration. If you can’t seem to look critically at your own site, get some outside help and some fresh eyes.
Hopefully, this article acted as a quick crash course on typography and you are able to infuse a fresh perspective into your web design following these typography tips.