30+ Ideal Fonts for Web


The most suitable fonts for web that render on all browsers, OS and devices beautifully.

Whenever you create a website that is likely to be opened in various parts of the world, on different web browsers or operating systems, and even on different kinds of devices (computers, mobile phones etc.), you need to pay extra attention while using fonts.There are only a few fonts which are displayed in the same manner in all kinds of these scenarios.

Today we are listing the fonts which look the same regardless of user’s browser, operating system and even device. These are called web safe fonts.
We have also added font-family code examples to describe the font stack you should use with each of these fonts.

Note: This font stack code is only to provide info about font family. Of course, you’ll need to add styling codes, such as point size, spacing etc. for proper display.

Note 2: Link backs to the source sites are not being provided because it is most likely that you already have these fonts in your computer. Most of these fonts come built-in with common operating systems and common desktop publishing suits. Yet if you somehow don’t have the font you like, you might have to buy it from Fonts.com or you can google for a free download.

Interesting Read: Font Wars: Serif vs Sans Serif – Which is Best? (A Case Study)

Sans Serif Fonts for Web

Serifs are the tiny strokes at the end of the main stroke of a font character. A font family that doesn’t have these serifs is referred to as sans-serif font family. Sans-serif fonts are mostly used online because they are easier to read on screens.

Tip: Tahoma and Verdana work better than any other font I’ve checked (and I’ve checked loads of fonts) on unicode. So if you are making a non-english, especially right-to-left language site, try to stay within these two.
font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;

Arial: one of the most famous web safe fonts.
Avant Garde
font-family: “Avant Garde”, Avantgarde, “Century Gothic”, CenturyGothic, “AppleGothic”, sans-serif;

Avant Garde: cool sans serif font.
font-family: Calibri, Candara, Segoe, “Segoe UI”, Optima, Arial, sans-serif;

Calibri: the finest font microsoft developed.
font-family: Candara, Calibri, Segoe, “Segoe UI”, Optima, Arial, sans-serif;

Candara: a unique font
Franklin Gothic Medium
font-family: “Franklin Gothic Medium”, “Franklin Gothic”, “ITC Franklin Gothic”, Arial, sans-serif;

Franklin Gothic: one of the most popular fonts among designers.
font-family: Futura, “Trebuchet MS”, Arial, sans-serif;

Futura: ironically, looks a little vintage.
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;

Helvetica: the font that revolutionized the industry.
font-family: Impact, Haettenschweiler, “Franklin Gothic Bold”, Charcoal, “Helvetica Inserat”, “Bitstream Vera Sans Bold”, “Arial Black”, sans serif;

Impact: ideal font for creating headings.
font-family: Optima, Segoe, “Segoe UI”, Candara, Calibri, Arial, sans-serif;

Optima: Modern and sleek font loved by designers.
font-family: Tahoma, Verdana, Segoe, sans-serif;

Tahoma: brilliant font to work with unicode.
font-family: Verdana, Geneva, sans-serif;

Verdana: another good font for unicode.

Serif Fonts for Web

We just defined what Serif is, so let’s not repeat it. Serif fonts are mostly used in print media, they are easier to read on paper. Serif fonts are usually not preferred because they become difficult to read on screens in general and small screens (phones) in particular.
Yet, some designers deliberately use serif fonts in web design, that is when they are creating large size headings or just want to make some text look different from the rest.
font-family: Baskerville, “Baskerville Old Face”, “Hoefler Text”, Garamond, “Times New Roman”, serif;

Baskerville: excellent font for web even though it is a serif font.
Big Caslon
font-family: “Big Caslon”, “Book Antiqua”, “Palatino Linotype”, Georgia, serif;

Big Caslon: stylish serif font.

Bodoni MT
font-family: “Bodoni MT”, Didot, “Didot LT STD”, “Hoefler Text”, Garamond, “Times New Roman”, serif;

Bodoni Monotype: bold serif font for headings.
font-family: Cambria, Georgia, serif;

Cambria: Microsoft's finest serif font.
font-family: Didot, “Didot LT STD”, “Hoefler Text”, Garamond, “Times New Roman”, serif;

Didot: stylish, decorated serif font for web.
font-family: Georgia, Times, “Times New Roman”, serif;

Lucida Bright
font-family: “Lucida Bright”, Georgia, serif;

Lucida Bright: serif font for content.
font-family: Palatino, “Palatino Linotype”, “Palatino LT STD”, “Book Antiqua”, Georgia, serif;

font-family: Perpetua, Baskerville, “Big Caslon”, “Palatino Linotype”, Palatino, “URW Palladio L”, “Nimbus Roman No9 L”, serif;

Perpetua: lovely name!
font-family: Rockwell, “Courier Bold”, Courier, Georgia, Times, “Times New Roman”, serif;

Rockwell: a bold font for creating headings and names.
Times New Roman
font-family: TimesNewRoman, “Times New Roman”, Times, Baskerville, Georgia, serif;

Times New Roman: one of the most common fonts out there.

Monospace Fonts for Web

A monospace font looks somewhat like a typewriter font. Every character takes up the same width margins. “i” and “w” take the same amount of space. Might seem odd but sometimes, they can be used very creatively.
Andale Mono
font-family: “Andale Mono”, AndaleMono, monospace;

Andale Mono: Monospace font for web.
font-family: Consolas, monaco, monospace;

Consolas:Typical typewriter fonts.
Courier New
font-family: “Courier New”, Courier, “Lucida Sans Typewriter”, “Lucida Typewriter”, monospace;

Courier New: comes built-in in most operating systems.
Lucida Console
font-family: “Lucida Console”, “Lucida Sans Typewriter”, Monaco, “Bitstream Vera Sans Mono”, monospace;

Lucida Console: one of the best monospace fonts out there.
Lucida Sans Typewriter
font-family: “Lucida Sans Typewriter”, “Lucida Console”, Monaco, “Bitstream Vera Sans Mono”, monospace;

Lucida Sans Typewriter Font

Misc. Fonts for Web

Brush Script MT
font-family: “Brush Script MT”, cursive;

 Brush Script: handwritten or paintbrush font effect.

font-family: Copperplate, “Copperplate Gothic Light”, fantasy;

Copperplate: Stylish fantasy font for headings.
font-family: Papyrus, fantasy;

Papyrus Font

Web Safe Fonts for Mobile Devices

If you are designing websites for mobile devices, the space is even limited here. You cannot use all the fonts listed above for mobile phones.
The fonts listed below are the ones which are commonly used on mobile based websites. You can use @font-face tag for Android devices to import the fonts in the device. iPhone, iPod, and iPad devices come with these fonts built-in:

  • Arial
  • Courier
  • Georgia
  • Palatino
  • Verdana
  • Helvetica
  • Courier New
  • Times New Roman

I hope you like my effort. This post is response to Aravind’s request. If you want us to make a post on any topic, anything at all (but relevant of course), just comment and we’ll get on it. 🙂

Credit Note: screenshots of these fonts were taken from from Fonts.com, font family codes were provided courtesy w3schools and cssfontstack.

create free website wix below post

Further Related Readings

  1. Faisal Khan May 5, 2013 at 11:51 pm

    AoA tayyab bhai, can you please do a tutorial on a web hosting template design from psd to html/css please?

    1. Tayyab May 7, 2013 at 7:20 am

      Hi Faisal
      Nice to see back on Designzzz.
      I’m terribly sorry but we won’t be able to make your wish come true this time.
      You see, the problem is that there are so so many free web hosting templates and designs available that our one won’t be anything new at all. We discussed designing a webhosting template but the idea was dropped immediately when we searched the internet and checked how many and what kinds of designs were available already.
      Sorry again 🙁

  2. Sindy May 8, 2013 at 12:28 pm

    This is an awesome post. I have been in the process of designing my portfolio website and started to play with font-families and typography, so this couldn’t have come at a better time! Thanks a bunch!!


    1. Tayyab May 8, 2013 at 12:51 pm

      thanks for the appreciation Sindy, and good luck for the portfolio 🙂

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved