Typography That Works With Your Website

When designing a website, there are many components that have to work together to create something that is aesthetically pleasing. High-quality graphics and nice layouts get most of the attention and praise, but there are other factors at work that are equally as important, and shouldn’t be over looked. Typography is one of the elements that is overlooked by most casual internet users until they see something blatantly bad. Typography, in simple terms, is the art of making text appealing to the eye. Although easily overlooked, it actually takes a significant amount of time to get right. Most of the work consists of finding fonts that “look right”. That can be difficult, even if you have artistic talent, but here are some guidelines and tips to help make it easier.

Know When to Use Which Fonts


Unfortunately, we can’t just pick our favorite font and use it for any site. For an attorney’s or law firm’s website, you want to use a font that expresses a sense of formality, professionalism, cleanliness, etc. If someone is looking for a lawyer, they are in a serious mood and want someone who means business; your website has to deliver that sense of security. When it doesn’t, your website turns into a giant sign that says “run away“.

Typography example for Carl's Law Firm

Would you trust Carl with your life? Me neither. Back to Google!

Another example would be the website you have to make for the knitting business your aunt just started. She hand-knits everything herself, so you should use a font with a little decoration, or possibly a “script” font that looks hand-written, for her website. The reason being is — if your products are hand-made, personal, and unique, then your website should reflect some of those elements. The last thing you want to do for this kind of website is use a font that looks industrial, technical, or even too uniform. If the website doesn’t appeal to them, there is a good chance that a new visitor to the website will leave before reading anything you are trying to tell them, even if you stress that everything is hand-knitted in every sentence.  Gap’s website works for Gap because it is a large company that has a large target audience, but it wouldn’t work for your aunt’s knitting website.

Finding one font that works for your website usually isn’t enough, though. Headings and titles should always stand out from the body content, so the reader knows what they are reading. Unfortunately, increasing the weight and size of the header text usually doesn’t make it stand out enough, nor does it look impressive. Instead, in most cases, you should use a different font for the headings, titles, and other important information. Fonts that work well for headings and logos are usually too difficult to read when set as the body text. Generally, a stylish font is good for headings, while a crisp and easy-to-read font is good for body content.

Typography example for a small knitting business.

Pink and blue is normally a bad color combination for fonts, but it could work for a website that is selling knitted clothing. Both are common colors for baby clothing, and they are “fun”– which could relate to the type of consumer you are trying to reach. Otherwise, black or a dark gray is the best choice for font color for light backgrounds. For dark backgrounds, white is a good choice.

Of course, you can’t just pick any two fonts and use them together. They have to compliment each other; modern fonts with modern fonts, traditional fonts with traditional fonts, etc. There are exceptions, where the two fonts have some elements that bring the two together, or have unique qualities that just happen to look good. Be sure to take some time when designing a website, image, presentation, or anything else that has text to find fonts that work well with the other elements of your design– your sharp-eyed readers and viewers will be grateful.