Choosing fonts for your website can seem like a monumental task when you find yourself scrolling through hundreds of fonts or hopping from website to website for ideas. Instead of randomly pairing fonts or falling down a rabbit hole of options, it’s best to get organized about your search.

Start With Inspiration

When it comes to choosing fonts for a website, I start with inspiration. My clients are my first source. I create a shared private board on Pinterest and ask them to start pinning websites, photos, and imagery that they like. I ask them to add comments to the pins to point out exactly what they like—colors, fonts, layout, or some other tiny detail. Sometimes I will pin images to the board myself, adding comments and asking the client to add their opinions.

I tell them, “The point of this exercise is to unravel what makes you tick—and what ticks you off! Please look at these pins and add comments to tell me what you do or don’t like about the image. You can click through to some of the websites to see more detail. Do you like the colors, imagery, fonts? What do you love or hate?”

In turn, I create my own private board for the client project where I can experiment with my own creativity. Sometimes I simply right-click on the images and paste them to my Adobe Illustrator design file for the preliminary designs. In both of these cases, I keep my inspiration private from my clients to discourage them from intervening or micromanaging. Once I am ready to share my own ideas, I’ll add them to our shared board or simply display them in the site itself.

When choosing a font, it’s imperative to consider the client’s logo and any other branding guidelines that already exist. So many clients are blasé about the influence a logo has on their website’s design, but an existing logo and brand elements must be consistent with the look of the site. Of course, if the logo is not a perfect representation of the brand yet the client is not willing to have it redesigned, it can be toned down (made black, white and/or small). But the design elements in the logo should still influence the design. The font in the logo will need to be complimented by the fonts you choose for the site.

Use Your Tools

When I pinpoint websites that the client or I like, I dig into the font styles more closely. There are three main tools I use:

Firebug:

Firebug works (best) with Firefox and Chrome to help you view and edit CSS, HTML, and JavaScript live in any webpage. Using Firebug, I can select the headlines and paragraphs to check the right-hand Style panel for CSS that tells me what fonts are used. I skim down all the CSS properties and look for “font-family.”  There are often three or more fonts listed in the font-family string. The one highlighted blue is the one showing up on the site. The grayed out ones are backups in case the first one doesn’t work on a particular computer. Once I see the font-family name, I can Google it.

WhatTheFont! from MyFonts

WhatTheFont! from MyFonts is an add-on (a.k.a extension) for Firefox and/or Chrome browsers and is especially helpful if you’re not comfortable with Firebug. Once installed, you can select text anywhere on the page and right-click to choose “Font Finder” and “Analyze Selection” and it will tell you the font-family, size, color, and so much more. Then, it’s back to Google to find the font. There’s even an app for that!

Pinterest

Pinterest is one of my favorite places to find fonts and font combinations. You can start your quest for great fonts by searching for “best font combinations” or “Google font combinations” on Pinterest. Other tools and websites for font combination inspiration include:

Ready to Buy? Get Creative!

Sometimes you find a font you love and it’s terribly expensive, or you can’t find where to buy it. A handy trick is to Google “similar fonts to <insert font name>.” You’d be surprised how many articles are floating around the web with “10 alternatives to <your font>”!

If you find a font you love and it’s terribly expensive or you can’t find where to buy it or you don’t want to buy it before your client approves it, you can use this little trick to test it out on your site:

  • Find the font you like in MyFonts
  • Type your headline in the “Type your font here” box, or use their TypeCast tool (click the Webfont tab of the font you selected and then click the “Try it in Typecast” button)
  • Next, take a screenshot of the font and paste it into your website design

Note: This only works well when you are testing out short headlines or buttons, and they appear on a white background, since the screenshot will include a white background.

I was recently testing out the font LTC Goudy Intials on a website for some first letter drop caps, like in old–fashioned books. I didn’t want to buy the font, so I simply used screenshots of some of the individual letters in my website designs that I presented to the client.

Consider the Source

If I’m after free fonts, I personally like Google Fonts. Google Fonts provides a huge selection of high-quality fonts that are easy to install and use on a website. They load faster, are SEO friendly, and look the same across different computers. Google Fonts is a great source for free fonts.

Get your font from a reputable source. I like to buy most of my fonts from MyFonts and Creative Market. Oftentimes free or uber cheap fonts from random websites are badly constructed and have terrible spacing between the letters (kerning). Sometimes they don’t even include important characters like ampersands, periods, and dashes!

Be sure to get both the webfont and desktop fonts so that you can use the fonts both on your website and within design programs like Adobe Photoshop or Illustrator, or even Microsoft Word and Canva (Canva For Work). Webfonts are designed to work across different web browsers and computers while desktop fonts are designed to be used in the graphic images you create for your site (and for print use).

A Word on Selection

When choosing your fonts, try to narrow down the total number of fonts your website will use. Too many fonts will slow down your site – let alone potentially look ugly.

I like to choose one or two featured fonts for headlines along with a body font that is widely available across many computers (such as Arial, Times New Roman, Helvetica, Georgia, or even Baskerville). In order for fonts to be viewed on a computer, they have to reference a font file installed on the viewer’s computer. If the viewer has a very simple machine, or an older one, they will be limited in their ability to view fonts. That’s why sticking with a simple body font is best.

You can check CSS Font Stack to find a list of common web-safe fonts that tracks the percent of users have that font file installed. For example:

  • Arial is installed on 99.84 percent of Windows machines and 98.74 percent of Mac machines
  • Gil Sans is only installed on 58.54 percent of Windows machines and 95.5 percent of Mac machines

So Arial is a better choice! If I did still want to go with Gill Sans, I would make sure to add backup fonts that resemble Gill Sans so every viewer can access the content on my site.

Choosing fonts for your website takes consideration and a bit of work, but with the right inspiration and tools, you’ll be able to pull together a great user-friendly design that your clients love.

  • Fiona Smallwood July 23, 2016, 5:20 am

    This is a really handy post. Great reading.

Leave a Comment

©2017 Web Designer Beauty School   ♠   Contact Us   ♠   About   ♠   Press   ♠   Login