Embrace the system

In today's world of infinite possibilities and options, in order to do your most creative work it can sometimes help to set yourself limitations. If you're a designer, I don't need to tell you how many fonts there are out there, it can be overwhelming. So why not keep it simple? System fonts can be beautiful, it's the small details that can really transform the way they look in a design, and make it instantly and subtly unique. You just need to know what's possible.

System Font Pairings

I find that pairing different font types (serif, sans-serif, script and monospace) is generally a nice way to create interesting combinations.

Some Suggestions

  • Arial and Georgia
  • Trebuchet MS and Times New Roman
  • Courier New and Verdana
  • Verdana and Arial

Letter Spacing

I tend to use letter spacing quite dramatically in headings, and more subtly (if at all) in paragraphs. The reason for this is because longer portions of text can easily become more difficult to read with too much or too little letter spacing. I have increased the letter spacing of my heading in this section to 5px, which I think makes the font look quite different and new.

“Letter spacing is a pretty effective way to transform a system font into something more fresh and interesting.”

Don’t be afraid to go bigger

Font Sizes

I find that making a system font big and bold can in a way, bring it back to life. We're so used to system fonts like Arial being used for paragraphs - kept small and subtle, no bigger than 16px. But why not make them the hero? It's almost like when you have to design a website using a brand colour of lime green. If you use that lime green in a meek way, it's going to look lame. Using that colour boldly will make your design appear more confident. So in my opinion, don't be afraid to go bigger - 100px for a heading is not ridiculous. You have an infinite amount of space to use, so use it.

Text Shadows & Ampersands

Asubtle text shadow can make an overused system font look a little more considered and loved. I pretty much keep both the x and y distances to a maximum of 2px, the blur also 2px and the opacity of the text-shadow to no more than 40%. I also find that a dark shadow works with light text, and a light shadow with dark text.

Ampersands are fun. They're curly and interesting and I find them beautiful. Well, some of them. Don't just settle for a boring one, change them up and mix some fonts around. For example, for the heading of this section I used Verdana, but then didn't like how the ampersand looked so changed just the "&" to Trebuchet MS - I think they look pretty swanky together.