I am following Hackdesign, an online design course. The course consists of (weekly) lessons, each consisting of a brief introduction and a couple of resources on a specific subject.
Lately I have familiarized myself with basics of typography, first with an introduction lesson and after that with a bunch of lessons more. So I have gathered some notes, links etc. here.
Why should you care?
Why should you care about typography? In Web, text is typically a central part of the content. So we want to make it readable - not only in a way that people can read the content but even in such a way that they want to read it. In addition, typography is a big part of building a visual look for a website, digital service, product or a brand.
Typographic choices to make
There are many various choices and adjustments to make related to typography. Tommi Kaikkonen's Interactive Guide to Blog Typography is a good intro on these choices, also in other contexts than blogs.
Related to typographic choices, course resources include Jason Santa Maria's presentation On Web Typography. (He also has a book on the subject). Some points I collected from the presentation:
- Type should be a beautiful group of letters instead of a group of beautiful letters.
- There are no absolute rules for typography, only principles, best practices, guidelines. Context is important.
- Use contrast (e.g. font size, emphasis), to create hierarchy & emphasize.
- Somewhat related, Gridlover is a nice tool for trying out typographic scales.
The amount of typefaces is pretty overwhelming and there's a separate lesson on Exploring the World of Typefaces. There are many services providing web fonts, both with and without a cost, e.g. Google Web Fonts, Typekit, MyFonts and Hoefler & Co, for example. As a tip, Typecast is a service for evaluating both typefaces and other aspects of typography.
Responsive typography
In print design, the target medium is usually fixed and allows the designer to control the end result pretty tightly. However, in web design, the design should work with many different devices, sizes, viewing distances and contexts. This needs to be considered with typography and there is a separate lesson Responsive Typography in Action.
Even though I'm somewhat familiar with responsive web design, there was one point that I hadn't considered before: in addition to screen size, the viewing distance also varies between devices. A smartphone is usually held closer to the face than a tablet. Again, a tablet, a laptop and desktop screen also have different viewing distances. More details on this are discussed in the article Responsive Typography: The Basics.
Responsive typography was discussed in Tim Brown's presentation Universal Typography (he also has a site dedicated on the subject. Some points I collected:
- (Again here) We should target good-looking groups of letters instead of groups of good-looking letters.
- Web in an evolution of all media.
- Web-site creation isn't something you learn once and then check off on your to do list.
- For any block, think the reason for it - to be read / to catch attention / ...
- As a rule of thumb, use 45-80 characters per line.
By the way, font vs. typeface?
For me it was somewhat unclear, what's the difference between a font and a typeface? So, going through some resources I found, I found out that a font has traditionally referred to an instance of a typeface with specific size and weight. However, nowadays the terms are usually used quite interchangeably. Some people think that this is OK and some disagree.
Related links
Some relevant links for finding out more:
- Butterick's Practical Typography - A web book (somewhat experimental format) on typography.
- Typographica - A website dedicated to typography and typefaces.
- The Elements of Typographic Style applied to Web - Website going through the principles found in The Elements of Typographic Style (a classic in the field of typography) and applying them on the web.
