Best Web Safe Fonts

Home » Best Web Safe Fonts

Sample Fonts Page

 

Excerpted from a web article by Robert Mening, edited by Paul Gerardi. Read the original article here, from the resource WebsiteSetup.org

The following are best practice web fonts that work with HTML and CSS, and are included with Gerardi Gem’s version of the WordPress Classic editor, with TinyMice Advanced font plug-in.

NOTE: The current font of Gerardi Gems is 12pt “Georgia”, with “Heading 5” and “Paragraph” used on all pages. “Body” refers to the setting of the font in the body of pages and posts, and is synonymous with what the WordPress Editor considers “Paragraph”.

Why Does ‘Web Safe’ Matter?

Each device comes with its own pre-installed font selection. The selection is based largely on its operating system. The problem is that every system differs a bit. Windows-based devices might have one group. MacOS ones pull from another. Google’s own Android system uses their own as well.

When you pull up a website, the font you see may not be the one originally one intended.  Here’s an example. Let’s say the designer picked some obscure, paid font family for this site’s design. If you don’t have that font already installed and it’s not pulling from a web-friendly place – more on that later – the font you see would default back to some basic variation like Times New Roman. You, as the visitor, wouldn’t necessarily know that this is what has happened, though. For you, it might just look plain ugly. So it’s not wise to pick an obscure font that most devices won’t have.

The ‘Web safe’ ones, appear across all operating systems. They’re the small collection of fonts that overlap from Windows to Mac to Google (even Unix or Linux ones too). They give designers (and website owners) the ability to specify exactly which fonts their users will see. That way, you can control what shows up (no matter what) across all devices. So if you have a font that’s near and dear to you, then look to see which web safe font is the closest match.

Here you go, check ’em out!

 

1. Arial   (Heading 1)

Arial Heading 2

Arial Heading 3

Arial Heading 4

Arial Heading 5
Arial Heading 6

Arial Body

Arial Body Bold

Arial Body Italic

ARIAL ALL CAPS

Description:  Arial is like the de facto standard for most. It’s one of the most widely used sans-serif fonts (which means no little curls on the end of each letter). It’s often substituted on Windows devices for other interesting (read: more beautiful) font choices.

 

2. Helvetica (Heading 1)

Helvetica Heading 2

Helvetica Heading 3

Helvetica Heading 4

Helvetica Heading 5
Helvetica Heading 6

Helvetica Body

Helvetica Body Bold

Helvetica Body Italic

HELVETICA ALL CAPS

Description:  Helvetica is usually the designers’ go-to sans serif font. You can almost never go wrong with Helvetica (or at least using it as a fallback for most other choices).

 

3. Times New Roman (Heading 1)

Times New Roman Heading 2

Times New Roman Heading 3

Times New Roman Headng 4

Times New Roman Heading 5
Times New Roman Heading 6

Times New Roman Body

Times New Roman Bold

Times New Roman Italic

TIMES NEW ROMAN ALL CAPS

Description: Times New Roman is to serif (with embellishing curlies) what Arial is to sans serif. It’s among the most popular on Windows devices and is a new variation on the old Times font.

 

4. Courier New (Heading 1)

Courier New Heading 2

Courier New Heading 3

Courier New Heading 4

Courier New Heading 5
Courier New Heading 6

Courier New Body

Courier New Bold

Courier New Italic

COURIER NEW ALL CAPS

Description: Courier New, similar to Times New Roman before it, is a variation of another old classic. It’s also considered a monospaced font (as opposed to the serif vs. sans serif we just saw).

 

5. Verdana (Heading 1)

Verdana Heading 2

Verdana Heading 3

Verdana Heading 4

Verdana Heading 5
Verdana Heading 6

Verdana Body

Verdana Bold

Verdana Italic

VERDANA ALL CAPS

Description: Verdana is a true web font because (1) the simple sans serif lines and (2) it’s super large size. The letters are almost elongated, which makes it easy to read online. 

NOTE:  Verdana is the font that the current Gerardi Gems JOOMLA uses.

 

6. Georgia (Heading 1)

Georgia Heading 2

Georgia Heading 3

Georgia Heading 4

Georgia Heading 5
Georgia Heading 6

Georgia Body

Georgia Bold

Georgia Italic

GEORGIA ALL CAPS

Description:   Georgia is similar to Verdana in size and stature (with bigger-than-usual letters compared with fonts of the same size). So while it’s great for certain circumstances, make sure to avoid pairing this serif font with others (like Times New Roman) which might look minuscule in comparison.

 

7. Bookman Antiqua (Heading 1)

Bookman Antiqua Heading 2

Bookman Antiqua Heading 3

Bookman Antiqua Heading 4

Bookman Antiqua Heading 5
Bookman Antiqua Heading 6

Bookman Antiqua Body

Bookman Antiqa Bold

Bookman Antiqa Italic

BOOKMAN ANTIQUA ALL CAPS

Description:   Bookman (or Bookman Old Style) is another perfect headline option that maintains legibility (or readability) even when used in a small size.

 

8. Comic Sans MS (Heading 1)

Comic Sans Heading 2

Comic Sans Heading 3

Comic Sans Heading 4

Comic Sans Heaing 5
Comic Sans Heading 6

Comic Sans Body

Comic Sams Bold

Comic Sans Italic

COMIC SANS ALL CAPS

Description:  Comic Sans MS is a playful, whimsical alternative to other sans serif options. It’s also kinda fugly. Don’t use it! ??

 

9. Trebuchet MS (Heading 1)

Trebuchet MS heading 2

Trebuchet MS heading 3

Trebuchet MS heading 4

Trebuchet MS heading 5
Trebuchet MS heading 6

Trebuchet Body

Trebuchet Bold

Trebuchet Italic

TREMBUCHET ALL CAPS

Web Safe Font – Trebuchet MS

Description:  Trebuchet MS is a medieval-themed font originally designed by Microsoft in the mid-nineties. It was used on the XP version, and today commonly appears as body copy on the ‘net.

 

10. Arial Black (Heading 1)

Arial Black Heading 2

Arial Black Heading 3

Arial Black Heading 4

Arial Black Heading 5
Arial Black Heading 6

Arial Black Body

Arial Black Bold

Arial Black Italic

ARIAL BLACK ALL CAPS

Description:  Arial Black is the bigger, bolder, badder version of your basic Arial. Funny enough, it also shares proportions with Helvetica. Why is that important? So that they could originally use it to replace Helvetica and print things without paying for the license.

 

11. Impact (Heading 1)

Impact Heading 2

Impact Heading 3

Impact Heading 4

Impact Heading 5
Impact Heading 6

Impact Body

Impact Bold

Impact Italic

IMPACT ALL CAPS

Description:  Impact is another bold headline choice that looks great in a few short words, and absolutely terrible in a sentence or longer.

 

Conclusion

Web-safe fonts give you a Plan B, a safety net that ensures that your vision is what your website user will truly see. They’re widely accessible and have been available on most devices for decades (in some cases). While not all of them are #winners (Comic Sans MS? Yuck!), there are enough to choose from that should be closely related to your original option.

What happens if you really have a problem deciding? You can’t go wrong with Helvetica !