CSS Fonts & Formatting Washington University in St. Louis R. Scott Granneman [email protected] www.granneman.com © 2007-2010 R. Scott Granneman Last updated 20100206 You are free to use this work, with certain restrictions. For full licensing information, please see the last slide/page. Saturday, February 5, 2011 1 CSS Reset Saturday, February 5, 2011 2 Each browser set margins & padding & other styles in its own way Saturday, February 5, 2011 3 Reset CSS to make sure everything will be the same on all browsers Saturday, February 5, 2011 4 Caveat: you must set everything explicitly Examples strong {font-weight: bold;} em {font-style: italic;} Saturday, February 5, 2011 5 The Original Saturday, February 5, 2011 6 * { margin: 0; padding: 0; } Saturday, February 5, 2011 7 Yahoo Saturday, February 5, 2011 8 Yahoo User Interface Library YUI2: Reset CSS developer.yahoo.com/yui/reset/ Saturday, February 5, 2011 9 blockquote,body,dd,div,dl,dt,fieldset, form,h1,h2,h3,h4,h5,h6,input,li,ol,p, pre,td,textarea,th,ul { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } Saturday, February 5, 2011 10 fieldset,img { border:0; } address,caption,cite,code,dfn,em, strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } Saturday, February 5, 2011 11 caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } abbr,acronym { border:0; } Saturday, February 5, 2011 12 q:before,q:after { content:''; } Saturday, February 5, 2011 13 An easier way <!-- CSS Reset --> <link rel="stylesheet" type="text/ css" href="http://yui.yahooapis.com/ 2.8.0r4/build/reset/reset-min.css"> (Of course, check YUI2: Reset CSS often to see if the URL has changed) Saturday, February 5, 2011 14 Eric Meyer Saturday, February 5, 2011 15 Eric Meyer CSS Tools: Reset CSS meyerweb.com/eric/tools/css/reset/ Saturday, February 5, 2011 16 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } Saturday, February 5, 2011 17 body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } Saturday, February 5, 2011 18 blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember: define focus styles! */ :focus { outline: 0; } Saturday, February 5, 2011 19 /* remember: highlight inserts! */ ins { text-decoration: none; } del { text-decoration: line-through; } Saturday, February 5, 2011 20 /* tables still need cellspacing="0" */ table { border-collapse: collapse; border-spacing: 0; } Saturday, February 5, 2011 21 An easier way <!-- CSS Reset --> <link rel="stylesheet" type="text/ css" href="http://meyerweb.com/ eric/tools/css/reset/reset.css"> Really, though, you should download it & use it on your server Saturday, February 5, 2011 22 Fonts Saturday, February 5, 2011 23 Types Saturday, February 5, 2011 24 Most basic: Serif Sans-serif Monospaced Saturday, February 5, 2011 25 Adobe Type Classifications http://www.adobe.com/type/ browser/classifications.html Saturday, February 5, 2011 26 Adobe Originals Garalde Oldstyle Blackletter Glyphic Capitals Greek Computer Related Hand-tooled, Inline, Outline, Cyrillic Stencil Decorative & Display Japanese Didone (Modern) Mathematical Expert Collection Monospaced Saturday, February 5, 2011 27 OpenType Pro Slab Serif Opticals Small Caps & Old Ornamentals Style Figures Phonetic Swash Symbol Sans Serif: Grotesque, Neo- Transitional Grotesque, Venetian Oldstyle Geometric and Humanist Script Saturday, February 5, 2011 28 Key font family stacks safalra.com/web-design/ typography/web-safe-fonts-myth/ Saturday, February 5, 2011 29 Sans serif Wide Narrow Verdana Tahoma Geneva Arial DejaVu Sans Helvetica Trebuchet MS !"#$%&$ Saturday, February 5, 2011 30 Serif Wide Narrow Georgia Times New Roman DejaVu Serif Times !"#$%&#%'& !"#$%&" Palatino Saturday, February 5, 2011 31 Monospace Wide Narrow Courier Courier New !"#$"%&$ Andale Mono Monaco Menlo Saturday, February 5, 2011 32 Operating System Defaults Saturday, February 5, 2011 33 Saturday, February 5, 2011 34 Saturday, February 5, 2011 35 Saturday, February 5, 2011 36 “Fonts Supplied with Windows XP” safalra.com/web-design/typography/ windows-xp-supplied-fonts/ “Fonts supplied with Windows XP” www.microsoft.com/typography/ fonts/product.aspx?PID=135 Saturday, February 5, 2011 37 “Fonts Supplied with Windows Vista” safalra.com/web-design/typography/ windows-vista-supplied-fonts/ “Fonts supplied with Windows Vista” www.microsoft.com/typography/ fonts/product.aspx?PID=149 Saturday, February 5, 2011 38 “New Fonts in Windows 7” www.microsoft.com/typography/ fonts/windows7.htm “Fonts supplied with Windows 7” www.microsoft.com/typography/ fonts/product.aspx?PID=161 Saturday, February 5, 2011 39 “Mac OS X 10.4: Fonts list” support.apple.com/kb/HT1538 Saturday, February 5, 2011 40 “Mac OS X 10.5: Fonts list” support.apple.com/kb/HT1642 “Fonts supplied with Mac OS X 10.5 Leopard” www.microsoft.com/typography/ fonts/macosx.htm Saturday, February 5, 2011 41 “OS X 10.6 Snow Leopard font list” www.prepressure.com/fonts/basics/ snow-leopard-fonts/list Saturday, February 5, 2011 42 “Fonts supplied with UNIX / XFree and GhostScript” www.microsoft.com/typography/ fonts/unix.htm Saturday, February 5, 2011 43 Web Browser Defaults Saturday, February 5, 2011 44 OS Browser Sans-serif Serif Mono Times New Courier Arial Roman New Times New Courier Arial Roman New Helvetica Times Courier sans-serif serif monospace Saturday, February 5, 2011 45 OS Browser Standard Fixed-Width Times New Roman Courier New Times Courier Saturday, February 5, 2011 46 Mono/ OS Browser Sans-serif Serif Fixed-Width Times New Courier Arial Roman New Helvetica Times-Roman Courier Saturday, February 5, 2011 47 Saturday, February 5, 2011 48 Saturday, February 5, 2011 49 Saturday, February 5, 2011 50 Microsoft’s Core Fonts for the Web Saturday, February 5, 2011 51 Provided by Microsoft 1996-2002 Still legally available all over the Web & on all Macs Saturday, February 5, 2011 52 Saturday, February 5, 2011 53 Saturday, February 5, 2011 54 Saturday, February 5, 2011 55 Saturday, February 5, 2011 56 Saturday, February 5, 2011 57 Saturday, February 5, 2011 58 Saturday, February 5, 2011 59 Saturday, February 5, 2011 60 Saturday, February 5, 2011 61 Webdings Saturday, February 5, 2011 62 Microsoft ClearType Font Collection Saturday, February 5, 2011 63 Introduced with Windows Vista, O!ce 2007 for Windows, & O!ce 2008 for Mac OS X Saturday, February 5, 2011 64 Saturday, February 5, 2011 65 Saturday, February 5, 2011 66 Saturday, February 5, 2011 67 Saturday, February 5, 2011 68 Saturday, February 5, 2011 69 Saturday, February 5, 2011 70 Other Sources of Fonts Saturday, February 5, 2011 71 Rutter, Richard. “Increase Your Font Stacks With Font Matrix”. 24 Ways (17 December 2007). http:// 24ways.org/2007/increase-your-font- stacks-with-font-matrix. Accessed 2 February 2009. Saturday, February 5, 2011 72 Saturday, February 5, 2011 73 Further Reading Saturday, February 5, 2011 74 “CSS font-family glossary” www.codestyle.org/css/ font-family/Glossary.shtml A nice little illustrated glossary of terms concerning fonts Saturday, February 5, 2011 75 “The Next Big Thing in Online Type” poynter.org/column.asp ?id=47&aid=78683 An early overview & evaluation of Microsoft’s ClearType Font Collection Saturday, February 5, 2011 76 www.typetester.org Choose 3 di"erent fonts & see how they would look on a Web page, allowing for a wide variety of settings Saturday, February 5, 2011 77 CSS Font Properties Saturday, February 5, 2011 78 font-size font-stretch font-style font-variant font-weight font-family Saturday, February 5, 2011 79 font-size Saturday, February 5, 2011 80 Specify size using: <absolute-size> <relative-size> <length> <percentage> inherit Saturday, February 5, 2011 81 <absolute-size> 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 Saturday, February 5, 2011 82 <relative-size> larger smaller Saturday, February 5, 2011 83 <length> Fixed size Relative units Absolute units em in ex cm px mm pt pc Saturday, February 5, 2011 84 <percentage> Relative to parent’s font size 150% 1.5em Saturday, February 5, 2011 85 font-stretch Saturday, February 5, 2011 86 Condensed Normal face of a font Expanded} Saturday, February 5, 2011 87 Saturday, February 5, 2011 88 Ultra Condensed Extra Condensed Condensed Semi Condensed Values: Normal Semi Expanded Expanded Extra Expanded Ultra Expanded Saturday, February 5, 2011 89 font-style Saturday, February 5, 2011 90 normal N a italic Cursive oblique Sloped inherit Saturday, February 5, 2011 91 font-variant Saturday, February 5, 2011 92 normal Scott Granneman small-caps SCOTT GRANNEMAN inherit Saturday, February 5, 2011 93 font-weight Saturday, February 5, 2011 94 Possible values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit Saturday, February 5, 2011 95 100 Thin 200 Extra/Ultra Light 300 Light 400 Normal normal 500 Medium 600 Semi/Demi Bold 700 Bold bold 800 Extra/Ultra Bold 900 Black/Heavy Saturday, February 5, 2011 96 Saturday, February 5, 2011 97 font-family Saturday, February 5, 2011 98 font-family: