Readability & Typography

Legibility
http://www.historianofthefuture.com/
What impression do you get from this site's typography? Is the impression it tries to create more important than the content it conveys? The font and color choices are intended to catch attention but how readable are they? Can you read the content?

Readability Guidelines

Line Length and font choice
http://www.quilt.com/
Excessively long lines (when the browser window is at full width) are not ideal for relaxed reading. What do you think?

http://www.ancientioniccrystal.com/product_info.html
These short columns of type are not easy to read particularly against the dark background. What do you think?

http://www.fonts.com/
Is this a better line length and font for readability?

Background
http://members.tripod.com/fuzzymartian/short/colorwlk.html
Does this background interfere with the readability of the type? Did the page designer select a good font for readability?

http://incenseguru.com/contact_us.html
What about the black background and type color/boldness on this page?

http://www.wpdfd.com/wpdtypo.htm
Good font choice (sans serif) on a white background, left alignment, appropriate line length and extra leading help make this site easy to read.

Alignment
http://www.heartscontentms.com/index.htm
How readable is the alignment of this type?! Check out the narrow columns of type on the Rooms page!

http://www.brynroseinn.com/
How readable is the justified alignment used for the type at this site? Notice the big gaps between words (rivers!)

http://www.incensegalore.com/
Are these center aligned paragraphs hard to read?

Capitals vs. Lowercase
http://www.akilimuseum.com/
Notice the use of capitals in the boxes on this site. They have increased the spacing between lines of type to make them more readable. Do you think it's successful?

http://www.maxtronmedia.com/
How about the use of capitals at this site? How readable is the text?

How do these sites rate for readability?
http://www.bohemiancoding.com/about/
Good line length and spacing

http://www.bdadvisory.eu/en/
Very readable. Which readability rules does this site follow?

http://www.johntitor.com/
Are there readability problems at this site?!! Try to make a note of all the ways in which this site breaks the readability rules.

Web Typography Tips

Screen typeface Choice
http://www.state.tn.us/environment/tn_consv/archive/duckriver.htm
Was a good screen font selected in this case? Look at the Page Source Code to see which default font they designated. Is serif or sans serif type better for onscreen reading?

Colored Type
http://www.cat-domain.com/cats_history/cat_history.htm
Colored type is hard to read particularly on a black background...

Use real quotation marks (and apostrophes)
http://www.nobledesktop.com/propertype.html

Create type as a graphic
http://www.jiong.com/html/foot.html
A different font can really spice up a page and create a strong mood or atmosphere. Use a different font for headings, subheadings or buttons.

Dynamic Typographic Design

Type Contrast
http://www.suemonkkidd.com/default.asp
Dynamic contrast in size and font in the site logo.

http://www.squarefour.net/
There are simple contrasts at this site but the effect is very clean.

http://www.albenfaris.com/publications/pub_index.shtml
Contrast in value and color. Does this help the message? Is it visually appealing?

http://www.hd-live.co.uk/
Contrast in type is fairly subtle. Notice the use of type contrast in the company logo. Is it appropriate for this design situation?

http://squaredeye.com/
Make contrasts strong! Don't be a wimp.

http://www.ucsc.edu/campus/index.html
Contrast in color enhances the meaning of the information and lets us identify headings and text immediately.

http://www.solidgiant.com/
Great example of contrast in type, color and size.

http://www.kitchensbykrengel.com/default.html
Very clean typography. Notice the use of capitals/small capitals and the contrasts between serif, sans serif and italic types. This site has a sophisticated air.

Avant Garde Type Design (when type becomes art)
http://www.drinkarizona.com/
What impression do you get from this site's typography? The site communicates a strong sense of graffitti.

Typography Links

Articles about Typography at Fonts.com
http://www.fonts.com/AboutFonts/Articles/Typography/

Presentation on web typography:
http://www.badassideas.com/typepreso/typography_samanthawarren.pdf

http://www.webstyleguide.com/type/index.html
A bit verbose but worth a bookmark

http://www.smashingmagazine.com/2008/05/12/sexy-bold-and-experimental-typography/
Interesting article that showcases "Sexy, Bold And Experimental" typography.

http://www.webreference.com/graphics/column51/
Article about techniques for working with content and type.

http://websitetips.com/fonts/foundries/
Foundries and Fonts on the Web

http://www.wpdfd.com/wpdtypo.htm
Article about typography on the web.

http://www.alistapart.com/articles/readingdesign
Tips on how to design content so people can read it.

http://www.htmlhelp.com/reference/css/
Guide to Cascading Style Sheets

http://csszengarden.com
Fabulous site demonstrating Cascading Style Sheet techniques