Typography

What is typography? Creative market – the visual art of creating written words. Business Dictionary – Study of the design of typefaces, and the way in which the type is laid out on a page to best achieve the desired visual effect and to best convey the meaning of the reading matter. Wikipedia – the art and technique of arranging type to make written language legible, readable, and appealing when displayed.

Types of Fonts Serif Sans Serif Oldstyle Modern Script Decorative

Serif Serif fonts have feet, hats, stems, or lines on the ends of each letter stroke. Easy to read in body copy. Best used in printed works. Examples: Times New Roman Baskerville Georgia

Sans Serif Sans Serif fonts do not have stems or lines at the end of each letter stroke. Sans means without. Good for body copy. Recommended for use on the web. Examples: Arial, Century Gothic, Calibri

Google Changed its Font After 16 Years. Serif Sans Serif In 2015, Google changed it’s identity to a sans serif font. This is the most major change to their logo since 1999, 16 years ago.

Oldstyle Examples: Garamond, Perpetua, Minion Pro

Modern Thick to thin transitions. Flat serifs. Think magazine covers like Vogue and Elle. Examples: Bodini 72 Book, Didot, Times Bold

Script Mistral Edwardian Script ITC Examples: Snell Roundhand Do not use in body copy. Use for large headings, logos, or fancy occasions. Examples: Snell Roundhand Edwardian Script ITC Mistral

Playbill Decorative Phosphate inline Herculanum Use sparingly. Be careful that the font is not too hard to read. Examples: Herculanum Playbill Phosphate inline

Tracking and Kerning Tracking – Spacing between each letter of a word from the first to the last letter. Kerning – the space between two letters, i.e. r-n.

Web Safe Fonts Check to see if it is a web safe font http://www.w3schools.com/cssref/css_websafe_fonts.asp https://fonts.google.com/ 2. @font-face { font-family: “Raleway”; src: url(“https://fonts.google.com/specimen/Raleway”); } 3. font-family: “Raleway”, Helvetica, sans-serif;

What websites do you use to find new fonts? Discussion

Rules of Typography Can you think of any more rules? Use serif or sans serif fonts in the body copy. Limit yourself to no more than two fonts in a design. 3. 4. Can you think of any more rules?

A Story about Steve Jobs Steve Jobs, who started Apple Computers, audited a calligraphy class in college. He found it fascinating, but did not think it had any practical use. Years later when he designed the first Apple computer he remembered what he learned in his calligraphy class. He created the first computer to have different fonts. Click here to watch Steve Jobs tell his story. https://www.youtube.com/watch?v=zOlRWg_iyWY

Sources https://unsplash.com/search/typewriter?photo=jLwVAUtLOAQ https://creativemarket.com/blog/what-is-typography http://www.businessdictionary.com/definition/typography.html https://en.wikipedia.org/wiki/Typography http://cdn3.collective-evolution.com/assets/uploads/2015/02/jobs1.jpeg http://img.bhs4.com/e3/9/e398104b18e0ef1a32a994ea4a57129a65b0d20d_large.jpg http://dashmasternode.org/wp-content/uploads/2016/02/apple-logo-black2.jpg https://static.pexels.com/photos/5833/nature-grass-green-book.jpg https://www.sitepoint.com/the-old-style-typeface/ https://s-media-cache-ak0.pinimg.com/736x/90/31/48/903148d4873ff11e7148cddb61b758b8.jpg https://www.sitepoint.com/the-decorative-typeface/ https://www.sitepoint.com/how-to-use-cross-browser-web-fonts-part-1/ https://b.fastcompany.net/multisite_files/fastcompany/imagecache/inline-large/inline/2015/09/3050613-inline-i-6-googles-new-logo-copy.png https://www.fastcodesign.com/3050613/googles-new-logo-is-its-biggest-update-in-16-years