3 Simple Rules for Typography in Web Design


I’m sure all of us have, at some point, closed a web page because reading the overly intricate font against a backdrop in a competing color felt like too much work. Straddling the line between a desire to express creativity and avoiding a dull design can be challenging, even for top website designers. There are factors to consider which help typography fulfill its original intention: to enhance the meaning and context of the words they create.

1. Feel vs. Appearance

Think of the word “RELAX.”  Depending on how it is said, it can be interpreted as a command or more like a suggestion.  The typography gives the word enhanced meaning so if it is written in a block-style with all caps, the reader can “hear” the word in a more harsh tone.  When written in a  softer style of lettering, the reader can respond accordingly.  An overly intricate font that requires more focus than it should to read, will make it difficult to have an automatic response.  The point of this example is to demonstrate that proper use of typography should correlate font with the meaning of the word, phrase or text when possible.

Some industries have to include words on their websites that immediately trigger an emotional response so careful attention should be paid as to how these words are presented. For some, the word “Bride” is just 5 letters to describe a woman getting married. For a bride-to-be, the word will simultaneously bring up a host of feelings, worries, expectations and joy. When she reads the word on a website selling bridal gowns, which of these will most closely identify with her state of mind for a purchase? The answer, of course, will depend on your specific target market but website developers and marketing firms can guide businesses on that front.

2. What’s it up against?
The background color or design is particularly important to consider. The reason most documents are black text over light-colored background is due the ease with which readers can decipher the text. There was a recent trend in the field of professional website design to go with muted and earthy tones which can convey a sense of warmth, but it can border on illegible if the designer is not careful. It’s also important to keep in mind that one pairing may work for a menu bar or heading, but not necessarily for a large block of text. It’s a good exercise to search for your favorite large-scale corporate websites which typically have dense content and see which layouts you gravitate towards and how that might work for your business.  This will significantly vary across industry types.

3. Size Matters.
Certain fonts require a larger size to be legible. Others can appear too blocky if they are over-sized. That being said, a website may be viewed across a variety of platforms and the ideal typography for an ipad could be different than it is for an 18 inch monitor. Consider not just the size of your type but it’s functionality across the various platforms.  When selecting typography size, it’s important to determine which text needs to be high impact.  With a trend towards less text and more graphics/videos, the typography should not compete for the eye’s attention.


3D Modeling

Internet Marketing

Mobile Development

Web Design

We cannot thank you enough for all your hard work, advice, dedication, and patience – not to mention design talent and programming expertise

Joseph M., CEO

Get Adobe Flash player