Since the early inception of the web, the typography fonts used online and how they are used have changed tremendously. Wonder why a web site from the 90’s looks like…well, it was made in the 90’s? Often it’s the typography selections in the site. Early web fonts that were overused or ineffective often give a website design a dated look. When a particular typeface becomes popular for a short period and everyone starts using it then it dies out, it’s often easy to spot when the site was made.
The Pros of the New Age of Fonts: Good Looks, New Styles and Many More Options
The evolution of typography fonts for online readership is a part of the crucial evolution of the web. Sites quickly went from just throwing up a 4 page style brochure’s worth of information to having sites that hosted tens of thousands of pages of content that needed to be organized and readable. Web designers and online content producers quickly learned that online content was often scanned more than read word by word and required multimedia elements to link visuals to written ideas to make online reading easier to digest.
Early common web fonts for “web 2.0” informational sites such as Times New Roman, Courier New and Comic Sans often were accompanied by hideous color schemes and did not set the right mood for their content. Like print, web designers soon learned that not just any font will do: their clients needed their content to command authority and match their professional tone.
Today’s web designs has endless font choices for logos, web graphics and a much more open arena for site copy development with new advancements in CSS styling of pages. Early web clutter has been replaced with cleaner and easier to read fonts and adjustable text for mobile and tablet devices as a part of responsive design. In other words, web text has not only become more stylish, but also smarter and able to detect what someone is using to read it and automatically adjust.
The movement within web design of haphazardly throwing up sites for clients just to “be on the web” in the early years of the internet often did not make businesses extremely successful as they had hoped. It soon became apparent that excellent design and content had to accompany functional code in professional website design.
The Cons of Evolving Typography: Overdone Trends, Page Load Speed
There is an unfortunate movement within modern web design that prioritizes style over and sometimes at the expense of practicality and functionality. As long as the design is trendy and modern, people will come and the site will succeed, proponents say. But design itself is effective visual and written communication – so when much needed informational content and reading accessibility is nixed in order to use the cool new font all the other web designers are using, it often hurts more than it helps. Not to mention that in 2 months, your site won’t look so fresh because the font will have become beaten to death throughout the web by designers eager to follow the trend.
The best design and web type choices align with website business goals, the type of information being presented and personality of the brand. Fonts themselves have strong personalities, so it’s important that typography choices match the personality of the client and industry in a professional way – not just follow cool new type trends. Experienced designers are experts at matching the look and feel of different typefaces to brands, regardless of the trends on other sites.
Another negative movement which UX designers are trying to push back against is choosing “fancy” fonts that are not widely compatible (when used as rich text) across browsers and operating systems. An important consideration in modern web design and responsive design is that your font needs to be readable on different sized screens, scalable for devices including mobile, tablets and widely accessible across PC, Mac and Linux systems.
Tips for Picking Online Fonts
With tens of thousands of fonts to choose from, it can be hard to find the right font or know where to look.
Finding Fonts: If you’re on a budget, there are many free font websites (such as dafont.com) but note that the fonts are not all freeware to use in every context and may have restrictions for commercial use. Look for words like “free” or “freeware” in the usage rights. Usage is more lenient for groups like students who are downloading fonts to use for their personal projects than for for-profit use.
There are many series of high quality fonts that are donation ware or pay-what-you-what, such as Lost Type. It just takes a little digging!
If you are doing a demanding branding project and have a very specific need, paid fonts might be a better option to get a more unique, higher end look.
To Serif or Not to Serif: Distinctions like serif and sans serif fonts can be confusing for new web designers. Serifs are typically easier to read in longer page copy because there is a greater distinction in the strokes of the letters (serifs are little end strokes on the letters) from each other, but sans serifs which have a more rounded off look (no serif marks) are popular in cleaner designs and modern logos.
Images vs. Rich Text: Fonts on images are embedded into the image and can be seen on any device that can load the image, giving web designers much more creative freedom. Designers still must consider load times of images, the readability of the font and that text on image files is not read as well by search engines as page text is (often requiring the use of an HTML “alt” tag to explain what the image is saying). Fonts for plain copy on web pages have to be accessible to a mass audience who is probably not using the same operating system or device. Plan ahead with rich text / page copy fonts, and note the same font may not appear exactly the same on all operating systems or browsers.
For responsive and email design: Change heading sizes, font size and the amount of content for mobile can be a wonderful technique to making your email blasts and responsive pages more effective. Typically, it’s much harder to read small text on smart phone devices. A new trend in responsive email design is to make text slightly bigger and use larger touch targets for links.