Features

Creating Beautiful Online Content with Web Fonts

By Ed Marsh | STC Senior Member

Are you tired of using standard fonts such as Georgia, Tahoma, Verdana, and (sigh…) Arial over and over in your help projects? Please say yes.

A benefit of moving from print to online content is that you have the flexibility of creative design without the expense of reproduction. There are no limitations on colors, margins, fonts, or page counts. Still, many print design principles apply, and good design matters—even more so in the online world. Limit the number of fonts you use to no more than three—a serif, a sans-serif, and if necessary, a monospace font for code.

The key to online presentation is cascading style sheets (CSS). Since its introduction in 1996, CSS has supported using different fonts. At the time, this typically meant system fonts that shipped with the operating system (e.g., Windows, macOS, Linux). Font selection was limited to system fonts due to bandwidth constraints, browser support, and typographers’ unwillingness to allow essentially endless copying of their work. It wasn’t until the 2000s that true Web font standards were developed.

Back in 2010, I wrote a blog post about how to implement Web fonts in MadCap Flare (my most popular blog post to date). Since then, new technologies have sprouted, bandwidth is almost limitless, mobile has taken over, and people expect beautiful experiences no matter where they are. When researching this story, I was surprised by how much has changed.

The good news is that it’s easier than ever to create a unique look for your online content. Web font technology is not proprietary (although many fonts require licensing). You can use this technology in any help system and any authoring tool.

In 2017, all major browsers—on both desktop and mobile—support using the CSS @font-face attribute. Most modern help authoring tools (HATs) use CSS to style WebHelp and HTML output, so you can easily implement fonts to change your help system’s look and feel. With some tools, you can even use your CSS to style your print output, giving your output a professional, consistent presentation.

There are many great places to find Web fonts. Google has its own font API (fonts.google.com), and Adobe offers Typekit (typekit.com), which is part of its Creative Cloud subscription. (Unfortunately, Typekit isn’t natively supported within the Adobe Tech Comm Suite at this time.) If you prefer a nonproprietary option, Font Squirrel (fontsquirrel.com) has been around since my original post seven years ago, and has hundreds of free fonts.

Check with your tech, marketing, or branding teams to see if they have some sort of standard CSS file, or a framework like Bootstrap to start from. This also gives you the opportunity to break down a silo and create a relationship with those teams.

Web Font Considerations

There’s not a lot of overhead in terms of effort or disk space. Font references barely affect the page load time for your desktop users, although you should be careful to use only the fonts you need. Your mobile users will thank you for limiting the amount of data you make them download.

If your output is distributed offline, such as WebHelp, you can choose to install fonts locally, or link to the font files on your company’s server. However, consider that your clients may not allow changes to system folders, such as the Windows Fonts folder (c:\windows\fonts), or allow references to external files such as CSS. You’ll also have to talk to your application team to ensure everything will be installed correctly.

For these reasons, it’s always good to specify font fallbacks—a listing of alternative fonts in case the preferred font isn’t available. If you look at a CSS file, you’ll notice the @font-face declaration usually has several fonts listed to accommodate the wide range of operating systems and platforms. You’ll almost always find the serif, monospace, and sans-serif attributes are also used. For example:

font-face: 'myriad web', arial, verdana, helvetica, helv, sans-serif;

Using Fonts

There are thousands of fonts out there, but not all font creators support font embedding, so be sure to read any license agreement before using them in your projects.

Figure 1. The Google Fonts site lets you preview and test fonts.

If your company will allow outside links, then implementing fonts are as simple as adding a CSS reference in the master pages/templates of your output, and updating your CSS files to refer to the fonts.

Figure 2. Google Fonts enables you to find fonts quickly based on such attributes such as style and weight.

If your company is hesitant to allow links to Google or Adobe, you can also save and host freely available font files on your company’s Web server and use these fonts in your HTML/WebHelp projects. If you ship help to customers, such as offline WebHelp or CHM, you can install the fonts on your users’ computers as part of your application’s installation.

Using Google Fonts

Since there are fewer restrictions than Adobe’s Typekit, let’s look at how to use Google Fonts in a help project. Google’s site is an elegant and beautiful way to preview, choose, and use Web fonts.

You can filter by font styles, font families, and classification by serif, sans-serif, etc. Once you select a font, you can choose what weights to use and implement.

On the Customize tab, you can choose the font weights to include. The interface also indicates the effect on website loading times. Selecting all the font weights and styles highly impacts download times, as shown in Figure 3, so consider your mobile users by choosing only the weights you need.

When you’re ready to go, click the Embed tab, and copy the HTML that Google provides, as shown in Figure 4. Place the <link> reference in the <head> section of your HAT’s template file.

Figure 3. Google Fonts shows the impact of your font choices on download times.
Figure 4. Google produces two snippets of code: one to paste into your template’s <head> tag and one to paste into your CSS file.
Figure 5. Click the icon on the top right to download a zip file of the fonts.
Using Fonts Offline

If you decide to use fonts locally rather than relying on Google to serve them, you can download the fonts by clicking the icon on the top-right, as shown in Figure 5.

After you download and unzip the fonts, keep it simple and place the fonts in a folder directly below your HAT’s main stylesheets folder. This will also make it easier for your developers to install as part of your software distribution.

Google Fonts gives you the code to copy and paste into your master stylesheet and template files. For offline use, you’ll need to specify the path to your fonts folder, instead of a URL. Your HAT may also require you to add these CSS files to your project.

In your help project’s master CSS file, reference the font-family you want. For example, to set Roboto Condensed as the default font on your pages:

body {
    font-family: 'Roboto Condensed', Georgia, sans-serif;
}

Note that font names that contain spaces must be enclosed in single, not double, quotation marks.

DITA

If you author in DITA, you can specify a CSS file to use by setting the args.css parameter in your build file. If you’re adventurous, you could edit the XSLT that generates your output to include the reference to the CSS file.

Conclusion

No matter how good your content is, presentation matters. By taking control of your online stylesheets, you can make your content easier to read and more engaging for your users. Happy fonting!

References

“@font-face.” Mozilla Developer Network. Last modified 7 Aug. 2017; accessed 14 Aug. 2017. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face.

“Adobe Typekit.” Typekit. Accessed 14 Aug. 2017. https://typekit.com/.

“CSS Web Safe Fonts.” W3Schools. Accessed 14 Aug. 2017. https://www.w3schools.com/cssref/css_websafe_fonts.asp.

“Free Fonts! Legit Free & Quality » Font Squirrel.” Font Squirrel. Accessed 14 Aug. 2017. https://www.fontsquirrel.com/.

“Google Fonts.” Google Fonts. Accessed 14 Aug. 2017. https://fonts.google.com/.

Marsh, Ed. “How to Embed Fonts in MadCap Flare WebHelp,” EdMarsh.Com, 2010, http://edmarsh.com/2010/12/13/how-to-embed-fonts-in-madcap-flare-webhelp/.

Otto, Mark, and Jacob Thornton. “Bootstrap,” Get Bootstrap. Accessed 14 Aug. 2017. http://getbootstrap.com.

“Web Typography.” Wikipedia. Accessed 14 Aug. 2017. https://en.wikipedia.org/w/index.php?title=Web_typography&oldid=791844312.

ED MARSH is an information architect and eLearning author at Goldman Sachs in Jersey City, NJ. He is the creator and host of the Content Content podcast (http://edmarsh.com/podcast) and the Content Content news aggregator (http://contentcontent.info), both geared toward technical communication professionals.