Typography

By admin on 15/12/2012

I recently sat down to task myself with finding out more about Typography, driven by how uncomfortable I feel with how I've thrown together this site's theme and the awkward, messy lack of structure used (UPDATE: since writing this I've released an update to the theme I'm much happier with). It's an area I've never given due consideration to despite my appreciating its key importance in the web development world. Time to rectify such ignorance! Shared here are some key parts of my explorations so far.

Inspiration

This TED talk by the chap who created the iconic Jurassic Park book cover was a great kick start to my exploration and helped me ask myself a load of questions to guide the journey. It's more focused on book covers but of course typography plays a key role here.

Fundamentals

As with any subject, Typography has a lot of specific terminology. I was aware of some of it but it was good to spend some time understanding exactly what these are. I've briefly summarised them below but this is mostly abbreviated from a fantastic resource on Designshack - Typography 101.

Baseline The baseline is the bottom grid line on which each letter rests. X-Height The tops of letters form a grid line called x-height. A larger x-height can make a font feel bigger than a font with the same point size but smaller x-height. (I had to double check this as to me, X represents horizontal positioning, however it's apparently so called because the letter "x" is the x-height exemplar). Ascender/Descender The parts of a letter which extend above the x-height line and below the baseline respectively. Defining these properties of typography helps you to appreciate their impact on other letters and the relevance and impact on line height. Ligature Joins two letters into a single character. F-ligature is the most common where "f" meets another letter with a "centre ascender" (a bit which sticks up the middle of the letter - e.g. fl or fi). They are used to create fluidity between colliding letters. There are also Discretionary ligatures which are purely creative ligatures. Generally it's avised to avoid ligatures because adjusting letter spacing becomes an issue. However there are some modern open type fonts supporting this now which will split into two characters when letter spacing is increased. Serif / Sans serif Short strokes extending from the upper and lower ends of each letter. Serif type is typically used in traditional printed media (E.g. Times New Roman) whereas sans serif fonts are used more commonly in digital. Cursive fonts Often have lines to connect letters and tend to slant in a handwriting style. Fantasy fonts

Have a playful feel with no strict rules to form or structure (e.g. Comic sans).

Monospaced fonts Evenly spaced characters, typically used in text editors or coding environments.

Practice

For experimenting with typography for your web based creations, an truly amazing resource is typecast.com. This web app allows you to set up projects and visually master your typographic creations with a huge number of fonts resourced from a variety of web font repositories. It also generates the appropriate css for you to use in projects. There are a number of useful video tutorials (I found the one on vertical rhythm particularly interesting) and the application has a fantastic interface. Well worth a look.

Resources

The following are the various sites I've been scouring on my typography explorations:

People

Most definitely follow-worthy typography folks:

Best Typographalisterer Evar

I'm never going to be a particularly gifted typographer, of this I've no doubt, but having an awareness and appreciation of the craft has already changed the way I look at sites and print and will certainly help with work. I now have an urgent need to revisit this theme armed with my new (yet still very limited) knowledge. I've also yet another area of the digital creative world to keep my eye on now which is great as I was just running out of online content to keep on top of...

If you know of any other particularly useful resources you think I should be aware of, please do tweet me and let me know.