Tuesday, October 28, 2008

Thursday, October 23, 2008

Fonts - Mac, PC, Ubuntu (linux)

Web designers often feel that they are restricted to a basic set of core web fonts. This small set of fonts has been widely distributed and most designers stick to them, just to be on the safe side. However, when you look at the fonts available on the three most widely used operating systems, you can see that this really isn't necessary.

All three operaing systems come with a variety of fonts, many

of which can be reasonably substituted for each other without affecting the design.You can also choose fonts that have the same look and feel that you want, but may not be exact matches. This allows for much more flexibility in design while still ensuring compatibility across operating systems.

Stacking fonts in your CSS allows you to cover all your bases by specifying back-up fonts for users who don't have your preferred typeface. For example, the font stack for this site is:

font-family: "Lucida Grande","Lucida Sans Unicode","Eras Medium ITC","DejaVu Sans",Helvetica,Verdana,sans-serif


For more on creating great font stacks, read Better CSS Font Stacks from Unit Interactive.

About these tables


  • Ubuntu is used as a sample Gnu/Linux operating system.
    Other distributions may have different fonts installed. If you can
    provide a list of pre-installed fonts on other distros
    please send it to me and I will incorporate it into this article.


  • Fonts listed in the same row are near equivalents of each
    other, with the exception of the last row in each table which is used
    for other/non matching fonts. The "matching" fonts may not match exactly but in practical use can be subsituted for each other without
    problems


  • All font samples were taken from a sample page in Firefox at .9em (Linux, Mac, Windows). Keep relative sizing in mind when choosing a list of fonts to specify (i.e. you don't want big sizing variations depending on which font the user has installed).


  • The "Installed with MS Programs" column lists typefaces incuded with common Microsoft applications. You can probably expect that most Windows users have some of these applications installed, and some Mac users may have Office installed as well. Non-starred entires are installed with all versions of Office 2003/2007 and many other programs. Starred (*) entries are installed primarily with Office Professional Plus 2007 but some also come with with Office 2003 Professional Edition, Publisher, and other programs. Entries with a - next to them are installed with Office 2003 and other older programs (that are still quite pervasive at this point). Details are available in the Microsoft Typography Database.


  • In the Mac OSX column, entries with a + are included with OSX 10.5 (Leopard), entries with a - are included with versions prior to 10.4 (but not in 10.4)

  • Starred entries in the Ubuntu column are installed by the mscorefonts package. According to a survey on the Ubuntu Forums, approximately 74% of Ubuntu users have mscorefonts installed.




Serif





































































Windows Installed with MS Programs Mac OS 10.4 Ubuntu (Linux)

Baskerville Old Face Baskerville MgOpen Canonica

*Bookman Old Style Hoefler Text URW Bookman L
Georgia
Georgia *Georgia

*Century Schoolbook
Century Schoolbook L


-New York


  • Bitstream Vera Serif

  • DejaVu Serif


Palatino Linotype
-Palatino URW Palladio L
Times New Roman



  • Times

  • Times New Roman




  • FreeSerif

  • Nimbus Roman No9 L

  • *Times New Roman





  • *Cambria

  • *Constantia





  • *Bell MT

  • Book Antiqua

  • *Bodoni MT


  • *Californian FB

  • *Calisto MT

  • *Centaur

  • *Century

  • *Elephant

  • *Footlight MT Light


  • Garamond

  • *Gloucester MT Extra Condensed

  • *Goudy Old Style

  • *High Tower Text

  • *Lucida Bright

  • *Lucida Fax


  • *Modern No. 20

  • *Poor Richard

  • *Rockwell






  • BigCaslon

  • Cochin

  • Didot




  • Bitstream Charter

  • Gentium


  • GentiumAlt

  • TSCu_Times





  • *Cambria and Constantia are part of the Windows Vista font
    pack and are included with Windows Vista and as an upgrade to
    Office 2003. These are cleartype
    fonts
    which means that they render differently than traditional fonts
    (anti-aliasing is used to make them appear smoother). On Windows they
    tend to look bad on non-Microsoft web browsers when cleartype is not
    enabled in the desktop preferences. Cleartype is not enabled by
    default on Windows XP but it is included as an option when installing IE 7.


  • Palatino and New York are not installed by default on OS 10.4 but are installed on previous versions




Sans Serif


























































































Windows Installed with MS Programs Mac OS 10.4 Ubuntu (Linux)
Arial
Arial

  • *Arial

  • FreeSans

  • Nimbus Sans L


Arial Black

*Arial Black


Century Gothic URW Gothic L


Helvetica MgOpen Moderna
Lucida Sans Unicode
Lucida Grande


Optima MgOpen Cosmetica
Tahoma

  • Geneva

  • +Tahoma




Trebuchet MS
Trebuchet MS *Trebuchet MS
Verdana
Verdana

  • Bitstream Vera Sans

  • DejaVu Sans

  • *Verdana





  • *Calibri

  • *Candara

  • *Corbel


  • Franklin Gothic Medium

  • Microsoft Sans Serif




  • *Agency FB

  • Arial Narrow


  • *Arial Rounded MT Bold

  • Arial Unicode MS

  • *Berlin Sans FB

  • *Eras Medium ITC

  • *Gill Sans MT

  • *Lucida Sans


  • *Maiandra GD

  • *Tw Cen MT





  • AppleGothic


  • Futura

  • Helvetica Neuve

  • +Microsoft Sans Serif

  • Monaco


MgOpen Modata


Notes:

  • DejaVu is a modification of Bitstream Vera Sans, with additional unicode characters



Script/Handwriting




















































Windows Installed with MS Programs Mac OS 10.4 Ubuntu (Linux)

*Brush Script MT Italic Brush Script

Monotype Corsiva Apple Chancery URW Chancery L
Comic Sans MS
Comic Sans MS

  • TSCu_Comic


  • *Comic Sans MS



*Papyrus


  • Papyrus

  • +Papyrus Condensed







  • *Blackadder ITC

  • *Bradley Hand ITC

  • *Edwardian Script ITC

  • *Freestyle Script

  • *French Script MT


  • *Forte

  • *Kristen

  • *Kunstler Script

  • *Lucida Calligraphy

  • *Lucida Handwriting

  • *Palace Script MT


  • *Pristina

  • *Rage Italic

  • *Script MT Bold

  • *Viner Hand

  • *Vivaldi Italic

  • *Vladimir Script





  • Chalkboard

  • MarkerFelt

  • Zapfino




Notes:

  • One way to counter the problem with script fonts in Windows
    (namely, that only Comic Sans is installed by default), would be to
    specify a nice serif as your last option (Georgia, for example) and
    make it italic. Script fonts usually don't have italic variants, so
    people with nice script fonts installed will see the font you intended
    while others will see italic Georgia which isn't quite the same but
    would still look nice. This technique would also work for decorative
    fonts or other categories where no suitable alternative is available on
    some operating systems.



Monospace





































Windows Installed with MS Programs Mac OS 10.4 Ubuntu (Linux)
Courier New


  • Courier


  • Courier New




  • Courier 10 Pitch

  • *Courier New

  • FreeMono


  • Nimbus Mono L

  • TlwgMono

  • Tlwg Typewriter


Lucida Console
Monaco
*Consolas

  • *Lucida Sans Typewriter

  • *OCR A Extended



+Andale Mono

  • *Andale Mono

  • Bitstream Vera Sans Mono

  • Deja Vu Sans Mono






Decorative























Windows Installed with MS Programs Mac OS 10.4 Ubuntu (Linux)
Impact

  • *Algerian

  • *Bauhaus 93

  • *Bernard MT Condensed

  • *Britannic Bold


  • *Broadway

  • *Castellar

  • *Chiller

  • *Colonna MT

  • *Cooper Black

  • *Copperplate Gothic Light


  • *Curlz MT

  • *Engravers MT

  • *Felix Titling

  • *Gigi

  • *Goudy Stout

  • *Haettenschweiler


  • *Harlow Solid Italic

  • *Harrington

  • *Imprint MT Shadow

  • *Informal Roman

  • *Jokerman

  • *Juice ITC


  • *Magneto Bold

  • *Matura MT Script Capitals

  • *Mistral

  • *Niagara Engraved

  • *Niagara Solid

  • *Old English Text MT


  • -Onyx

  • *Perpetua Titling MT Light

  • *Playbill

  • *Ravie

  • -Showcard Gothic

  • -Snap ITC


  • *Stencil

  • *Wide Latin




  • American Typewriter


  • Copperplate

  • Herculanum


*Impact

Symbol/Dingbat



(link to full character set where available)


Of course, it is probably not a good idea to use these fonts in web pages! However, they are listed here just to keep this resource complete.























Windows Installed with MS Programs Mac OS 10.4 Ubuntu (Linux)








  • Dingbats

  • Open Symbol


  • Standard Symbols L

  • *Webdings





Foreign Language



This list is by no means complete and is based on what I was
able to find out online about various typefaces. If you have more information that
could help to complete this list please contact me.



Notes:



  • In the OSX column, fonts marked with ** are part of the Additional Fonts package (installed by default)


  • In Ubuntu, many of these fonts will look the same as Deja Vu/Bitstream Vera Sans when typing latin characters. You do not have 10 versions of the same font under different names – these are foreign language variations. Foreign language support must be enabled in some cases to see the characters (I think ???).


























































































Windows Installed with MS Programs Mac OS 10.4 Ubuntu (Linux)
Multi-language support (Unicode)

Arial Unicode (installed with Office):



  • Arabic script (Arabic, Balochi, Persian, Shahmukhi, Urdu)

  • Armenian

  • Cyrillic (all or most of range)


  • Devanagari

  • Georgian (Mkhedruli and Asomtavruli)

  • Greek (including polytonic and Coptic characters)

  • Gurmukhi

  • Hebrew

  • IPA


  • Japanese (Hiragana, Katakana, Kanji/Han Ideographs)

  • Kannada

  • Korean (Hangul only)

  • Latin

  • Tamil

  • Thai


  • Vietnamese



Last Resort (fallback font, contains all unicode characters)

DejaVu (Unicode):




  • Arbic

  • Armenian

  • Cryllic

  • Greek

  • Hebrew


  • Lao

  • Plus other unicode characters (see Wikipedia)


Gentium (Unicode):



  • Greek


  • Cryllic (under development)


GentiumAlt is designed to improve the appearance of letters with multiple diacritics.



Free Serif (Unicode):



  • Bengali

  • Cyrillic


  • Greek

  • Devanagari

  • Ethiopic

  • Gurmukhi

  • Hebrew

  • Hiragana


  • Katakana

  • Malayalam

  • Tamil

  • Telugu

  • Thaana

  • Thai



FreeSans and FreeMono include fewer glyphs than Free Serif but do have some multi-language support.


Aboriginal

Unified Canadian Aboriginal Syllabics:



  • EuphemiaCASBold**

  • EuphemiaCASItalic**

  • EuphemiaCASRegular**



Cherokee:



  • PlantagenetCherokee**



Arabic

  • Estrangelo Edessa





  • Geeza Pro Bold

  • Geeza Pro

  • AlBayan**

  • AlBayanBold **

  • Baghdad**


  • DecoTypeNaskh**

  • KufiStandarGK**

  • Nadeem**





  • TAMu_Kadambri

  • TAMu_Kalyani

  • TAMu_Maduram


Simplified Chinese


  • Hei ST

  • Heiti Light

  • STHeiti Regular


  • STFangsong **

  • STKaiti**

  • STSong**



Traditional Chinese


  • Apple LiGothic Medium

  • LiHei Pro


  • Apple LiSung Light **

  • BiauKai**

  • LiSong Pro**



Hebrew


  • ArialHB**

  • ArialHBBold **


  • Corsiva**

  • CorsivaBold**

  • NewPeninimMT**

  • Raanana**

  • RaananaBold**




Indic

  • Gautami (Telugu)


  • Latha (Tamil)

  • Mangal (?) ( Devanagari)

  • Raavi (Devanagari, Gurmukhi)

  • Shruti (?) (Gujarati)

  • Tunga (Kannada)





  • DevanagariMT**

  • DevanagariMTBold**

  • GujaratiMT**

  • GujaratiMTBold**


  • Gurmukhi**

  • InaiMathi**(Tamil)




  • aakar (Gujarati)


  • Ani (Bengali)

  • Chandas (Devanagari)

  • Gargi 1.7 (Devanagari)

  • Jamrul (Bengali)

  • Kalimati (Hindi/Devanagari)

  • Kedage (Kannada)


  • Likhan (Bengali)

  • Lohit Bengali

  • Lohit Gujarati

  • Lohit Hindi

  • Lohit Punjabi

  • Lohit Tamil


  • Malayalam

  • Mallig (Kannada)

  • Mitra Mono (Bengali)

  • Mukti Narrow (Bengali)

  • oriUni (also called Oriya; Oriya, Khondi,
    Santali)

  • padmaa (Gujarati)


  • Pothana 2000

  • Rekha (Gujarati)

  • Saab (Gujarati)

  • Samanata (Hindi/Devanagari)

  • Vemana2000 (Telugu)



Japanese

  • *Meiryo





  • AquaKanaBold

  • AquaKanaRegular

  • Hiragino Kaku Gothic Pro W3


  • Hiragino Kaku Gothic Pro W6

  • Hiragino Kaku Gothic Std W8

  • Hiragino Maru Gothic Pro W4

  • Hiragino Mincho Pro W3

  • Hiragino Mincho Pro W6

  • Osaka


  • OsakaMono




  • Kochi Gothic

  • Kochi Mincho



Korean



  • AppleGothic

  • #Gungseouche**

  • #HeadlineA**

  • #PCmyoungjo**

  • #Pilgiche**

  • AppleMyungjo**





  • Baekmuk Batang

  • Baekmuk Dotum

  • Baekmuk Gulim


  • Baekmuk Headline


Thai


  • Ayuthaya**

  • Krungthep**

  • Sathu**

  • Silom**

  • Thonburi**





  • Garuda

  • Loma

  • Norasi


  • Purisa


Miscellaneous

Western language variants:




  • WST_Czech

  • WST_Engl

  • WST_Fren

  • WST_Germ

  • WST_Ital


  • WST_Span

  • WST_Swed


Cryllic:



  • Sylfaen (Armenian, Cyrillic, Georgian, Greek, Latin)



Thaana:



  • MV Boli




Cyrillic:




  • CharcoalCY

  • GenevaCY

  • HelveticaCY



Armenian:




  • MshtakanBold

  • MshtakanBoldOblique

  • MshtakanOblique

  • MshtakanRegular

  • NISC18030




Lao:



  • Phetsarath OT




References:


How-to's

  • Better CSS Font Stacks - explains how to create a font stack and recommends some attractive stacks for both paragraphs and headings.