Advanced Search

Creative CSS font stacks optimized for titles and body text

/ Published in: Other
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*
  2. This is a CSS typography sheet based on the font family stacks
  3. given by Nathan Ford at Unit Interactive. You can find the original post here:
  4. http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
  5.  
  6. This file was compiled by Command Line Idiot
  7. http://commandlineidiot.com
  8. June 28, 2008
  9. */
  10. .arial{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;}
  11. p.baskerville{font-family:Baskerville,"Times New Roman",Times,serif;}
  12. .title.baskerville{font-family:Baskerville,Times,"Times New Roman",serif;}
  13. .cambria{font-family:Cambria,Georgia,Times,"Times New Roman",serif;}
  14. .century{font-family:"Century Gothic","Apple Gothic",sans-serif;}
  15. .consolas{font-family:Consolas,"Lucida Console",Monaco,monospace;}
  16. .copperplate{font-family:"Copperplate Light","Copperplate Gothic Light",serif;}
  17. .courier{font-family:"Courier New",Courier,monospace;}
  18. .franklin{font-family:"Franklin Gothic Medium","Arial Narrow Bold",Arial,sans-serif;}
  19. .futura{font-family:Futura,"Century Gothic",AppleGothic,sans-serif;}
  20. p.garamond{font-family:Garamond,"Hoefler Text","Times New Roman",Times,serif;}
  21. .title.garamond{font-family:Garamond,"Hoefler Text",Palatino,"Palatino Linotype",serif;}
  22. p.geneva{font-family:Geneva,"Lucida Sans","Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;}
  23. .title.geneva{font-family:Geneva,Verdana,"Lucida Sans","Lucida Grande","Lucida Sans Unicode",sans-serif;}
  24. p.georgia{font-family:Georgia,Palatino,"Palatino Linotype",Times,"Times New Roman",serif;}
  25. .title.georgia{font-family:Georgia,Times,"Times New Roman",serif;}
  26. p.georgia{font-family:GillSans,Calibri,Trebuchet,sans-serif;}
  27. .title.georgia{font-family:GillSans,Trebuchet,Calibri,sans-serif;}
  28. p.helvetica{font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;}
  29. .title.helvetica{font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;}
  30. .impact{font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;}
  31. .lucida{font-family:"Lucida Sans","Lucida Grande","Lucida Sans Unicode",sans-serif;}
  32. p.palatino{font-family:Palatino,"Palatino Linotype",Georgia,Times,"Times New Roman",serif;}
  33. .title.palatino{font-family:Palatino,"Palatino Linotype","Hoefler Text",Times,"Times New Roman",serif;}
  34. p.tahoma{font-family:Tahoma,Geneva,Verdana;}
  35. .title.tahoma{font-family:Tahoma,Verdana,Geneva;}
  36. .times{font-family:Times,"Times New Roman",Georgia,serif;}
  37. p.trebuchet{font-family:Trebuchet,"Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif;}
  38. .title.trebuchet{font-family:Trebuchet,Tahoma,Arial,sans-serif;}
  39. p.verdana{font-family:Verdana,Geneva,Tahoma,sans-serif;}
  40. .title.verdana{font-family:Verdana,Tahoma,Geneva,sans-serif;}
  41.  

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.