Things to consider when choosing typefaces
I tried sorting these by assigning a priority to each but it was really hard to do. I think these considerations should be taken into account almost equally but still managed to sort by some sort of priority.
Goals
What is the goal of your text? Or even, of your website? Is it a place where people come to read medium to long articles? Or is it a website where most people are expected to scan the content, looking for something particular?
The text
This is the most important step everyone skips or even completely ignores. So many web designers design pretty pictures of web sites in their perfect shapes. Most of them still use Lorem Ipsum as dummy text. Find out what the website is about instead. What type of content will be published? News? Blog posts? Poems? Essays? Get some content samples. This is important. How will your typeface choice complement the content and the information on the website if you don’t read it? At this point you probably thinking: “read it??” Yes, read it. “But I don’t have time, I have pages to design, lines of code to write. I have deadlines to hit.” Excuses. You’ll never get better in choosing typefaces if you ignore the content. What is the author trying to convey? Don’t design without content. Don’t use dummy text. At worst, use similar content—find something similar online.
Typeface
What are you after? What is the content of the website? What typeface would complement that content in a most objective way? What are the people that will read this used to? What do they expect? Will a modern geometric sans-serif seem off? Should we go for a modern serif instead?
Body text or headings?
Are you choosing a typeface for body text or will it be for titles only? Will the two be different? Will one work well with the other? (We’ll cover the topic of combining typefaces in the next lesson). This is an important question that needs to be addressed early in the process. If the typeface is for body text, you should pay particular attention to the readability of longer texts set in it.
Weights and styles
Does the typeface come with the basic weights and styles? Bold, italic and bold italic? Are there more weights? Some typefaces have numerous weights and styles and are commonly being referred to as workhorse typefaces. Even if they do, use only a few weights. Two or three should suffice. Some may only come in one weight or style. I recommend avoiding these. They’ll limit you too much.
Fonts size in Kb
This depends on all considerations mentioned so far. Some typefaces will be heavier than others. Serifs are generally heavier in Kb than the sans-serifs. Some bold styles are bolder than others which, again, affects the size in Kb. So does how many weights you want to use. I tend to avoid using the bold italic so I can usually save a few Kbs by excluding those.
Opentype features & language support
I consider the Opentype features a bonus. If there are two typefaces that I’m considering and one supports the Opentype features and the other doesn’t, I’ll go for the one that does. Not all typefaces support these features and even the ones that do, don’t always support all of them. We’ll get to Opentype features in the later stages of this course.
What language will the website be in? English only? Multiple languages? The Latin language range should suffice for most western languages but here’s a trick. If your website is a single-language only, you can save a few kilobytes by excluding all other. My websites have been English only for a while now so I always choose that set of characters alone. Sometimes it can save up to 20 kilobytes. If the language that your website is in requires special characters, make sure that the font you want to use has those.
Figure 26: Poligon.si uses a font without the required characters č, š and ž.
Reviewing typefaces
Don’t look at typefaces in Photoshop, Sketch or some other graphic design tool. Your content will not appear there. It will be displayed as part of a website in a web browser. Multiple web browsers actually. Try your main typeface in different sizes, colours and different browsers. Each has a different way of rendering fonts (Firefox is known to render all fonts a bit heavier than others). Try it on different OS systems as well. Don’t just design a fancy looking visual design of a website on your MacBook Retina and make decisions based on that. Try what it looks like on Windows and on other screens.
Note: if you don’t know how to set your text in HTML and apply CSS to it, you should preview the typefaces on the font provider's’ website. In the worst case use the Font Changer plugin below. Find a website with decent typography (I recommend Web Font Specimen) and change the font to the one you want to use.