A while back, I wrote a post about the importance of custom fonts for a frontend theme. With the advancements in operating systems, font files and outlines and browsers, designers have more freedom and control than ever before with web typography. Since there has been so much change since the last post, I wanted to take a moment to review the tools that are out there and what I have learned while building and styling unique interfaces.
Now more than ever, a designer has almost complete freedom when selecting font libraries to use with their design concepts. In many cases, the typography can take a design concept to the next level and really give the user interface that final touch that makes it award-winning. The services used to render or create web fonts have grown to not only support more font libraries but also more font weight possibilities. Google Fonts now sports a fresh and intuitive interface the makes find the right font combinations even easier. Adobe Typekit has a library of over 2,000 fonts while also having a price point that won’t break a client’s budget. Access to Typekit fonts during the design and development phase simply requires a Creative Cloud account, which is typically already purchased. By using these third-party tools, designers are tapping into the latest and greatest in font rendering technology on the web.
The designer has been given so much more freedom with these enhancements in web font technology and modern browsers. However, there are still many factors that need to be considered when picking the right font combinations. Many display fonts work well for headers and buttons but should never be used for body text. While having a large variety of font weight options strengthens the design and hierarchy of content and display, it also adds to the font library total size and will impact load time. Will the site support multiple languages? Many of the fonts found on Google and Typekit support multiple languages and characters, but it is always import to check. Browsers and operating systems vary in the way fonts are rendered on the page. Detailed browser and device testing is recommended when using fonts that are not typically available on a local machine. It is also extremely important to be clear with a client the importance of the fonts selected with a design along with the performance and cost implications.
One important setting introduced by Typekit is the OpenType features for a particular font. OpenType features introduce several new options for the way we enhance body or display text. Many of these features are more common in print design, such as kerning, ligatures, contextual alternates or small caps. However, when used on the web, these features have the same impact regarding look and feel and legibility. This Typekit Practice article provides great details into what OpenType provides for rendered text on the web and how drastically the text can change with these settings removed. While OpenType has great potential impact on the user experience of a site, browser support is still very limited. Older versions of Safari, Chrome and Firefox all lack support for OpenType. Internet Explorer also struggles to render fonts correctly when these options are selected. I would like to explore these features in great detail in the future, but the accurate rendering of the font library for all devices and browsers is most important.
Over the past few years, there has been an incredible amount of growth in both the general font library available to a web designer along with the optimization of the font rendering for the frontend user. Having this level of creative freedom is both fun on the design side and helps make every interface even more unique. There has been a lot of research into the best ways to optimize font rendering on the web and there are tons of factors that need to be factored in. The Typekit blog has been a great resource when investigating the various issues and has seven posts on font rendering technology alone. If there are any questions or if you would like to discuss further, contact us or use the comments below.