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.
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.
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.)
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.
- Awesome Fontstacks
This is one I just found. It is a tool that helps you build a font stack and then helps you with finding the web fonts for downloand and gives you the CSS to use. Many of them use Font Squirrel fonts so you may want to watch my video on how to download and use them.
If you’re really lazy or uninspired then check out their prebuilt font sets.
- Best Web Fonts
- Top 10 Open Source Web Fonts
- Combining Fonts
- Best Practices for Combining Typefaces
- Good Web Fonts
These articles explain different aspects of typography.
- Smashing Magazine Typography Articles
They have a lot of good resources, many below are from there.
- The Perfect Paragraph
This article is about what you need to know to make a perfect paragraph. It turns out it is really a nice lesson on typography in general, and, even better, it shows examples with CSS so it is much easier to apply what they talk about.
- Avoiding Faux Weights and Styles with Google Web Fonts
- Why Subtle Font Choices Make All the Difference
read this one if you’re having problems figuring out why fonts matter.
- Typographic Etiquette
This articles talks about some of the finer points of typography that will put you a step above the average web designer and make your typography more professional.
- 100 Web Typography Educational Resourcs
This is something to save for after the Final. There is a lot to go through. If you want to be a web designer, you have to know about type. Start reading through these resources to improve your knowledge of type.