Typography Vocabulary and Guidelines This material has been developed by Georgia Tech HCI faculty, and continues to evolve. Contributors include Gregory Abowd, Jim Foley, Diane Gromala, Elizabeth Mynatt, Jeff Pierce, Colin Potts, Chris Shaw, John Stasko, and Bruce Walker. Comments directed to are encouraged. Permission is granted to use with acknowledgement for non-profit purposes. Last revision February

Agenda (new) Terminology you should know Guidelines & Principles UI Design - Georgia Tech2

Font The complete set of characters for one typeface at one particular type size, excluding attributes such as bold or italic In computer terminology, ‘font’ and ‘typeface’ often used interchangeably Font for helvetica regular 10 point – … Font for helvetica bold 14 point – … Font for Times New Roman regular 14 point – … Font for Times regular 14 point – … UI Design - Georgia Tech3

Type Families Sometimes called ‘typestyles’ Optional ways in which a font can be displayed  Helvetica Regular  Helvetica bold  Helvetica Oblique (many type families call this italic)  Helvetica bold oblique  Helvetica Light  Helvetica Light Oblique UI Design - Georgia Tech4

5 Serif & Sans Serif Fonts Serif font (Times New Roman 32)  Generally preferred for readability of ‘body’ text – the main text in a paper or book Sans serif font (Tahoma 32)  Generally preferred for headlines, headings, captions Monospace font

UI Design - Georgia Tech6 Letterforms

Points Size of font, including spacing above and below Tahoma 12 Tahoma 20 BTW one point = 1/72 inch one pica = 12 points 12 picas = 1 inch UI Design - Georgia Tech7 Tahoma 32 Tahoma 40

Leading Extra space between lines of text Twelve point text with no leading Twelve point text with 6 point leading UI Design - Georgia Tech8

9 Letterspacing – Mono and Variable Monospaced fonts: typewriters, not very legible:  The quick brown fox jumped over the lazy dog. Variably spaced fonts: spaces between each letterform varies with the shape of that letterform (called “kerning pairs”). Also called proportional spacing:  The quick brown fox jumped over the lazy dog.

Letterspacing - Kerning NNNOOORSRS UI Design - Georgia Tech10 Big space Medium space Very small space

UI Design - Georgia Tech11 Letterspacing – Kerning, Tracking The space between TWO letters is kerning Tracking increases all inter-character spacing – such as to completely span a column

UI Design - Georgia Tech12 Letterspacing at End of Sentences ONE space between sentences Two spaces are a TYPEWRITER convention only. This paragraph uses two spaces. A short sentence. Another short sentence. We get rivers. Too much white space. More text. And still more text. Always two spaces. Help me! This looks OK but not great! Why is that? Short sentences. And takes more space too. Two spaces One space

UI Design - Georgia Tech13 Font Guidelines Use serif for long, extended text; sans serif for “headlines” Use 1-2 fonts/typefaces (3 max) Use of normal, italics, bold is OK Do not use bold, italics, capitals for large sections of text Use 1-3 point max Be careful of text to background color issues

UI Design - Georgia Tech14 Font Guidelines Use regularly Serif Times Baskerville Sans serif Arial Verdana Tahoma Don’t use regularly Decorative Chalkduster Parisian Script script SantaFe Let Monospaced Courier

UI Design - Georgia Tech15 Fontitis – too Many - Bad Too many fonts is bad, sometimes a designer gets carried away and uses way too many fonts on a single page

UI Design - Georgia Tech16

UI Design - Georgia Tech17 Font Guidelines AVOID HEAVY USE OF ALL UPPER CASE!! Studies have found that mixed case promotes faster reading HOW MUCH FUN IS IT TO READ ALL THIS TEXT WHEN IT’S ALL IN CAPITALS AND YOU NEVER GET A REST. USE ALL CAPS FOR HEADLINES AND HEADINGS How much fun is it to read all this text when it’s all in capitals and you never get a rest. So use lower case for regular text

UI Design - Georgia Tech18 Linespacing Guidelines More line spacing generally results in greater legibility, until the lines separate

UI Design - Georgia Tech19 Alignment Flush left, ragged right most legible to western eyes. Centered type (except in small amounts) generally impedes legibility.

Alignment UI Design - Georgia Tech20 If you align text on both the left and right and have a very narrow column width, the results seem quite strange. You get lots of big spaces between words. If you align text on both the left and right and have a very narrow column width, the results seem quite strange. You get lots of big spaces between words. When we make the column wider, the results are much better. If you align text on both the left and right and have a very narrow column width, the results seem quite strange. You get lots of big spaces between words. When we make the column wider, the results are much better. And if we use just flush left, they are even better, although now we have a ragged right margin

UI Design - Georgia Tech21 Line length For text, the optimum line length is 55 to 75 characters, including spaces

UI Design - Georgia Tech22 Margins ALWAYS provide a margin, because lack of margins can interfere with readability. Such as in this example. Images from ALWAYS provide a margin, because lack of margins can interfere with readability. Such as in this example. Here is some flush-right text that does not have a margin on the right side. Not so great! Here is some flush-right text that does have a margin on the right side. Much better!

UI Design - Georgia Tech23 Typographical Hierarchy Provides structure based on similarity

UI Design - Georgia Tech24 Typographical Hierarchy plus Indentation 2 types of similarity - better

UI Design - Georgia Tech25 Getting Carried Away…

UI Design - Georgia Tech26 Font Control

UI Design - Georgia Tech27 Example CRAFTS AND GAMES ARTS FESTIVAL OF ATLANTA AND DECATUR COME AND ENJOY SEPTEMBER Crafts and Games Arts Festival Of Atlanta and Decatur September Come and Enjoy! Which do you prefer? Why? Make it even better! Applies some of the principles

UI Design - Georgia Tech28 The End