View previous topicGo downView next topic

How was the tutorial?

0 - 0%
0 - 0%
0 - 0%
Total Votes: 0
GB Coins : 4632
Level : Hobbyist
Program : PSP x8
Behaves well.
Posts : 780
Likes : 202
View user profile

Medium Tutorial Typography Basic Terms

on Sat Apr 16, 2016 8:15 am
Basic Typography Terms
Basic Typography Terms

Credit goes to CreativeBloq for the tutorial.

CreativeBloq wrote:
Typography is, quite simply, the art and technique of arranging type. It's central to the work and skills of a designer and is about much more than making the words legible. Your choice of typeface and how you make it work with your layout, grid, colour scheme, design theme and so on will make the difference between a good, bad and great design.

Choosing a font

There are countless free fonts you can use on the web. However, just because you can choose from a vast library doesn't mean you have to; there's something to be said for painting with a limited palette, and tried and tested fonts like Helvetica continue to serve us well.

01. Size

All typefaces are not created equally. Some are fat and wide; some are thin and narrow. So words set in different typefaces can take up a very different amount of space on the page.
The height of each character is known as its 'x-height' (quite simply because it's based on the letter 'x'). When pairing typefaces – such as when using a different face to denote an area of attention – it's generally wise to use those that share a similar x-height. The width of each character is known as the 'set width', which spans the body of the letter plus a space that acts as a buffer with other letter.

Same size - different font

02. Leading

Leading describes the vertical space between each line of type. It's called this because strips of lead were originally used to separate lines of type in the days of metal typesetting.
For legible body text that's comfortable to read, a general rule is that your leading value should be greater than the font size; anywhere from 1.25 to 1.5 times.

Leading 0 - 0.5 - 2

03. Tracking and kerning

Kerning describes the act of adjusting the space between characters to create a harmonious pairing. For example, where an uppercase 'A' meets an uppercase 'V', their diagonal strokes are usually kerned so that the top left of the 'V' sits above the bottom right of the 'A'.
Kerning similar to, but not the same as, 'tracking'; this relates to the spacing of all characters and is applied evenly.

First Row Kerning 0 - 100 - 500
Second Row Tracking 0 - 0.2 - 0.6

04. Hierarchy and scale

If all type was the same size, then it would be difficult to know which was the most important information on the page. In order to guide the reader, then, headings are usually large, sub-headings are smaller, and body type is smaller still.
Size is not the only way to define hierarchy – it can also be achieved with colour, spacing and weight.

#tutorial #youshouldknow #designerrules #typography #mimózacollection #mimózatutorial #creditedsource
View previous topicBack to topView next topic
Permissions in this forum:
You cannot reply to topics in this forum