Home

Typefaces have so much meaning in them. They tell you the attitude the company wants to project to the world. Any designer worth their salt knows this and puts a tremendous amount of time, effort, and money into picking the perfect typeface for the given scenario.

Web Fonts

When thinking about the web, we certainly don’t have the full palette of fonts from which to start. Print designers have it made (if they have the money). Web folks like us can never control what fonts people have installed on their system. What you can do is pick your ideal font first, then align your CSS to account for those with less ideal fonts installed on their system. Whether or not you like Helvetica can be debated like it was in the movie, but a good sans-serif font combination is typically: Helvetica > Arial > sans-serif.

For me personally, I love the look of Georgia Bold. It happens to be a huge bonus that Georgia is installed on almost every system (MAC and PC). I designed my site and could realistically predict how my serif font would render on every person’s screen. Browsers play a huge role as well, like how Firefox isn’t anti-aliased while IE and Safari are. But I can at least know Georgia will show up in all browsers and be the right size.

Getting Creative Within a Framework

When thinking about the web, the typefaces you use create an environment for the user to participate in. I almost always limit myself to no more than three fonts (two is preferable). The most important thing is that each of your fonts feels different.

Many people make that distinction clear by using a simple system serif (points for alliteration) and a sans-serif font as their two choices. I do this often. If you want to use multiple serif fonts, you should always make sure they are different enough that your audience knows the change between them is intentional and obvious. Some designers go crazy with type because they find it so interesting. But you can create amazing visual interest with the way you design within each typeface. For instance, using Arial in uppercase with thoughtful kerning gives you a very different feel than Arial as it is normally used.

The beauty of using only a few fonts with different treatments for each is that you create individual styles to suit the use, but tie them together visually because they come from the same “home” so to speak. So lets use “home” as a starting point example of what I’m talking about!

Here I am simply using Arial Bold and making it all uppercase. I am giving it letter-spacing as well, all through the CSS.

By using Arial Regular (above) for the text within an article, I am drawing a connection between the separate elements in both scenarios with the font choice. At the same time, I’m allowing flexibility within each of those elements. It is a subtle design element, but having letters like “H” and “O” drawing from the same style creates a thread through these two elements that can really tie a design together. Making ten subtle changes like this around a site can really improve the overall aesthetic.

Matching a Typeface to Your Logo

Taking this thought one step further, we can infer that tying a thread between the look of your logo and the look of your other text elements can also create this consistency. Drawing from how much I like Georgia Bold, I decided to match my logo to the typeface I knew I wanted to use for my site.

It is kind of counter-intuitive, I know. In almost every situation you should create the logo with the overall feel of a company in mind and then adjust the web-site accordingly. But since this is the only place I use my logo, I wanted to focus on a screen-pleasing font first and foremost. After all, it is the content and ease of use that will drive a blog’s success, not the logo.

I’ll come up with a tutorial soon about exactly how I created my logo to not feel like a new typeface but a small mutation of Georgia Bold, in an effort to keep that consistency intact.