Choosing Web Type
- Legibility: Being able to distinguish the shape of each letter
- Pixel grid is one of the reasons why you see just few italics on the web
Resources
A whole encyclopedia, you can sort your type faces by designer, historical period, style and get a sense of a lot of information
examples of logos based on typography
He is a designer who blogs and provide good tips
Good Examples
- http://www.vintagehope.co.uk/
- https://www.bxswiss.com/ : Uses helvetica to convey neutrality and modernism
- http://www.useallfive.com/about/ sen serif to convey modernity with transperency to convey mistery
- https://www.hioscar.com/ use font tiempos to convey human but savvy
Trick & Suggestions
- Drop a marker character after 45 characters and drop another one after 75 or 90 and as long as your line breaks between these two markers, you know that is a good length for your paragraph
- Narrow column, less leading
- Wide column, more leading
- Reverse type: increase the leading and decrease the weight
- Ensure adequate contrast to avoid strain
- Underlining reduce legibility. There are other ways to enhance such as bolder, colors, etc (ex. Nielsen Normans Group which is the leading usibility research firm, has remove the underlings from their page as Google also did)
Hosted type
- Cloud typography: which has web fonts that look good even down to 9px italics
- Typekit: put together a great list for alternatives to come and typefaces
- MyFonts: huge library of fonts that you can host in your own server
- Google Fonts: A quick and easy way to use a lot of open source of type faces and include them in your siet with just one line of code
Cross-platform type
Type kit let us test all the browsers
2 comments
Hello ~ Awesome content ~ Thanks
Hi! I could have sworn I’ve been to this site before but after reading through some of the post I realized it’s new to me. Anyhow, I’m definitely glad I found it and I’ll be book-marking and checking back frequently!