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 Sans, Avant Garde, Arial, Tahoma, Amasis, and Geneva. San Serif font style is considered as presenting a more modern or contemporary tone.
Popular Serif fonts include Times Roman, Courier, New 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
~ ! @ # $ % ^ & * ( ) – _ + = [ ] { } | : ; . , < > ?