Final Resource: Typography

Lessons from the Midterm

For the final project typography there are a few things you all should focus on based on what I saw on the midterm:

  • Measure Matters Measure refers to the length of a line of text. You only want 45-75 or so characters in a line. A large number of you had more than that in your midterms. The common culprit is running a line of text across the entire width of the page.
  • Adding HTML elements and CSS classes that allow your text to be styled. It is impossible to style text in different ways if it is all in one big element. Each piece of text that needs a different style needs to have a different element around it. Also you need to use divs or or article or section elements to group pieces (like title img description) that you want to treat as a group.
  • Create a visual hierarchy that allows people to quickly scan your content and find what they’re looking for.
  • Make sure there is space between your text and boundaries like lines, bg color changes or image edges.

Existing Resources

There are a number of Typography Resources on THIS PAGE Make sure to read through that in addition to the current page


This wasn’t a requirement on the midterm project and technically isn’t on the final project. However you should really start using it as another way to improve your typography.

Choosing Fonts

Big Sites

There are a lot of fonts on these sites, not all are great.

  • Google Web Fonts
  • Font Squirrel
  • Da Font (be careful, not all fonts here are freely licensed for web font use. Read the licenses.)
  • (Have to pay $ for many, but there is a free program that requires you to put JavaScript on your site that shows a badge and may include advertising, see pricing, and the license agreement)

Specialty Sites

These are places that only have a few fonts but they are high quality.

Lists and Articles with Good Fonts

If you’re stuck trying to figure out what to do, then look through these sites for some suggestions and inspiration. You don’t have to read all; click through and see what makes the most sense to you.


These articles explain different aspects of typography.

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © MMP240 Fall 2012
Just another BMCC Multimedia Blogs site

Built on Notes Blog by TDH
Powered by WordPress

That's it - back to the top of page!