FONT SELECTION IN WEBSITE DESIGN

Serif and San Serif Font Options

San Serif font is a typefaces that do not use serifs (the small lines at the ends of characters).

Font type is an important for the readability of your copy and titles, and can set the tone of the website (Playful, funky, all business, etc.). 

Popular website friendly sans serif fonts include Open SansAvant GardeArial, Tahoma, Amasis, and Geneva.  San Serif font style is considered as presenting a more modern or contemporary tone.

Popular Serif fonts include Times RomanCourierNew Century Schoolbook, and Palatino.

In the early days of websites, it was usually recommended to use san serif fonts, but screen resolution has improved dramatically over the years such that it is safe to use san serif or serif options, allowing design choice and readability to dictate. 

For more information on the readability of font selection read this article How Typography Determines Readability: Serif vs. Sans Serif, and How To Combine Fonts, by Harshita Arora.

Web Safe Fonts

There are many popular fonts available for use on a website, but important consideration often overlooked is the reality that your website can be displayed on many types and brands of devices each using different operating systems and browsers and other variables.  For this reason, for websites, it is recommended using “Web Safe Fonts” for your design.

This article Make Sure Your Using Web Safe Fonts by Jennifer Kyrnin provides a list of fonts that meet this criteria.

Reviewing various articles we’ve concluded these five web safe fonts are safe for both websites and mobile devices:

  • Arial
  • Georgia
  • Open Sans
  • Times Roman
  • Verdana

Web Safe San Serif Fonts

Open Sans Font

Normal

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Italic Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Shadow

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Blurred Shadow

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Arial Font

Normal

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Italic Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Shadow

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Blurred Shadow

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Verdana Font

Normal

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Italic Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Shadow

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Blurred Shadow

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Web Safe Serif Fonts

Georgia Font

Normal

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Italic Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Shadow 

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Blurred Shadow 

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Times New Roman Font

Normal

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Italic Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Shadow 

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?

Blurred Shadow 

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?