Fonts in Web Design

As CSS3 becomes widely supported by modern browsers, and as users slowly start using these modern browsers, we as web designers are open to a range of possibilities for using a wider variety of fonts in our designs. But what does that mean? In my opinion – for those of us who work in web design we now need to add more weight and consideration when choosing a font for our design, as it can either make or break a good web site design.

Take the website you’re on right now as an example.

Our main font is a sans-serif font, which has quite a heavy weight to it, so when designing this website, we’ve made sure that we reflect these elements of the font. This is done by both replicating the square, heavy edges from the font within areas of the site, and also using a similar weight in the padding between block elements and content in ratio to the font size.

Font traits in Web Deisng

Our 2nd font used is a serif font that, while still quite bold and strong, has serifs within the font, which as per our main font should be reflected in the design, both the round shape of the font and the tails that extend off the end of the letters are reflected subtly within the design of the site.

Web Design and FontsSo while we have more fonts to choose from these days, we also have a greater demand that these fonts work with the rest of the web site design not against it.  Many users of the web site won’t ever pickup these slight similarities in font and design, but it will naturally make the website easier to view for web site visitors.

Here are a few resources that I have used in the past:

  • Great resource for finding fonts that you can use with font-face http://www.fontsquirrel.com/
  • A very good video on the history and use of Typography within modern web design, and the inspiration for learning more on this topic:  Tim Brown – More Perfect Typography http://vimeo.com/17079380
  • Good tutorial on how to use font-face CSS selectors
  • A good tool to formulate the different font sizes within a website: http://modularscale.com/

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top