We recently published 12 ways to use non-system fonts on a website. Bonus: there’s more.
Read the first part of this series here.
From expressing familiarity to evoking novels from our childhood, fonts can do a ton of work on the web. Due to the volume of fonts available, one article wasn’t enough.
So, here’s 10 more ways to use non-system fonts on a website….as direct substitutes for system fonts.10 More Ways to Use #Non-System Fonts in #WebClick To Tweet
Before We Begin
You will note a key difference in this second part.
That difference is the absence of both the “Feel” and “Family” sections from the last list. Given that many of us are familiar with the types of uses the most common system fonts have, it seemed redundant to restate them here.
Without further ado:
13. Make a Conscious Choice to be Neutral Instead of Ambiguous
Helvetica is often used when companies or individuals want a more neutral typeface that is also web-safe. It has even been referred to as “one font to rule them all”. Due to its simple, but well-defined nature, it is a common choice for design firms to real estate agents.
As a result of active open source communities, you can find SO MANY SUBSTITUTES with one simple Google search (or Bing, I guess). There is even a non-system font alternative called “Neutral”. It offers similar features such as easy to read, well-spaced letters.
Source: Kai Bernau via Typotheque
Best Replacement For: Helvetica
14. There is Very Little Need to Spend big Bucks
While there are many fantastic alternatives to Arial such as Atlas, they can be quite expensive.
We are talking anywhere between $139 to $750 for more than one user on the desktop PC version. But Google Fonts offers more affordable and free options.
Many of these fonts (like Lato) also double as alternatives for Helvetica and all of them are available for free.
Pro-tip: many of these also made it into our first article, too.
Source: Łukasz Dziedzic via Google Fonts
Best Replacement For: Arial
15. “Look-alikes” are not out of the Question
The slightest changes can have solid, measurable impacts on user engagement. But there are so many options out there including other system fonts like Futura.
Why wouldn’t you opt for a little “inside the box” creativity? (See what I did there??)
One of the main Times New Roman alternatives, Roboto Slab, made the first cut.
But if you want a TNR look alike, consider the font Lora. It utilizes similar curves and boxy letter shapes that TNR offers.
Source: Cyreal via Google Fonts
Best Replacement For: Times New Roman
16. Add Personality to Your System Font
The biggest perk to non-system fonts is their ability to convey personality. Since many system fonts are designed to be exclusively web-safe, they can lack originality. Calibri offers enhanced readability. As a result of this, it can be limiting stylistically.
Consider fonts like Raleway. The letters are a little more angular…a little larger…a little more unique. Raleway also enables you to avoid the tumult and scorn of many a designer who has strong Opinions™ about Calibri. It’s also free!
Source: Impallari via Google Fonts
Best Replacement For: Calibri
17. You can use Conversational Fonts Just not Comic Sans
Due to its comical nature, many mock the font Comic Sans when we were younger. Some suggested that this oft hated font was easier to read for Dyslexic people. As a result of recent findings, however, this claim has not been proven.
Ignoring the readability factor, there are better alternatives to this light-hearted romp of a font. Both Laconic and Architect’s Daughter maintain the bouncy nature of Comic Sans while spurring less ire.
If you are going for max readability, consider Lexia Readable. This font differentiates “b” and “d” letters using asymmetrical lines. It is even called “Comic Sans for Grown-ups”.
Font: Lexia Readable
Best Replacement For: Comic Sans
18. Opt for a Non-System Font With Many “Types”
Open Sans is another font that has many, many alternatives. Some of them, like Merriweather and Montserrat, made our other list. Though substitutes like PT Sans and Arimo are great, they can offer limited variety.
Nunito Sans offers 14 different types from extra-light to semibold to extra-bold Italic. Due to its idiosyncratic essence, Nunito Sans could be useful for writers or companies with products/services aimed at writers.
Font: Nunito Sans
Source: Vernon Adams and Jacques Le Bailly via Google Fonts
Best Replacement For: Open Sans
19. Get a Non-System Font for Your Specific use Case
Verdana, a favorite for coders, can be difficult to replace. Due to its simplicity, substitutes are often too “fancy” or unclear. For coders, in particular, clarity of font is key.
Now, I am not a hardcore coder, so don’t just take my word for it. You can read up on Verdana alternatives on Slant.
For those of you searching for clear, concise non-system font alternatives, Input Mono is a great option. Not only did it have zero cons on Slant, it is 100% free to use.
Font: Input Mono
Source: DJR & Font Bureau
Best Replacement For: Verdana
20. Some Non-System Fonts are Available as Subscriptions
Finding a Courier substitute proved one of the more difficult tasks. Many of the options like Triplicate and SG Benton SB cost upwards of $100 USD. Being a startup ourselves, we here at Edgy Labs prefer to find solutions that work for companies AND individuals.
In that vein, we found Nitti. This typeface does have more character than Courier. Most noteworthy about Nitti is that it is available as a subscription service for $40.00 USD/year. Due to the offerings of “hosted” vs “ self-hosted”, users of different platforms like WordPress, Squarespace, Wix, and October CMS have options.
Source: Pieter van Rosmalen and Blue Monday
Best Replacement For: Courier
21. Avoid Using System Fonts to Stand out from the Crowd
It’s debatable as to whether or not Papyrus is a system font. But, I think we can all agree that it is a vastly over utilized font. Even SNL poked fun at it in this sketch featuring Ryan Gosling playing someone haunted by the use of it in James Cameron’s Avatar.
But if you want to convey a similar feel as Papyrus, consider my favorite Teenage Mutant Ninja Turtle. The font “Donatello” evokes the same kind of script-like and historical vibe without relying on an over-used font. All of the non-system font alternatives to Papyrus offer varying degrees of Avatar.
Source: Garrett Boge & Paul Shaw via LetterPerfect and Font Shop
Best Replacement For: Papyrus
22. System Fonts are Totally Overrated
Sometimes, a script typeface is precisely what your website needs. Many designers loathe the use of system fonts like Vivaldi simply because of overuse. Non-system fonts can instantly grant you clout with users from various industries. Decor Light is a fantastic substitute available starting for $30.00 USD.
As a result of similar flowing curves, you eschew the chidings of any would-be critics. Alternatively, if Decor Light doesn’t light your font fire, you can choose from literally dozens of others.
Font: Decor Light
Source: ParaType via Fontspring
Best Replacement For: Vivaldi