Designers tend to be perfectionists, as everything they do has to fit in place precisely the way they intend it to be whether based on concepts or imagination. Most browsers tend to default to Times New Roman or the likes, which does not quite blend in with sleek, imaginative, and very creative designs.
With that said, creative designers always search for new fonts and techniques to improve and implement their favorite typography to their websites. Below we’re excited to cover 7 helpful tips on how to improve the typography of your websites.
Contrast and Color
Color and contrast are a very important piece to the typography puzzle. Many tend to keep typography color in the same color wheel as their main design is. For instance, having a dark blue background means they tend to set a light blue typography color. Sometimes this is an issue as the colors may blend too much making it viewable but rather difficult to read causing eyestrain.
For your readers or viewers, this makes them less inclined to read articles or to browse around your website for a longer period of time. Therefore, the color contrast between the background and the foreground text or typography should generally be quite significant to keep things apparent, like black on white, or white on blue.
Font Size
The font size is a very important key to keeping text readable, clear, and precise. A general tip is to keep font in a comfortable cushion where it is not too large that can cause unnecessary used space, but not smaller than a usual textbook font size.
A good way to emphasize your body content from your sidebar or side-focus content is to generally have the font size of the body content larger than the side content as your viewers will spend more time reading the body text than the side text.
Therefore, keeping the side content out of focus from the body content enables the viewer to easily browse and read about, this is also referred to as a hierarchy between content.
Emphasis
Let us look back at the hierarchy concept discussed earlier, by it, we can easily identify between many bodies of text. For example, if the largest text in size on your web page is up top, while other bodies of text are significantly smaller, your eyes will naturally land on the larger object, in this case the larger text size. What this means is, by emphasizing certain keywords or text blocks, you increase its visibility across that page.
With that said, throughout your body text, highlighting or emphasizing key aspects from your text helps keep your long text blocks clear and understandable. Additionally, it gives your design or website a nice touch to the typography, keeping it unique and organized at its best.
Proofreading
Proofreading in this case does not correlate to assuring your text contains correct spelling and is grammatically correct, but rather correlates to tying the misconnection between your design and the typography. Typography is not always about how it looks from a design perspective but also how it appears in clarity and readability when it comes down to actually reading the text.
Many usually tend to post a dump of the lorem ipsum dummy text and make it look good at a design perspective, but do not actually go in depth to the reading level to read the text to understand if their implementation of the typography is actually suitable and comfortable for reading. With that said, do not just style and layout the typography based on what looks good for the design, but also assure the typography is clear, well spaced, and organized for the general audience to easily read through.
Too Many Fonts
I have seen this as a commonality across many websites as if the designer was a kid in a candy store and decided to pick out one of each to put in their baggy. We all have bundles of favorite font faces and we tend to use many of them across many different projects. However, using multiple font faces causes confusion to your reader, as each font face has its own style for each character, making it difficult for them to read through. Instead, stick to one or two font faces across your website, and use your favorites for other projects.
Good Whitespace
Cramming everything together is a viewer’s nightmare, let alone a pet peeve to any designer. Leave a good whitespace gap between sets of text to keep other bodies of text the viewer may not be reading out of focus from what they are reading. This generally helps viewers from running on to different segments of text or from unintentionally skipping lines. Remember, spacing is key to good readability, so use whitespace wherever needed.
Use Font Stacks
You may have a favorite font face and decide to use it on your website, however, you need to understand that not everyone may have that font installed on their system or device, thus, it will not display properly. Instead, use CSS’ font stacks rather generously as a fallback to your viewers that do not have the font you originally intended the website to use.
A good fallback font would be something similar to what you implemented for utilization, and a fallback to that would be a font that is generally used across most platforms and devices. It is a great way to assure your website’s typography does not significantly change across different platforms and devices, leaving your typography exactly or close to the way you intended it to appear.
Overall typography for the web is an interesting topic with many tips and DO’s and DON’T’s arising across the web. The main thing to note is that the way the typography appears should be user friendly as well as compliment your website’s design. This includes color and contrast, size, font face, and the likes. Do not overdo it and complicate it with the typography, but also have it fit in with your design well enough for it to look great as well as be great for your viewers.