Blog :

Typography on the Web: A Contrast to Design Trends

Typography on the Web: A Contrast to Design Trends

The advancements of web technologies over the past decade have allowed for a much more vibrant experience; both for designers and developers architecting websites, as well as for the end user who views and interacts with those websites. The options for fonts, and available web colors have especially evolved over time, allowing for a broader spectrum of how text-based content can be displayed on a web page. The unfortunate side effects this has caused, are design trends that have steered in a direction away from core principles of typography, readability, and accessibility.

The web was created to make text legible, and readable: Pure black text on pure white background; deep blue links on pure white background; deep purple for visited links on pure white background. As more web colors were available to newer browsers, and monitors, designers have been experimenting with new color options to help set their websites, or brands apart from the rest.

While new options can certainly a good thing, over time the concepts of readability, and contrast have fallen by the wayside. It is crucial to design a website so that all text has the appropriate amount of color contrast between foreground, and background to ensure that it complies with the Web Content Accessibility Guidelines 2.0, at least the AA contrast ratio standard. The best a website can achieve is the AAA standard, but a vast majority of websites on the Internet will not pass the AAA contrast check.

Things have changed for the font tools available as well. Designers have sought to explore more possibilities on how to elegantly display text, with more options of stylized fonts. Before the era of Google Fonts, there were various image, Flash, or other replacement options for text to display outside of the core web fonts available. The tools available now are considerably better, but caution must still be taken when selecting fonts. A designer can pore over various fonts to find one “cool” enough for their site. But, do they consider every kind of user that will be trying to read that font? What is “cool” to a designer, may be difficult to read for an average website user.

The weight of the fonts used on a website are also extremely important – a thinner font weight can be more difficult to read, while a bolder font weight may be too overbearing for most users to even bother reading. Selecting an elegant font that is still close enough to the standard fonts that have been around forever is a vital part of conveying whatever message your website is stating. When tying this together with the colors selected, the contrast of the font on its background is one of the most important aspects of readability, and accessibility.

Even if the contrast of text on a web page looks good to a designer in their perfect settings, caution must also be taken to consider that not all users have the same vision, and not all users have the same brightness, and contrast settings on their devices. Finding the right balance in a design’s standard brightness, as well as when viewed at a lower brightness setting, is beneficial to ensuring users remained engaged with your site. If a user cannot read something, your message is lost, and likely that user is also lost. Keep typography readable, and keep your users reading.