Typography: A Pressing Matter

Most of us would assume that typography was established with the invention of Gutenberg’s printing press in the 15th century. However, like so many things, it turns out that the Ancient Greeks did it first thousands of years beforehand. Some good it’s done them.


Where in the past choosing a typeface was an arduous affair, involving having someone carve out entire alphabets of characters to place on the printing press, in the digital age it’s thankfully a lot easier. We’re all familiar with the more common fonts like Arial, Times New Roman and Courier, and modern web design has led to the ubiquity of newer ones like Trebuchet, Verdana and ‘ugh’ even Comic Sans, but with a bit of knowledge you can ensure that you choose a font that’s perfect for the message you wish to convey.


Let me be your font to see

There are some common sense rules to follow when choosing fonts for your website: they must be legible and the right size, with not too many different fonts to a page. Think about what you’re actually trying to say; Comic Sans, love it or hate, is a great font for websites aimed at kids, whilst a script font might be more suitable for something like a restaurant. In narrowing down your search, it helps to know a bit about the terminology:


Serif and Sans Serif: Serifs are the details on the ends of letter strokes. Times New Roman (or Times on Mac OS) is a serif font, whilst Arial (Helvetica), which doesn’t have such details, is sans serif. As you can see, the Kalexiko website uses a mixture of both. This blog text for instance is in a serif font, whilst the categories and tags over on the left of your screen are sans serif.


Script: Evolved from cursive writing – think quills and scrolls.


X Height: The height of lower case letters, specifically the letter x.


Point Size: The size of the font. It’s worth bearing in mind that point size is relative to each individual font, so two different fonts with the same point size may actually be different sizes on the page. Different browsers might also display them differently.


Baseline: The imaginary line on which normal letters sit.


Cap Height: The distance between the baseline and the top of a capital letter.


Ascenders and Descenders: The parts of letters that go above the X Height (as in h or k) or below the baseline (as in g or y).


Licensing your own Fonts

Font selection doesn’t have to begin and end with Microsoft Word, although all the basic ones are there. There are loads of other font sets available on the internet that are free to use, many of which are actually optimised specifically for website design. If however you’re looking for something a little bit more unique and special, or if you want a heading or logo on your website to really stand out, you can license fonts from sites like fontdeck and typekit to give your website an extra kick. Whilst you have to pay a subscription for these services, they allow you access to fonts that you won’t find anywhere else. They’re not at all difficult to implement either, so if you’re looking to give your website a spark of individuality, talk to your website designer about typography and how it can be used to increase the impact of your site.