CSS Typography 1 Fonts & Formatting Group to whom I’m speaking ! R. Scott Granneman © 2007 R. Scott Granneman Last updated 20140320 You are free to use this work, with certain restrictions. For full licensing information, please see the last slide/page. 2 Basics 3 Types 4 Most basic: ! Serif Sans-serif Monospaced/Monospaced 5 Adobe Type Classifications www.adobe.com/type/browser/classifications.html 6 Adobe Originals Greek Sans Serif: Grotesque, ! ! Neo-Grotesque, Blackletter Hand-tooled, Inline, Geometric and Humanist ! Outline, Stencil ! Capitals ! Script ! Japanese ! Computer Related ! Slab Serif ! Mathematical ! Cyrillic ! Small Caps & Old Style ! Monospaced Figures Decorative & Display ! ! ! OpenType Pro Swash Didone (Modern) ! ! ! Opticals Symbol Expert Collection Ornamentals ! ! ! Transitional Garalde Oldstyle Phonetic ! ! ! Venetian Oldstyle Glyphic Serif font 7 commons.wikimedia.org/wiki/File:Serif_and_sans-serif_02.svg en.wikipedia.org/wiki/File:Serif_and_sans-serif_03.svg Serif font with serifs in red Sans-serif font 8 en.wikipedia.org/wiki/File:Typography_Line_Terms.svg 9 en.wikipedia.org/wiki/File:Typoghaphia.svg en.wikipedia.org/wiki/Typeface_anatomy 1 x-height 11 counter 2 ascender line 12 collar 3 apex 13 loop 4 baseline 14 ear 5 ascender 15 tie 6 crossbar 16 horizontal bar 7 stem 17 arm 8 serif 18 vertical bar 9 leg 19 cap height 10 bowl 20 descender line 10 Measure 11 Measure ! Length of a line of text ! Measure should be pleasing to the eye & facilitate reading 12 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 13 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 14 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 15 Shoot for between 40-80 characters, including spaces ! ~ 65 characters is ideal 16 Leading 17 Leading Space between lines of type ! Very important for readability 18 The longer the measure, the more leading is needed ! The larger the font, the less leading is needed 19 Leading of 0.8 ! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 20 Leading of 1.7 ! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. 21 Leading of 1.3 ! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 22 Rough rule of thumb: set leading 1.3 times your font size 23 * { font-family: Helvetica, sans-serif; font-size: 1em; line-height: 1.3; }" ! Same as: ! * {! font: 1em/1.3 Helvetica, sans-serif;! } 24 Scale 25 Don’t size text arbitrarily ! Use a scale for your fonts 26 The Classical Scale ! 6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72 27 Fibonacci sequence scale ! 8 13 21 34 55 89 28 The W3 provides a very usable, standard scale 29 <absolute-size> Scaling Factor HTML hx xx-large 2/1 h1 x-large 3/2 h2 large 6/5 h3 medium 1 h4 small 8/9 h5 x-small 3/4 xx-small 3/5 h6 30 body {font: 1em/1.3 "Lucida Grande";}" h1, h2, h3, h4, h5, h6 {font-family: Georgia;}" h1 {font-size: 200%;}" h2 {font-size: 150%;}" h3 {font-size: 120%;}" h4 {font-size: 100%;}" h5 {font-size: 89%;}" h6 {font-size: 60%;} 31 32 Typography & the Web 33 Operating System Defaults WINDOWS WINDOWS WINDOWS WINDOWS WINDOWS WINDOWS 34 95 98 2000 XP Vista 7 www.tlccreative.com/samples/OS_Fonts_by_TLC.pdf Fonts New Fonts New Fonts New Fonts New Fonts New Fonts Arial Abadi MT Condensed Light Comic Sans MS Estrangelo Edessa Cambria Gabriola Arial Bold Aharoni Bold Comic Sans MS Bold Franklin Gothic Medium Calibri Segoe Print Arial Bold Italic Arial Black Georgia Franklin Gothic Med. Italic Candara Segoe Print Bold Georgia Bold Arial Italic Book Antiqua Gautami Consolas Segoe Script Georgia Bold Italic Courier Calisto MT Kartika Constantina Segoe Script Bold Georgia Italic Courier New Century Gothic Impact Latha Corbel Segoe UI Light Courier New Bold Century Gothic Bold Mangal Lucida Console Nyala Segoe UI Semibold Courier New Bold Italic Century Gothic Bold Italic Microsof Sans Serif Lucida Sans Demibold Segoe UI Segoe UI Symbol Courier New Italic Century Gothic Italic Palatino Linotype Lucida Sans Demibold Italic Modern Comic San MS Palatino Linotype Bold Lucida Sans Unicode MS Sans Serif Comic San MS Bold Palatino Linotype Bld Italic Modern MS Serif Copperplate Gothic Bold Palatino Linotype Italic Mv Boli Roman Small Fonts Copperplate Gothic Light Plantagenet Cherokee Script Symbol Impact Raavi NOTE: Trebuchet MS Te new Vista fonts are the Times New Roman Lucida Console Trebuchet MS Bold Script newer cleartype format Times New Roman Bold Lucida Handwriting Italic Trebuchet MS Bold Italic Shruti designed for the new Vista Times New Roman Italic Lucida Sans Italic Trebuchet MS Italic Sylfaen display technology. Microsof Times New Roman Bld Italic Lucida Sans Unicode Wingdings Tunga designed these to become Wingdings Marlett Vrinda replacements for: Matisse ITC WST_Czec News Gothic MT WST_Engl Cambria = Georga and News Gothic MT Bold WST_Fren Times New Roman News Gothic MT Italic WST_Germ Calibri = Arial OCR A Extended WST_Ital Candara = Trebuchet MS and Tahoma WST_Span Helvetica Tahoma Bold WST_Swed Tempus Sans ITC Consolas = Lucidia Console Verdana and Courier New Verdana Bold Constantia = Georga and Verdana Bold Italic Palatino Verdana Italic Corbel = Verdana Webdings Provided by: Westminster 35 XP 133 Vista 191 7 235 8 278 36 10.5 Leopard 160 10.6 Snow Leopard 248 10.7 Lion 225 10.8 Mountain Lion 242 10.9 Mavericks 247 37 iPhone iPad 3 44 — 4 41 67 5 57 57 6 61 61 7 71 71 38 1-3 3 4 6 39 7 25 8 37 40 Web Browser Defaults 41 OS Browser Sans-serif Serif Mono Times New Arial Courier New Roman Times New Arial Courier New Roman Helvetica Times Courier sans-serif serif monospace 42 OS Browser Standard Fixed-Width Times New Courier New Roman Times Courier 43 OS Browser Sans-serif Serif Mono Times New Arial Courier New Roman Helvetica times-roman Courier sans serif monospace 44 Microsoft’s Core Fonts for the Web 45 Provided by Microsoft royalty-free 1996-2002 ! Still legally available all over the Web & on all Macs 46 Not included in Windows en.wikipedia.org/wiki/File:AndaleMono.svg since Windows ME in 2000 ! Pretty good monospace font 47 Still included on Windows en.wikipedia.org/wiki/File:ArialMTsp.svg ! Inferior knock-off of Helvetica 48 Still included in Windows en.wikipedia.org/wiki/File:ComicSansSpec3.svg (why?!?) ! Never use Comic Sans 49 50 Actually Courier New en.wikipedia.org/wiki/File:Courier.svg ! Inferior version of Courier ! Still included in Windows 51 Still included en.wikipedia.org/wiki/File:GeorgiaSpecimenAIB.svg with Windows ! Decent if over-used serif 52 Still included with Windows 53 Still included in Windows en.wikipedia.org/wiki/File:Times_New_Roman-sample.svg ! OK for print; horrible for screens 54 55 Still included in Windows en.wikipedia.org/wiki/File:TrebuchetMS_SP.svg ! 56 Still included in Windows en.wikipedia.org/wiki/File:VerdanaSpecimen.svg 57 Still included in Windows en.wikipedia.org/wiki/File:Webdings-big.png 58 Microsoft ClearType Font Collection 59 Introduced with: ! » Windows Vista » Office 2007 for Windows » Office 2008 for Mac OS X 60 Default body type face in Word, Excel, PowerPoint, & Outlook since Office 2007 61 Default header type face in Word, Excel, PowerPoint, & Outlook since Office 2007 62 63 Monospaced font ! Licensed by Bare Bones as the default in BBEdit 64 65 66 Font Properties 67 font-size" ! line-height" ! font-style" ! font-variant" ! font-weight" ! font-family 68 font-size 69 Specify size using ! <absolute-size>" <relative-size>" <length>" <percentage> 70 <absolute-size> Scaling Factor HTML hx xx-large 2/1 h1 x-large 3/2 h2 large 6/5 h3 medium 1 h4 small 8/9 h5 x-small 3/4 xx-small 3/5 h6 71 <relative-size>" ! larger" smaller 72 <length>" Fixed size measured in units that are » Font-relative » Viewport-percentage » Absolute 73 Originally width of capital M em Now the point size of the font x-height of font ex 1ex ≈ 0.5em ch Width of 0 (zero) “root em” rem Font-size of root element 74 vh 1/100th of the viewport’s height vw 1/100th of the viewport’s width 1/100th of the minimum value vmin between the viewport’s height & width 1/100th of the maximum value vmax between the viewport’s height & width 75 px 96 pixels per inch mm 1 millimeter cm 1 centimeter = 10 mm in 1 inch = 2.54 cm pt 1 point = 1/72 in pc 1 pica = 12 pt 76 <percentage>" Relative to parent’s