Marketing 7 min read

10 More Ways to use Non-system Fonts on a Website

RossEdwardCairney | Shutterstock.com

RossEdwardCairney | Shutterstock.com

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.

Font: Neutral
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.

Font: Lato
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. 

Font: Lora
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!

Font: Raleway
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
Source: K-Type
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

image of person coding for article 10 More Ways to use Non-system Fonts on a Website
StockSnap | Pixabay

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.

Font: Nitti
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.

Font: Donatello
Source: Garrett Boge & Paul Shaw via LetterPerfect and Font Shop
Best Replacement For: Papyrus

image of Donatello from Teenage Mutant Ninja Turtles for article 10 More Ways to use Non-system Fonts on a Website
Donatello from TMNT | New Line Cinema via TMNTgifs.tumblr.com

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

Did we miss some of your favorite non-system fonts? Let us know in the comments!

First AI Web Content Optimization Platform Just for Writers

Found this article interesting?

Let Sumbo Bello know how much you appreciate this article by clicking the heart icon and by sharing this article on social media.


Profile Image

Sumbo Bello

Sumbo Bello is a creative writer who enjoys creating data-driven content for news sites. In his spare time, he plays basketball and listens to Coldplay.

Comments (0)
Most Recent most recent
You
share Scroll to top

Link Copied Successfully

Sign in

Sign in to access your personalized homepage, follow authors and topics you love, and clap for stories that matter to you.

Sign in with Google Sign in with Facebook

By using our site you agree to our privacy policy.