Typography Rules and Tips

Typography Tutorial: Terms, Tips and Tricks. https://www.youtube.com/uxdtraining Typography is the art and technique of arranging type and the aim of the game is to make your written language look aesthetically appealing and easily readable so audience’s can absorb your message. Here’s a guide to fundamental typography terms and some great tips and tricks of using them in design.

TYPOGRAPHY TERMS
01. Font vs typeface
A font is a set of printable or displayable text characters in a specific style, known as a typeface. Today, the terms ‘font’ and ‘typeface’ are used interchangeably, but they are historically different. In brief, a typeface is the design – it’s what you see; a font is how that design is delivered – it’s what you use.

Tip: The typeface should reflect content. Stick to one typeface or font family to create harmony in a design, and use italic, bold, and other styles to add hierarchy.

02. Size
A font can be applied in all different sizes and can be used to differentiate create visual hierarchy.

Tip: Vary the size and weight of the fonts used for the heading, sub-heading and body copy. For example, a larger font size for the heading will amplify the focal message.

Trick: Use the golden ratio to determine the proportions of the font size used for the heading, sub-heading and body copy.

03. Weight
A font’s weight determines how thick or thin characters are displayed.

Tip: Narrow, thin fonts are a good way to create contrast between a heading and body text, but be aware that they can be difficult to read on small body text because of how faint they can look.

04. Ascender
image00
The ascender is the vertical stem that extends above the mean line of a font. In other words, the taller part of a lowercase letter or the upper portion of an uppercase letter.

Trick: Place smaller, introduction or supportive text in this landing space.

05. Descender
image02
The descender is the portion of the letter that extends below the baseline of a font.

Trick: Place subheadings or less important text in this space. Or add a tagline or embellishment.

06. Serif
image01
A serif is a typeface with small decorative edges at the ends of the letters. They have a more traditional and sophisticated look.

Tip: Use serif typefaces for long copy, as they are easy to read.

07. Sans Serif
image04
A sans serif is a geometric typeface with no decorative details, additional strokes or spurs at the end of the letters. They have a more modern, minimalist look.

Tips: Sans serif typefaces are great for titles.

08. Script
image03
A script font mimics the stroke of a paintbrush, often linking letters together. Applying a script can add a certain edge to your design.

Tip: Script typefaces create a dynamic and interesting pairing when combined with a sans serif.

09. Baseline
image06
The baseline is the line on which most letters sit and below which descenders extend.

Trick: Add a line of text along the baseline corresponding to the line above.

10. Tracking (or letter spacing)
image05
Tracking is adjusting the space between letters throughout an entire word.

Trick: Elongate shorter words and fill empty space by increasing letter spacing, creating flush lines between headings and subheadings.

11. Kerning
Kerning is similar to tracking in that it determines the space between two letters or characters. However, tracking adjusts space equally through a whole word, kerning only adjusts the distance between two letters.

Tip: Adjust space to improve the visual flow of words. Words can be indecipherable when letters are set too close together and awkward when too far apart.

12. Leading
Leading refers to how text is spaced vertically in lines and affects the readability of text.

Tip: The space between the bottom of the upper line and top of the lower line should be in proportion to the size of the font. Too much or too little space can make it difficult to read and descenders can overlap ascenders.

13. Line Height
image08
Line height is the distance between two rows of text from baseline of the upper row to baseline of the lower row.

14. Glyphs
Glyphs are the characters and symbols in a typeface, such as ampersand or asterisk.

Tip: Take advantage of glyphs as design elements and choose a typeface that shows off its design.

typography design
typography definition
typography tutorial
typography graphic design
typography history
how to do typography
typography rules
typography examples