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

Is the Font Loaded? Comparing CSS/HTML fonts to images

Comments

Web Type: Which fonts are loaded?

There is a core group of web fonts that developers have deemed as the most common (10 of them, in fact). Still, these fonts are not always loaded on various machines, and sometimes, you just need to know. I made this list to help me make solid font cascades, so, maybe this will help people out there as well.

Below are these common fonts in HTML and PNG form... use this guide to determine whether your browser is displaying the typeface that you are specifying.

Note: Due to the way browser’s native anti-aliasing usually makes type look bold, I used the “Strong” anti-alias type setting when making these PNGs in Photoshop. All typefaces are displayed at 24px.

Quick Lists: These rules are general and not guaranteed

Loaded in MacOSX: Andale Mono, Arial, Arial Narrow, Apple Gothic, Baskerville, Comic Sans MS, Courier, Courier New, Helvetica, Impact, Georgia, Geneva, Lucida Grande, Monaco, Tahoma, Times, Times New Roman, Trebuchet MS, Verdana

Loaded in XP Pro: Arial, Comic Sans MS, Courier New, Helvetica, Impact, Georgia, Lucida Console, Lucida Sans, Lucida Sans Unicode, Microsoft Sans, Palatino Linotype, Times New Roman, Trebuchet MS, Sylfaen, Verdana

Loaded in Vista: Arial, Baskerville, Comic Sans MS, Courier, Courier New, Helvetica, Impact, Georgia, Lucida Console, Lucida Sans, Lucida Sans Unicode, Palatino Linotype, Tahoma, Times New Roman, Trebuchet MS, Sylfaen, Verdana

OSX: Yes – iPhone 3G: NoXP Pro: NoVista: NoAndale Mono

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: Yes – XP Pro: Yes – Vista: YesArial

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: NoXP Pro: NoVista: NoArial Narrow

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: Yes XP Pro: NoVista: NoApple Gothic

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: NoXP Pro: No – Vista: YesBaskerville

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: No – XP Pro: Yes – Vista: YesComic Sans MS

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: NoXP Pro: No – Vista: YesCourier

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: Yes – XP Pro: Yes – Vista: YesCourier New

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: Yes – XP Pro: Yes – Vista: YesHelvetica

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: No – XP Pro: Yes – Vista: YesImpact

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: Yes – XP Pro: Yes – Vista: YesGeorgia

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: NoXP Pro: NoVista: NoGeneva

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: NoXP Pro: NoVista: NoLucida Grande

html The quick brown fox dog jumps.

png web fonts test image

OSX: No iPhone 3G: No – – XP Pro: Yes – Vista: YesLucida Console

html The quick brown fox dog jumps.

png web fonts test image

OSX: No iPhone 3G: No – – XP Pro: Yes – Vista: YesLucida Sans

html The quick brown fox dog jumps.

png web fonts test image

OSX: No iPhone 3G: No – – XP Pro: Yes – Vista: YesLucida Sans Unicode

html The quick brown fox dog jumps.

png web fonts test image

OSX: No iPhone 3G: No – – XP Pro: Yes – Vista: NoMicrosoft Sans

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: NoXP Pro: No – Vista: NoMonaco

html The quick brown fox dog jumps.

png web fonts test image

OSX: No iPhone 3G: No – – XP Pro: Yes – Vista: YesPalatino Linotype

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: Yes – XP Pro: No – Vista: YesTahoma

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: Yes – XP Pro: NoVista: NoTimes

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: No – XP Pro: Yes – Vista: YesTimes New Roman

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: Yes> – XP Pro: Yes – Vista: YesTrebuchet MS

html The quick brown fox dog jumps.

png web fonts test image

OSX: No iPhone 3G: No – – XP Pro: Yes – Vista: YesSylfaen

html The quick brown fox dog jumps.

png web fonts test image

OSX: Yes – iPhone 3G: Yes – XP Pro: Yes – Vista: YesVerdana

html The quick brown fox dog jumps.

png web fonts test image

 


 

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