The evolution of web style has truly blossomed with the widespread adoption of webfonts. Before this, our role was as much about technical development as it was about aesthetic design.
The wave of excitement over webfonts has resulted in a dizzying array of font choices, leading many designers to go for easy solutions, thereby letting simplicity govern their typographic decisions.
But once you’re informed about what to look for, navigating the options is relatively straightforward. In this piece, we delve into the essentials to aid you in the smart selection of font technologies.
We’ll cover various methods using Garamond, a time-honored and distinguished typeface, as our example.
Cascading Stylesheets and Font Stacks
Opening our exploration, let’s discuss a method that avoids webfonts altogether. Cascading Stylesheets (CSS) allow us to create ‘font stacks’—hierarchies of fallback fonts starting with the preferred typeface, and ending with a general family type.
A favored resource online for font stacks is cssfontstack.com. It provides an excellent jumping-off point for creating a font stack, but bear in mind it’s often necessary to tailor the stack to your needs.
Stats from cssfontstack.com reveal that Garamond is a system font on a significant portion of both Macs and PCs. Their suggested stack is extensive:
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
Yet, how can we tailor this stack to better serve our design?
Recognizing the many Garamond variants, we can include a specific version as a close second option.
Forget Baskerville or Times as stand-ins for Garamond. Instead, let’s only keep those with true compatibility, like ‘Hoefler Text’. Additionally, for those lacking Garamond or its look-alikes, we’ll employ Georgia over the default serif, which is often Times New Roman.
The revised stack might appear as follows:
font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;
With this stack, Garamond becomes the main face a majority will see, with others getting respectable alternatives, and a few resorting to their default serif.
Advantages & Limitations
CSS font stacking is cost-effective, quick, and when using widely available typefaces like Garamond, could suffice perfectly. However, the method falls short when considering the abundance of pirated or incorrectly named versions—leading to unforeseen design inconsistencies.
Although font stacking is excellent as a fallback, it’s not the definitive solution.
The Realm of Google Fonts
Google Fonts is a common endpoint for many due to its cost-efficient (free) and straightforward CSS-loading of webfonts. The drawback? The selection is rather limited. While some fonts like Roboto and PT Sans are popular likely due to their cost-free access on Google Fonts, their design strengths play a role too.
Google Fonts presents EB Garamond, an open-source variant. But, it’s limited to a single weight and style without bold or italic. Designer Georg Duffner has kindly shared his ongoing work on Bitbucket, even though it’s not quite ready for production.
Benefits and Drawbacks
Google Fonts is an attractive choice for budget-conscious projects or if you cover costs, offering ease of font specification via CSS.
The real downside is the surprisingly scant variety despite their marketing. Not ideal for those seeking a particular typeface like Garamond.
Diving into Self-hosting
Self-hosting webfonts is a largely overlooked but powerful strategy that allows for subsetting—removing unnecessary characters for lighter file sizes and quicker loading.
If you examine a Garamond desktop font file, you’ll see a vast array of characters. Subsetting enables the truncation of the font to just those characters you need, decreasing the file size significantly.
Using font editing tools like the complimentary FontForge or the sophisticated FontLab Studio, you can subset a font by excising unwanted glyphs. The resulting file, now reduced in size, can make a big difference. A full 606Kb Adobe Garamond Pro file might whittle down to 56Kb when pared to basic latin and punctuation characters. Imagine the collective savings across different weights and styles.
Self-hosting Desktop Fonts
Most installed font files are TrueType (.ttf) with some in OpenType (.otf). It’s possible to upload these formats to a server and define them in CSS, but compatibility issues may arise with IE and some mobile browsers.
For better coverage, additional formats will be necessary. Formats like .eot for IE, .woff for its widespread browser support, and .svg for legacy browsers are all needed. Conversion services such as Font Squirrel’s can handle this for you.
The two-fold complication here is the likely licensing infringement when converting desktop fonts for online use, and secondly, their optimization for print over screens, rendering suboptimal digital display quality.
Self-hosting of Webfonts
Font foundries now provide optimized webfonts in various formats for direct server upload. Font purchasing platforms like FontShop.com and MyFonts.com are prime resources for this.
At MyFonts, various Garamond options can be licensed, ensuring legal usage and optimized web display. Prices vary, but the tradeoff is control over font delivery without reliance on external servers, with the added benefit of subsetting freedom.
Potential and Pitfalls
Sourcing your own webfonts comes with the perks of assured quality and the avoidance of dependencies on external server performance.
The con? The upfront costs and ongoing hosting and bandwidth considerations should be factored into your budget.
Profiling Webfont Services
Webfont services, much like Google Fonts, serve up typefaces through CSS links but offer an expansive selection.
The majors in the webfont service space are varied, with providers like Hoefler & Frere-Jones and their subscription-based offerings. Although, the availability of your required font is vital when selecting a provider.
Adobe Typekit stands out with its large assortment and high-quality offerings, included free with a Creative Cloud membership, making it a top pick for many designers.
Even with subscription options, Typekit might provide you with several Garamond versions to choose from, along with subsetting features to minimize file sizes.
The Good and the Less Good
Webfont streaming services deliver top-grade fonts in abundance and with a simple setup.
For Creative Cloud subscribers, the free access through Typekit is exceptionally welcoming. Yet for non-subscribers, linking your site’s font experience to a recurring cost and brand partnership with Adobe warrants consideration.
The primary concern with streaming fonts is the reliance on the performance of external servers, which can impact your site’s branding if those services experience downtime.
Deciding on the Best Font Solution
The right font delivery option varies by project, but there are some choices that become clearer when considering Garamond as our central case:
As a zero-cost solution, font stacking should be implemented as a readiness strategy but relying solely on it is risky.
Free streaming fonts from services like Google Fonts—or via Creative Cloud—can serve well if budgets are slim, although subsetting features may leave you wanting.
When the budget allows, choosing to self-host a web-optimized font ensures speed and control and is money well spent relative to the demonstrated efficiency gains.
Ultimately, augmenting your project with the right font strategy is both a technical and creative call, one that can substantially uplift the user experience.
Featured illustration/thumbnail, download concept art via Shutterstock.
