Choosing the right font
When we design for the web, we have to accept that the content will change. It's simply out of the question to take the time to adjust space between individual letters each title on a huge website. In other words, we give up some control. What we're going to be focusing on today is practical typography. This means accepting that we will never have total control over the type on our websites. Choosing a typeface, deciding on a size, these are all things we as designers have a say in. Practical typography means learning how why. What do we do with type? Read it. So why do so many websites make it so damned difficult to do just that? Be it tiny font sizes, crammed line height, or just plain ugly fonts, it seems that a lot of sites out there are determined to not let us enjoy their content. By making our type readable, we immediately jump ahead of at least half of the competition.
When deciding what typeface to use on our website, it's important to remember not to over think it. Many designers hate using Helvetica, because it is wildly overused, but there's one very important thing missing: why? People overuse Helvetica because it's pleasing to the eye. It fits right in with virtually every design imaginable, it works well in small, as well as huge sizes. While it may go against our beliefs to set our type to an overused and abused face, if it works, then go for it. Our body copy is arguably the part of our design that needs to be most readable, so make sure to pick a font that works well in small sizes. If we can set our copy to 10px and you can still make out what it says, then that's a good indication that we have chosen a readable typeface. If we can make out what it says immediately, then it's readable enough. There's no formula for choosing the right fonts for our website. Often, the best way to decide on one is to just try out each font you think might work, and then compare. It's important to remember that 90% of the time, a user won't be thinking about what font is used, so if it's readable, then that's often good enough.
There's rarely a situation where just one typeface is enough on a site. The average website has a lot of text. There's no way one typeface will work for all of them. The majority of well designed websites use two typefaces: one for body copy, and one for headlines. When choosing a pair of fonts, the most important thing to consider is how they work together. The best way to choose a pair of fonts that works is to just put a lot of them side by side and decide on the best. There's no way to know which is the best until we've tried all of them. Sometimes, the most appropriate thing would be two sans-serifs, while other times, we may want a sans for headlines, and a serif for body copy. It doesn't particularly matter if they look similar, what matters is if they act similar. This depends on the rest of our design. Whichever fonts we choose has to convey our message strongly, and if that means having contrasting typefaces, then go for it.
As a rule, designers like to set their body copy at the very least at 12px. Most, however, chose a larger size like 14px, which is even better for readability. Font-sizing is really quite easy to decide on for body copy, but it's the titles that start to get complicated. How big should our titles should be depends on the circumstances. A title should only be as big as it needs to be. This means that we need to try out different sizes until we find one that is just big enough to draw the attention want, but no bigger, unless huge text is what we're going for.
The title is an important item on the page, so naturally it should be bigger, right? Yes and no. Yes, titles are generally bigger than other elements, but no, this is not the only way to draw attention to them. Color, weight, and placement are all equally important to establishing a clear visual hierarchy to your pages. The key point to remember about visual hierarchy is that it's all relative. Text on our site only has to stand out compared to the other text on our site.
While not really typography, color is a very important part of every website's type. The contrast needed to insure readability on our site may involve font color. Black text on a light background is considered to be the most readable color for text. We need to be aware of the contrast of our text text.
The use of type is a very important tool to establishing visual hierarchy, be it through size, color, weight, or even placement. if our typography is readable, then we're already ahead of of the competition. We want our website to stand out so use some unique typography but remember that conveys a message that the other fonts don't. Choosing a unique font is really about the feeling. When choosing typefaces for any projects, we should always be considering the feeling of the design.