- September 4, 2014
7 Alternatives to Popular Web Typefaces for Better Performance
- @katiekovalcin
- Designer
It’s no secret designers love typefaces. Web design is 95% typography, and it’s hailed as the most important aspect of a design.
So, it’s imperative to find typefaces that accurately convey the voice of our words. Designers may not be always thinking about it, but how a site performs can be as important as choosing the right typeface. The weight of a font kit is arguably more important to a site’s performance versus other heavy hitters (like images), because fonts are loaded on every single page. And, after all, if a site loads too slowly, users won’t view the typography as you’ve intended!
Typographic selection is already a delicate act, but sometimes a font that just feels right is unfortunately a heavier file to load. Designers are already responsible for evaluating so many facets of a typographic palette (readability, character set, brand guidelines, etc.), but as a designer myself, I’d encourage you to add “performance” as one of those metrics. This is especially true if you’ve decided on a performance budget with your project team.
If you’ve landed on some heavier fonts, you may want to consider a typeface that is visually similar but has a smaller file size. It is possible to gain better performance without sacrificing other characteristics of your design. Let’s go through some examples. Below, I’ve selected seven typeface “performance swaps” for popular faces on the web. For each, I’ve displayed the minor differences in character structure when set at the same pixel value, while showcasing the major difference in potential performance between two similar typefaces. The noted file sizes reflect a standard kit of a book (or equivalent) weight, book italic, bold, and bold italic. So, if you want to focus on a metric like file size, here are some stars for your consideration.
Chaparral Pro
Chaparral brings old-world elegance to a slab serif. Its open forms and edgy serifs create lively and legible text. Unfortunately, weighing in at 188k, it’s one of the heavier typefaces on this list. Tisa Pro has similarly tapered serifs, but its higher x-height and more consistent stroke thickness keep that easy legibility with nearly 50k less weight.
Chaparral Pro 188k
Tisa Pro 140k
Sidebar: These and other “Pro” typefaces on this list tend to be heavier than their regular counterparts, because they typically include a wider variety of characters and stylistic alternatives. It is possible to trim a Pro font kit weight by limiting character sets and narrowing style selections.
Meta Sans
Meta Sans is used widely due in no small part to its excellent readability at small sizes. Both Meta Sans and Ronnia combine the friendly nature of the humanist sans serif with flexibility for body copy. The slightly condensed features of Ronnia make it a perfect alternative to Meta Sans. Ronnia is a sturdier design, but that doesn’t detract from the graceful details it shares with Meta.
Meta Sans 112k
Ronnia 98k
Adobe Text Pro
Whether you’re designing a site for a historic university or a literary publication, traditional serifs can add a credible tone to a design. Adobe Text Pro possesses both calligraphic and modern serif characteristics that make it appropriate for a variety of uses. Calluna retains Adobe Text Pro’s classic voice and modern structure with a nearly identical x-height. While many serifs have intricate details that can weigh down a font kit, Calluna is sized conservatively.
Adobe Text Pro 172k
Calluna 147k
Athelas
Athelas is a true beauty of a serif. It has ample contrast, elegant serifs, and remarkable rhythm. But despite the dainty design, it’s a pretty hefty file size. Freight Text Pro may not perfectly match the aesthetics of Athelas, but at nearly half of the file size, it’s a great contender to try.
Athelas 212k
Freight Text Pro 111k
Bernino Sans
Bernino Sans is a sans serif typeface that you’ve probably recognized on Medium and all across the web. It renders wonderfully both for headlines and tiny descriptors. A lighter version that shares similar qualities to Bernino is Adelle Sans. Not only does it share the elegance and gothic characteristics of Bernino, but it also contains similar physical traits like hard angles and monoweight strokes.
Bernino Sans 123k
Adelle Sans 106k
Futura
Futura is a classic geometric sans serif. I love Futura, especially when it tastefully uses uppercase for small headlines. Its distinct geometry is what makes it unique, but it is the number one heaviest file size on this list! If you’re looking to achieve the unique geometric feeling but on a performance budget, you may want to check out Brandon Grotesque instead. While its rounded stems may overly warm up your design, it still keeps a geometric structure at a significantly smaller file size.
Futura 268k
Brandon Grotesque 133k
Pragmatica Web
Lastly, Pragmatica Web is a typeface based on Helvetica, but it is quite heavy when you add all four styles to your kit. Good news, Nimbus Sans was also based on Helvetica and comes in at a fraction of the size! The nuances in thickness and x- and cap-heights are so subtle that when you “weigh” it against the over 100k file size difference, Nimbus Sans stands out as the optimal choice.
Pragmatica Web 196k
Nimbus Sans 88k