Typography

If you follow these rules your web typography won’t suck. It will most likely be pretty good.

The simplicity of the rules is that they are generally easy to write and understand. Following them can be more difficult.

1. Know your audience

You need to know who is going to read the content of the site and why they are going to read it. Some examples of questions you might ask and answer:

  • Why will the target audience come to the site? What do they need/want to read/learn/experience on the site?
  • Are they tech savvy with the latest browsers or  behind the times?
  • How old are they?
  • Will then need to print the text?
  • Will they find the sire through search engines?

2. Know your content

Read the content if you didn’t create it and get an idea of what it’s saying and what is more or less important. Samantha Warren’s presentation on a site redesign shows this attention to the actual content and also shows may of the other principles mentioned in these rules: (pdf file) http://www.badassideas.com/typepreso/typography_samanthawarren.pdf (short article about it) http://badassideas.com/typography-is-the-foundation-of-web-design/

3. Make Sure the Text is Readable

After you know what content you have an who’s reading it the first rule of setting the type is to make it readable, also known by the technical term: legible. There are four main considerations to making something readable:

  • Contrast (the color of the text should contrast with the background color or image)
  • Size (the text must be big enough to read, minimum 10px for body text, 12-16px is better)
  • Measure (line length, if your line is too long or too short it’s hard to read. 50-70 characters per line is a good rule of thumb)
  • Alignment (left aligned is easiest to read. Start there and only add justified, right or center alignment for emphasis or visual style. Easy on the center alignment)

4. Establish a Typographic Hierarchy

Your content is made up of different parts, titles, text, quotes, asides, sub titles, locations etc. Each of these parts should be given a typographic treatment so that the reader can quickly see a) what’s more and less important, b) what is what (each part is distinct)

Some tools you have to make the hierarchy:

  • Size (bigger = more important)
  • Color (often for emphasis)
  • Weight (bold = more important, use sparingly)
  • Style (things like italics and ALL CAPS add emphasis, use sparingly)
  • Distance (similar items grouped, different with space in between)
  • Repetition (the same part (eg title, body text) should look the same throughout)

Again Samantha Warren with a good article: http://badassideas.com/typographic-hierarchy/

This tool lets you set a bunch of properties visually using sliders and things and then you can get the CSS to paste into your project. There are three columns so you can compare options. Make sure you set the base font-size to the one you are going to use first. You set the base font near the top-right of the screenhttp://www.typetester.org/Modify text with sliders, get the CSS to make it happen in the next window. Simpler to use but less to modify than Typetester, for example there is only one option and you can’t set the base font-size for the text.http://csstypeset.com

A good test to see if your heirarchy is in place is to see how scannable your page is. Can you very quickly glance at the page and see the various sections, paragraphs, asides etc.?

5. Start from Scratch (reset stylesheet)

Using a reset stylesheet does a couple of things. It removes all of the default spacing (margins, padding). This in turn forces you to make decisions about what kind of spacing you actually want to have around your elements. Just going through this process of thinking about and implementing your spacing will help make you better. Also if you don’t use this then the browser often decides and they don’t all have the same ideas about how much spacing things get.

Here’s an article on whitespace by Mark Boulton: http://www.alistapart.com/articles/whitespace

6. Punctuation and Special Characters

The text editors we use (Even Dreamweaver is a glorified text editor) to create HTML are not so good at adding in the proper punctuation like opening and closing quotes, em dashes or math symbols. To remedy this problem use HTML Entities. HTML Entities are special HTML codes that when the browser sees turns into the proper symbol. For example the opening (left) quote is “ All HTML Entities start with an ampersand (&) and end with a semi colon (;). This page has the most common ones you will need:

http://www.teachingmultimedia.com/mmp240/thisisnotthat.html

More on em and en dashes and entities: http://www.alistapart.com/articles/emen/

7. Choose your fonts carefully

When choosing the fonts for a page think both about choosing fonts that are readable and ones they help express the mood or theme o the design and the content. One rule of thumb: sans serif fonts for the body text. You can use more detailed fonts for the bigger headings.

  • Limit number of fonts (like maybe one or two to start. Add more if you know what you’re doing and the design calls for it)
  • Pick fonts that fit the tone of the content and overall design

When choosing a font-family add at least two fonts and also a generic font (serif, sans-seif, monospace…). It’s best if you have the following, in order, in your list

  • The font you want
  • A secondary font that’s OK that Windows should have
  • A secondary font that’s OK that OSX should have (if it won’t have the Windows font).
  • the generic font type (serif, sans-serif, monospace etc.)

You should have a basic font-family for you paragraph text and one for your title text. Below is one way to do that. You set your baseline paragraph text by setting the font-family of your body element and then you set the font-family for all of the heading elements for the title font.

/*for the paragraphs */
body{
    font-family:"Franklin Gothic Medium", Arial, sans-serif;
} 

/* for the titles */
h1, h2, h3, h4, h5, h6{
  font-family:Rockwell, "Courier New", Courier, Times, "Times New Roman", serif;
}

Tim Brown has an interesting talk on typography and its history: http://vimeo.com/17079380

8. Links should clearly be links (different in some way from the rest of the text).

Many people do this with color but if you want to do it with an underline then DON’T use the underline (text-decoration:underline). Instead use a bottom border. Here is some simple CSS that lets you do this (If you want to add or remove border or change color on the hover then add a separate style for the a:hover{} selector).


a, a:visited, a:hover{
	text-decoration:none;
	border-bottom:1px solid #990000;
	color:#990000;
}

Resources

These rules were created with the help of following wonderful articles and presentations:

Vasily Vasinov
This article is an excellent in-depth article on typography. He somehow manages to cover most of the major ideas in typography. If you want to be a designer of any kind, but especially a web designer then you must read it.
http://www.techmic.com/magazine/issue-1/typography-is-important

Samantha Warren
http://badassideas.com/typographic-hierarchy/
http://badassideas.com/typography-is-the-foundation-of-web-design/
http://www.slideshare.net/SamanthaWarren/sxsw-2010
http://www.badassideas.com/typepreso/typography_samanthawarren.pdf

John Boardley
http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

Harry Roberts

http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques

The folks at Web Designer Depot
http://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/

http://www.webdesignerdepot.com/2009/03/5-simple-ways-to-improve-web-typography/Mindy Wagner

Kyle Meyer
http://astheria.com/design/choosing-type-alignments-fortheweb

Mark Boulton
http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography

http://www.alistapart.com/articles/whitespace

Jason Beaird
http://blogs.sitepoint.com/principles-beautiful-typography/

Jason Santa Maria
http://www.alistapart.com/articles/on-web-typography

Tim Brown

http://vimeo.com/17079380

 

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>