Web Safe Font Types

Just what exactly are Web Safe Font Types? Web browsers will only display fonts that are installed on a user’s computer. Although a fancy or exotic font can be used, most your visitors will not see what you invisioned. Instead of that fancy font, an alternative font will be displayed. Web Safe Font Types are those fonts that are installed on the majority of computers, whether they be Windows or Mac operating systems.

Below is a list of 13 Web Safe Font Types that are installed on over 90% of computers.

Serif:

Georgia

Palatino Linotype

Times New Roman

Sans-serif:

Arial

Arial Black

Impact

Lucida Sans Unicode

Tahoma

Trebuchet MS

Verdana

Cursive:

Comic Sans MS

Mono-space:

Courier New

Lucida Console


Displayed below is a sample of each font for easy comparison. Each includes a heading (font-size: 22px, font-weight: bold), some body copy with bold and italics (font-size: 13px, line-height: 1.5), and the CSS font-family property for that font.

Although considered web-safe, some don’t display clearly at particular sizes and some don’t show bold at smaller sizes, so adjustments maybe needed. You will notice that although all the samples below use the same specs shown above, they all display differently in regards to how much space is used, and the clarity. For obvious reason, you should choose a font type that is legible.

Text sample in Georgia
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789

font-family: Georgia, serif;

Text sample in Palatino Linotype
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789

font-family: “Palatino Linotype”, “Book Antiqua”, Palatino, serif;

Text sample in Times New Roman
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789

font-family: “Times New Roman”, Times, serif;

Text sample in Arial
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789

font-family: Arial, Helvetica, sans-serif;

Text sample in Arial Black
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789

font-family: “Arial Black”, Gadget, sans-serif;

Text sample in Impact
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789

font-family: Impact, Charcoal, sans-serif;

Text sample in Lucida Sans Unicode
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789

font-family: “Lucida Sans Unicode”, “Lucida Grande”, sans-serif;

Text sample in Tahoma
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789

font-family: Tahoma, Geneva, sans-serif;

Text sample in Trebuchet MS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789

font-family: “Trebuchet MS”, Helvetica, sans-serif;

Text sample in Verdana
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789

font-family: Verdana, Geneva, sans-serif;

Text sample in Comic Sans MS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789

font-family: “Comic Sans MS”, cursive;

Text sample in Courier New
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789

font-family: “Courier New”, Courier, monospace;

Text sample in Lucida Console
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet arcu et nisl aliquet ornare aliquet sit amet felis. Fusce eu lacus diam, at facilisis arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia. 0123456789

font-family: “Lucida Console”, Monaco, monospace;