Michael Doyle | Blog » typography

Web Design – Typography

Michael Doyle — Fri, 29 May 2009 14:39:38 +0000

I've usually just relied on Verdana and eyeballing layouts when taking typography into consideration. At the moment, I'm living and breathing typography for the website I'm currently creating. It's a simple website, but I'm focusing on the rules for typography on the web, web safe fonts, spacing, leading, etc. It's one of my biggest weaknesses when designing websites so I'm researching as much as possible into it at the moment. Some interesting sites I've come across are:

Basic rules for web typography:

http://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/

Browser safe fonts:

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Fonts bundled with Mac, Windows, Adobe and Office:

http://media.24ways.org/2007/17/fontmatrix.html

Embedding custom fonts with Javascript:

http://typeface.neocracy.org/

Smashing Magazine has a great article on 50 different web typography tools:

http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/

Design – Typographic Desk Reference

Michael Doyle — Thu, 28 May 2009 13:35:15 +0000

The Typographic Desk Reference looks like a very handy reference book for designers. Some sample pages are included on the site. http://typedeskref.com/ Related posts:Web Design – Typography Design – Choosing Web Fonts Fonts – Web Safe Related posts:

CSS – Improving Typography

Michael Doyle — Fri, 15 May 2009 17:15:38 +0000

AisleOne have a great article on how to improve typography on the web using a simple few steps. http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/ Related posts:Web Design – Typography Design – Web Page Headers Web Testing – Fixing Layout Problems in IE Related posts:

Fonts – Web Safe

Michael Doyle — Thu, 30 Apr 2009 23:20:43 +0000

Here is a list of web safe fonts that are commonly packaged with all platforms.

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

This list was found here