Working with words

Typography

Week 5

This week we put down the letters and glyphs of the last few weeks, took a step back, and started to consider whole words. This was one of those lessons, where you learn proper stuff, like that leading used to be the space between lines, so you’d have 24/12 for example. But now it is the measurement from baseline to baseline, so the same layout would now be 24/36.

The space between words (or ‘wordspacing’ – shocking) should be the width of a lower case ‘i’ of the same font you are using;

Checkioutithisiperfectlyispacedipullquote

Also ‘tracking’ which is the inter-character spacing on a chunk of content – a word, sentence, paragraph etc. I always though this was kerning – I didn’t realise kerning only refers to the adjustment of space between individual letters. Larger tracking should always be applied when using all caps, or if you are reversing light copy out on a dark background, including back-lit signs.

We played a bit of hand-kerning, with some tricky combinations. The rule is, find the trickiest pair of letter to sit together, sort them out and then take that spacing as your lead for the rest.

IMG_4201 copy

These were my attempts… the feedback was that the W is too far away and the S too close,  but not too bad on the whole apparently. Interesting looking at the letters so closely, and fun to stick them down with glue… no second chances! Or deleting and starting over.

Obviously the Kerning Game was mentioned. But also mentioned was a critique of the game by Paul Shaw, which I haven’t read yet but will.

Advertisements

Rendering, Hinting and Aliasing

Typography
Week 4

This week was about selecting a typeface that suits your needs. As well as picking the right face for your content/paper/message, we touched on picking a typeface for a digital context. Useful info about licensing etc, we also learnt about the process of rendering, and the use of hinting and aliasing in web fonts.

I hadn’t realised that OpenType fonts actually hold more data in the font file than postscript and truetype. And apart from the sales pitch at the end there is a nice little animation here. And I guess that’s why it’s often larger than other font file types.

Rendering
Having learnt the basics of how type is rendered on a screen, we had a go and colouring the pixels by hand. A piece of tracing paper with a 2cm grid – the ‘pixels’ – overlaying a letter. If the centre of a square overlays the letter it gets coloured in, and so you end up with an aliased, un-hinted glyph. The beginning of rendering a typeface.

IMG_4139 copy

Hinting is more about the even width of lines in a glyph – certain strokes are matched with others and will render at the same width. Hinting data is stored in the font file.

Readability
I was very interested to learn about what makes a typeface readable, or not. Everything from the x-height (bigger is more legible) to the heights of the ascenders and capitals (the more difference the better… within reason) have an effect on the clarity. For example, with a typeface with too much conformity, eg Helvetica, the eye first simply sees a rectangle and has to work harder to identify letters.

Right typeface for the right context.
As well as choosing a typeface because you like it, or it has the right ‘mood’, it’s necessary to think about the functionality. If you are styling a headline, ensure that the face works well at a large size – or use a typeface designed specifically for this person – a display/titling font, for example Big Caslon. There are faces that work well for both body copy and headers, eg Spiekermann’s Meta and JT Enigma.

We talked a lot about pairing fonts – successful when harmony is found in the contrast.

IMG_4133 copy

The variations in shapes, curves, geometry and contrast within the glyphs need to be considered when using multiple typefaces.

References
‘So you need a typeface’
‘Meet your type’ – Font Shop
Lost font
DS Type
Type-O-Tones
Our type