Why HCd? Testimonials & Awards Bio: J. Hogue Bio: James Re Studies in [Web] Design HCd>CMS Tutorials Found Thoughts Contact / Location

Web Type: Common web font comparisons

Comments

With the limited number of fonts that come standard with PC or Mac operating systems, the choice of fonts to use for any given web page is already pretty limited. Still, every designer will have their favorites among this limited selection. Below are some of the common fonts and examples of them as compared with other similar fonts. Before you look through these, though, you should check and see what fonts are loaded on the machine you are currently using.

Serifs: A comparison of common fonts.

Leading is browser default and P tags have been set to 5px bottom margin and no padding. Light outlines are to indicate the default leading being applied.

Quick Compare:

AaCcFfGgHhJjMmNnPpQqSsXxYyZz

AaCcFfGgHhJjMmNnPpQqSsXxYyZz

AaCcFfGgHhJjMmNnPpQqSsXxYyZz

AaCcFfGgHhJjMmNnPpQqSsXxYyZz

AaCcFfGgHhJjMmNnPpQqSsXxYyZz

AaCcFfGgHhJjMmNnPpQqSsXxYyZz

Baskerville (font-family: Baskerville, serif;)

36px The quick brown fox jumps.

24px The quick brown fox jumps over a lazy dog.

18px The quick brown fox jumps over a lazy dog.

14px The quick brown fox jumps over a lazy dog.

12px The quick brown fox jumps over a lazy dog.

10px The quick brown fox jumps over a lazy dog.

8px The quick brown fox jumps over a lazy dog.

Variants (click to open)

Hoefler (font-family: Hoefler, HoeflerText, serif;)

36px The quick brown fox jumps.

24px The quick brown fox jumps over a lazy dog.

18px The quick brown fox jumps over a lazy dog.

14px The quick brown fox jumps over a lazy dog.

12px The quick brown fox jumps over a lazy dog.

10px The quick brown fox jumps over a lazy dog.

8px The quick brown fox jumps over a lazy dog.

Variants (click to open)

Georgia (font-family: Georgia, serif;)

36px The quick brown fox jumps.

24px The quick brown fox jumps over a lazy dog.

18px The quick brown fox jumps over a lazy dog.

14px The quick brown fox jumps over a lazy dog.

12px The quick brown fox jumps over a lazy dog.

10px The quick brown fox jumps over a lazy dog.

8px The quick brown fox jumps over a lazy dog.

Variants (click to open)

Palatino (font-family: Palatino, PalatinoLinotype, serif;)

36px The quick brown fox jumps.

24px The quick brown fox jumps over a lazy dog.

18px The quick brown fox jumps over a lazy dog.

14px The quick brown fox jumps over a lazy dog.

12px The quick brown fox jumps over a lazy dog.

10px The quick brown fox jumps over a lazy dog.

8px The quick brown fox jumps over a lazy dog.

Variants (click to open)

Times (font-family: Times, serif;)

36px The quick brown fox jumps.

24px The quick brown fox jumps over a lazy dog.

18px The quick brown fox jumps over a lazy dog.

14px The quick brown fox jumps over a lazy dog.

12px The quick brown fox jumps over a lazy dog.

10px The quick brown fox jumps over a lazy dog.

8px The quick brown fox jumps over a lazy dog.

Variants (click to open)

Times New Roman (font-family: TimesNewRoman, "Times New Roman", serif;)

36px The quick brown fox jumps.

24px The quick brown fox jumps over a lazy dog.

18px The quick brown fox jumps over a lazy dog.

14px The quick brown fox jumps over a lazy dog.

12px The quick brown fox jumps over a lazy dog.

10px The quick brown fox jumps over a lazy dog.

8px The quick brown fox jumps over a lazy dog.

Variants (click to open)

Sans Serifs: A comparison of common fonts.

Leading is browser default and P tags have been set to 5px bottom margin and no padding. Light outlines are to indicate the default leading being applied.

Quick Compare:

AaCcFfGgHhJjMmNnPpQqSsXxYyZz

AaCcFfGgHhJjMmNnPpQqSsXxYyZz

AaCcFfGgHhJjMmNnPpQqSsXxYyZz

AaCcFfGgHhJjMmNnPpQqSsXxYyZz

AaCcFfGgHhJjMmNnPpQqSsXxYyZz

AaCcFfGgHhJjMmNnPpQqSsXxYyZz

AaCcFfGgHhJjMmNnPpQqSsXxYyZz

AaCcFfGgHhJjMmNnPpQqSsXxYyZz

Apple Gothic (font-family: AppleGothic, sans-serif;)

36px The quick brown fox jumps.

24px The quick brown fox jumps over a lazy dog.

18px The quick brown fox jumps over a lazy dog.

14px The quick brown fox jumps over a lazy dog.

12px The quick brown fox jumps over a lazy dog.

10px The quick brown fox jumps over a lazy dog.

8px The quick brown fox jumps over a lazy dog.

Variants (click to open)

Arial (font-family: Arial, sans-serif;)

36px The quick brown fox jumps.

24px The quick brown fox jumps over a lazy dog.

18px The quick brown fox jumps over a lazy dog.

14px The quick brown fox jumps over a lazy dog.

12px The quick brown fox jumps over a lazy dog.

10px The quick brown fox jumps over a lazy dog.

8px The quick brown fox jumps over a lazy dog.

Variants (click to open)

Geneva (font-family: Geneva, sans-serif;)

36px The quick brown fox jumps.

24px The quick brown fox jumps over a lazy dog.

18px The quick brown fox jumps over a lazy dog.

14px The quick brown fox jumps over a lazy dog.

12px The quick brown fox jumps over a lazy dog.

10px The quick brown fox jumps over a lazy dog.

8px The quick brown fox jumps over a lazy dog.

Variants (click to open)

Helvetica (font-family: Helvetica, sans-serif;)

36px The quick brown fox jumps.

24px The quick brown fox jumps over a lazy dog.

18px The quick brown fox jumps over a lazy dog.

14px The quick brown fox jumps over a lazy dog.

12px The quick brown fox jumps over a lazy dog.

10px The quick brown fox jumps over a lazy dog.

8px The quick brown fox jumps over a lazy dog.

Variants (click to open)

Lucida Grande (font-family: LucidaGrande, LucidaUnicode, LucidaSans, sans-serif;)

36px The quick brown fox jumps.

24px The quick brown fox jumps over a lazy dog.

18px The quick brown fox jumps over a lazy dog.

14px The quick brown fox jumps over a lazy dog.

12px The quick brown fox jumps over a lazy dog.

10px The quick brown fox jumps over a lazy dog.

8px The quick brown fox jumps over a lazy dog.

Variants (click to open)

Tahoma (font-family: Tahoma, sans-serif;)

36px The quick brown fox jumps.

24px The quick brown fox jumps over a lazy dog.

18px The quick brown fox jumps over a lazy dog.

14px The quick brown fox jumps over a lazy dog.

12px The quick brown fox jumps over a lazy dog.

10px The quick brown fox jumps over a lazy dog.

8px The quick brown fox jumps over a lazy dog.

Variants (click to open)

Trebuchet (font-family: Trubuchet, TrebuchetMS, 'Trebuchet MS', sans-serif;)

36px The quick brown fox jumps.

24px The quick brown fox jumps over a lazy dog.

18px The quick brown fox jumps over a lazy dog.

14px The quick brown fox jumps over a lazy dog.

12px The quick brown fox jumps over a lazy dog.

10px The quick brown fox jumps over a lazy dog.

8px The quick brown fox jumps over a lazy dog.

Variants (click to open)

Verdana (font-family: Verdana, sans-serif;)

36px The quick brown fox jumps.

24px The quick brown fox jumps over a lazy dog.

18px The quick brown fox jumps over a lazy dog.

14px The quick brown fox jumps over a lazy dog.

12px The quick brown fox jumps over a lazy dog.

10px The quick brown fox jumps over a lazy dog.

8px The quick brown fox jumps over a lazy dog.

Variants (click to open)

Mono-space: A comparison of common fonts.

Leading is browser default and P tags have been set to 5px bottom margin and no padding. Light outlines are to indicate the default leading being applied.

Quick Compare:

AaCcFfGgHhJjMmNnPpQqSsXxYyZz

AaCcFfGgHhJjMmNnPpQqSsXxYyZz

AaCcFfGgHhJjMmNnPpQqSsXxYyZz

Andale Mono (font-family: 'Andale Mono', AndaleMono, monospace;)

36px The quick brown fox.

24px The quick brown fox jumps over a lazy dog.

18px The quick brown fox jumps over a lazy dog.

14px The quick brown fox jumps over a lazy dog.

12px The quick brown fox jumps over a lazy dog.

10px The quick brown fox jumps over a lazy dog.

8px The quick brown fox jumps over a lazy dog.

Variants (click to open)

Courier (font-family: Courier, sans-serif;)

36px The quick brown fox.

24px The quick brown fox jumps over a lazy dog.

18px The quick brown fox jumps over a lazy dog.

14px The quick brown fox jumps over a lazy dog.

12px The quick brown fox jumps over a lazy dog.

10px The quick brown fox jumps over a lazy dog.

8px The quick brown fox jumps over a lazy dog.

Variants (click to open)

Monaco (font-family: Monaco, sans-serif;)

36px The quick brown fox.

24px The quick brown fox jumps over a lazy dog.

18px The quick brown fox jumps over a lazy dog.

14px The quick brown fox jumps over a lazy dog.

12px The quick brown fox jumps over a lazy dog.

10px The quick brown fox jumps over a lazy dog.

8px The quick brown fox jumps over a lazy dog.

Variants (click to open)

 


 

Blog comments powered by Disqus Notice: Undefined property: StaticPage::$id in /htdocs/content/layouts/studio.php on line 130