Web is not print. Print is not web. There are things that work, things that don’t work.

Just like picking out your color palette, typography is as equally important. It’s need to legible. Remind yourself of the guidelines below.

1. How long does it take you to read a line? Do you really want to read it?

from A List Apart

Uh…ask yourself. Do I even want to read that? Pay attention to the length of your content teasers/excerpts. Some web designers think that just copying and pasting out of a text file constitutes the total of their textual duties. You always want to pair text with imagery. But providing a good balance and companionship between the two is critical. Some students depend too much on photography, as others are in the habit of embedding novels. It’s a teacher’s worst nightmare.

2. Put in some “real” fluff and not just Lorem Ipsum.

Put in some factual text. It helps reviewers when examining your prototype. We have a clearer sense of what kind of news or information will be going into a certain module or div-of-content. I absolutely hate Lorem Ipsum text as well as phrases like “Coming soon!” or “Under Construction.” I’m always tempted to say: If I see that, you fail the assignment. Don’t push my buttons with this one, especially for your midterm.

3. Textual Hierarchy

from Slow Food (International)

Upon arriving at any site, we should know where we want to start reading. The top of the page is the first thing you see so treat this real estate cautiously yet effectively.  Every site needs a well developed hierarchy: indicators of where to start to start reading and how to proceed. Your typography can provide that. titles should be bigger than your paragraph text. Sub-navigation elements obviously should be of less important than your primary nav. Sidebar text is typically smaller than what’s in your main container. Etc. Etc. Etc. I don’t need to tell this to you…go onto any modern website and take a peek.

4. Centering Text, Good for Headlines. Not for Paragraphs.

Alignment is impossibly important in design because it is the basis for everything that is design. Without alignment you have elements that are seemingly unrelated and randomly placed. You might consider it for a headline, but in general, aligning your text to the left will make your readers much more comfortable, unless they read from right to left. Proven by survey and statistics.

5. Macro and Micro Typography

Macro typography is the overall structure of your type, how it appears in the context of your design and its aesthetic when you consider your text as a block on its own. CSS styles to control: font-size, font-weight, font-style, text-transform, color, line-height.

Micro typography is more concerned with the details of spacing, the issues that determine whether words are easy to read. Micro typography is an absolute necessity when it comes to putting together a block of text: if it isn’t legible, there’s no point in proceeding. Remember how I refer to the straight-jacket feeling? Yea…we don’t want that. CSS styles to consider and manipulate: letter-spacing and word-spacing.

6. **MOST IMPORTANT** Use Web Safe Fonts

from ampsoft

Web safe fonts are those that are nearly universally available on any computer. So that when the end user, regardless of their machine preferences, goes to the web site they get the same experience as anyone else going to the web site. This is what web standards are all about and ensuring that you are using web safe fonts throughout your website is just as important as including a DOCTYPE and HTML tag in the beginning.

Tweet