bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/CSS/Reference and Practice
CSS•Reference and Practice

CSS Web Safe Fonts

Concept visual

CSS Web Safe Fonts

Pointer walk
two pointers
leftright102132436485116
left=0
right=6
1
3

Start at both ends

Best Web Safe Fonts for HTML and CSS The following fonts are the best web safe fonts for HTML and CSS:

Formula

Arial (sans - serif)
Verdana (sans - serif)
Tahoma (sans - serif)
Trebuchet MS (sans - serif)

Times New Roman (serif) Georgia (serif) Garamond (serif) Courier New (monospace) Brush Script MT (cursive)

Note:

Before you publish your website, always check how your fonts appear on different browsers and devices, and always use fallback fonts !

Formula

Arial (sans - serif)

Arial is the most widely used font for both online and printed media. Arial is also the default font in Google Docs. Arial is one of the safest web fonts, and it is available on all major operating systems.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9

Formula

Verdana (sans - serif)

Verdana is a very popular font. Verdana is easily readable even for small font sizes.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9

Formula

Tahoma (sans - serif)

The Tahoma font has less space between the characters.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9

Formula

Trebuchet MS (sans - serif)

Trebuchet MS was designed by Microsoft in 1996. Use this font carefully. Not supported by all mobile operating systems.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9 Times New Roman (serif) Times New Roman is one of the most recognizable fonts in the world. It looks professional and is used in many newspapers and "news" websites. It is also the primary font for Windows devices and applications.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9 Georgia (serif) Georgia is an elegant serif font. It is very readable at different font sizes, so it is a good candidate for mobile-responsive design.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9 Garamond (serif) Garamond is a classical font used for many printed books. It has a timeless look and good readability.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9 Courier New (monospace) Courier New is the most widely used monospace serif font. Courier New is often used with coding displays, and many email providers use it as their default font. Courier New is also the standard font for movie screenplays.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9 Brush Script MT (cursive) The Brush Script MT font was designed to mimic handwriting. It is elegant and sophisticated, but can be hard to read. Use it carefully.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet. 0 1 2 3 4 5 6 7 8 9

Tip:

Also check out all available

Google Fonts and how to use them.

Previous

CSS Syllabus

Next

CSS Study Plan