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 (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 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:
Saturday, February 5, 2011 81
Saturday, February 5, 2011 82
Saturday, February 5, 2011 83
Relative units Absolute units
em in
ex cm
px mm
pt
pc
Saturday, February 5, 2011 84
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:
Saturday, February 5, 2011 99 family-name Arial Helvetica DejaVu Sans Times New Roman
Saturday, February 5, 2011 100 generic-family serif sans-serif cursive fantasy monospace
Saturday, February 5, 2011 101 Serif
Georgia Times New Roman
DejaVu Serif Times
!"#$%&#%'& !"#$%&"
Palatino
Saturday, February 5, 2011 102 Sans serif
Verdana Tahoma
Geneva Arial
DejaVu Sans Helvetica
Trebuchet MS !"#$%&$
Saturday, February 5, 2011 103 Cursive
Bradley Hand ! Lucida Corsiva Calligraphy School House Handwriting Cursive
Apple Chancery Edwardian Script
Saturday, February 5, 2011 104 Fantasy
Desdemona Marker Felt
Playbill Lucida Blackletter
Herculanum Jazz
Party Onyx
Saturday, February 5, 2011 105 Monospace
Courier Courier New
!"#$"%&$ Andale Mono
Monaco Menlo
Saturday, February 5, 2011 106 Of course, you want to specify several fonts using font stacks
Saturday, February 5, 2011 107 CSS Font Stacks
Saturday, February 5, 2011 108 font-family: “DejaVu Serif”, Constantia, Georgia, Times, serif;
Saturday, February 5, 2011 109 The order: Ideal Alternative Common Generic
Saturday, February 5, 2011 110 Suggestions for Headers
Saturday, February 5, 2011 111 Serif
Saturday, February 5, 2011 112 Baskerville, Times, Times New Roman, serif Cambria, Georgia, Times, Times New Roman, serif Garamond, Hoefler Text, Palatino, Palatino Linotype, serif Georgia, Times, Times New Roman, serif Palatino, Palatino Linotype, Hoefler Text, Times, Times New Roman, serif
Saturday, February 5, 2011 113 Sans-serif
Saturday, February 5, 2011 114 Arial, Helvetica Neue, Helvetica, sans-serif Century Gothic, Apple Gothic, sans- serif Franklin Gothic Medium, Arial Narrow Bold, Arial, sans-serif Futura, Century Gothic, AppleGothic, sans-serif Geneva, Verdana, Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans- serif
Saturday, February 5, 2011 115 GillSans, Trebuchet, Calibri, sans- serif Helvetica, Helvetica Neue, Arial, sans-serif Impact, Haettenschweiler, Arial Narrow Bold, sans-serif Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif Trebuchet, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial, sans-serif
Saturday, February 5, 2011 116 Suggestions for Body Copy
Saturday, February 5, 2011 117 Serif
Saturday, February 5, 2011 118 Baskerville, Times New Roman, Times, serif Cambria, Georgia, Times, Times New Roman, serif Copperplate Light, Copperplate Gothic Light, serif Garamond, Hoefler Text, Times New Roman, Times, serif Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif
Saturday, February 5, 2011 119 Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif Times, Times New Roman, Georgia, serif
Saturday, February 5, 2011 120 Sans-serif
Saturday, February 5, 2011 121 Arial, Helvetica Neue, Helvetica, sans-serif Century Gothic, Apple Gothic, sans- serif Franklin Gothic Medium, Arial Narrow Bold, Arial, sans-serif Futura, Century Gothic, AppleGothic, sans-serif Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans- serif
Saturday, February 5, 2011 122 GillSans, Calibri, Trebuchet, sans- serif Helvetica Neue, Arial, Helvetica, sans-serif Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif Trebuchet, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial, sans-serif Verdana, Geneva, Tahoma, sans-serif
Saturday, February 5, 2011 123 Recommended by Richard Rutter & Mark Boulton Frutiger, Univers, Helvetica Neue, Arial, Helvetica, sans-serif
Saturday, February 5, 2011 124 Recommended
Saturday, February 5, 2011 125 font-family: "DejaVu Sans", "Lucida Grande", Calibri, Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; DejaVu Sans = Linux Lucida Grande = Mac OS X Calibri = Windows Vista & O!ce 2007 Verdana & Arial = Core Fonts Geneva = Mac OS Lucida = Helvetica = Mac OS, Linux, UNIX
Saturday, February 5, 2011 126 font-family: "DejaVu Serif", Baskerville, Cambria, Georgia, "Times New Roman", Times, serif; DejaVu Serif = Linux Baskerville = Mac OS X Cambria = Windows Vista & O!ce 2007 Georgia = Core Fonts Times New Roman = Times =
Saturday, February 5, 2011 127 font-family: "DejaVu Sans Mono", Monaco, Consolas, "Andale Mono", "Courier New", Courier, monospace; DejaVu Sans Mono = Linux Monaco = Mac OS X Consolas = Windows Vista & O!ce 2007 Andale Mono = Core Fonts Courier New = Courier =
Saturday, February 5, 2011 128 Further Reading
Saturday, February 5, 2011 129 Grannell, Craig. “Fonts for web design: a primer”. Dev.Opera (3 July 2008). http://dev.opera.com/articles/ view/fonts-for-web-design-a-primer/. Accessed 2 February 2009. An excellent overview of various fonts & their best uses on websites.
Saturday, February 5, 2011 130 Embedded Fonts
Saturday, February 5, 2011 131 Wouldn’t it be nice if you could use any font you wanted & visitors could automatically download & use the font?
Saturday, February 5, 2011 132 Formats
Saturday, February 5, 2011 133 EOT Embedded OpenType Designed by Microsoft for embedding on web pages DRM used to prevent fonts from being copied & used without a license Submitted to W3 for consideration
Saturday, February 5, 2011 134 TTF TrueType Fonts Font standard released by Apple in 1991 Standard on Mac OS X & Windows On the Web, simply link to TTF file
Saturday, February 5, 2011 135 OTF Open Type Fonts Developed by Microsoft & Adobe & now an open standard as of 2007 called Open Font Format On the Web, simply link to OTF file
Saturday, February 5, 2011 136 WOFF Web Open Font Format Developed during 2009 Wrapper containing fonts in various formats (TrueType, OpenType, or Open Font) encoded with ZIP compression “Strong favorite” for W3 standardization
Saturday, February 5, 2011 137 SVG Scalable Vector Graphics XML-based file format describing 2D vector graphics, both static & dynamic Open standard developed by W3C since 1999
Saturday, February 5, 2011 138 @font-face
Saturday, February 5, 2011 139 CSS2 introduced @font-face
Saturday, February 5, 2011 140 @font-face { font-family:
Saturday, February 5, 2011 141 src Location of font Can be local or remote
Saturday, February 5, 2011 142 @font-face { font-family: Foobar; src: local(Foobar.ttf); } p { font-family: Foobar, sans-serif; }
Saturday, February 5, 2011 143 @font-face { font-family: Foobar; src: url(http://www.fonts.com/ foobar.ttf); } p { font-family: Foobar, sans-serif; }
Saturday, February 5, 2011 144 @font-face { font-family: Foobar; src: local(Foobar.ttf), url(http:// www.fonts.com/foobar.ttf); } p { font-family: Foobar, sans-serif; }
Saturday, February 5, 2011 145 @font-face#{ font-family:#MyHelvetica; src:#local ("Helvetica#Neue#Bold.ttf"), local("HelveticaNeue-Bold.ttf"), url("http://www.foobar.com/ MgOpenModernaBold.ttf"); }
Saturday, February 5, 2011 146 Browser Support
Saturday, February 5, 2011 147 EOT 4
TTF 3.5 3.1 4.0 10.0
OTF 3.5 3.1 10.0
WOFF 9 3.6 6? 5 12?
SVG 3.1 4.0 10.0
Saturday, February 5, 2011 148 Licensing
Saturday, February 5, 2011 149 Problem: Unauthorized copying
Saturday, February 5, 2011 150 Fonts available for @font-face embedding http://www.webfonts.info/wiki/ index.php?title=Fonts_available_ for_%40font-face_embedding
Saturday, February 5, 2011 151 Anivers
Fertigo Pro
Saturday, February 5, 2011 152 Liberation Goudy Bookletter 1911
Saturday, February 5, 2011 153 League Gothic
Saturday, February 5, 2011 154 Heuristica Tallys Junction
Saturday, February 5, 2011 155 Further Reading
Saturday, February 5, 2011 156 W3C: CSS Fonts Module Level 3 http://www.w3.org/TR/ css3-webfonts/
Saturday, February 5, 2011 157 Specific Punctuation
Saturday, February 5, 2011 158 Quotation Marks & Apostrophes
Saturday, February 5, 2011 159 These are primes, not an apostrophe or a quotation mark
Saturday, February 5, 2011 160 How to use primes correctly
Saturday, February 5, 2011 161 How to use primes incorrectly " '
Saturday, February 5, 2011 162 Correct quotation marks & apostrophes
Saturday, February 5, 2011 163 HTML
$ ʹ!! Single Prime ′ ′ ʺ ʺ!" Double Prime ″ ″ “ "!“ Opening double quote “ “ ” #!” Closing double quote ” ” ‘ $!‘ Opening single quote ‘ ‘ ’ %!’ Closing single quote ’ ’
Saturday, February 5, 2011 164 Hyphens, Dashes, & More
Saturday, February 5, 2011 165 Saturday, February 5, 2011 166 HTML
% Hyphen % %
– En dash – –
— Em dash — —
& Minus − −
Saturday, February 5, 2011 167 Ampersands
Saturday, February 5, 2011 168 & DejaVu Serif & Verdana &!'()*+,)+-, !"#$%&'(& & Times New Roman & Trebuchet MS
Saturday, February 5, 2011 169 & Arial & Georgia & Comic Sans & Helvetica & Palatino & Goudy Old Style
Saturday, February 5, 2011 170 In headers & titles, use fancy ampersands
Elements of Typographic Style by Robert Bringhurst
Saturday, February 5, 2011 171 HTML
The best of Laurel & Hardy.
CSS span.amp { font-family: "Goudy Old Style", Palatino, "Book Antiqua", serif; font-style: italic; font-size: 110%; }Saturday, February 5, 2011 172 Others
Saturday, February 5, 2011 173 HTML
' Multiplication ′ ×
… Ellipses … …
& Ampersand & &
Saturday, February 5, 2011 174 Typography
Saturday, February 5, 2011 175 Measure
Saturday, February 5, 2011 176 Length of a line should be pleasing to the eye & facilitate reading
Saturday, February 5, 2011 177 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Saturday, February 5, 2011 178 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 o!cia deserunt mollit anim id est laborum.
Saturday, February 5, 2011 179 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.
Saturday, February 5, 2011 180 Shoot for between 40-80 characters, including spaces ~ 65 characters is ideal
Saturday, February 5, 2011 181 Leading
Saturday, February 5, 2011 182 Leading: space between lines of type Very important for readability
Saturday, February 5, 2011 183 The longer the measure, the more leading is needed The larger the font, the less leading is needed
Saturday, February 5, 2011 184 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.
Saturday, February 5, 2011 185 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.
Saturday, February 5, 2011 186 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.
Saturday, February 5, 2011 187 Rough rule of thumb: set leading 1.3 times your font size
Saturday, February 5, 2011 188 * { font-family: Helvetica, sans-serif; font-size: 12px; line-height: 16px; }
Saturday, February 5, 2011 189 Baseline Grid
Saturday, February 5, 2011 190 Scale
Saturday, February 5, 2011 191 10 11 12
14 16 18 21 24 36 48
60 72
Saturday, February 5, 2011 192 Drop Caps
Saturday, February 5, 2011 193 Free
Saturday, February 5, 2011 194 HTML
Lorem ipsum …
Lorem ipsum …
Saturday, February 5, 2011 195 CSS .dropcap { margin: 5px 6px 0 0; padding: 2px 5px 0 0; float: left; color: #606060; font-size: 100px; line-height: 70px; font-family: Georgia; }
Saturday, February 5, 2011 196 Results
Saturday, February 5, 2011 197 OR, use :first-letter
Saturday, February 5, 2011 198 HTML
Lorem ipsum …
Lorem ipsum …
Saturday, February 5, 2011 199 CSS #firstPara:first-letter { margin: 5px 6px 0 0; padding: 2px 5px 0 0; float: left; color: #606060; font-size: 100px; line-height: 70px; font-family: Georgia; }
Saturday, February 5, 2011 200 Results
Saturday, February 5, 2011 201 Boxed
Saturday, February 5, 2011 202 HTML
Lorem ipsum …
Lorem ipsum …
Saturday, February 5, 2011 203 CSS .dropcap { margin: 5px 6px 0 0; padding: 2px 5px 2px 0; float: left; color: white; background: khaki; border: 1px solid darkkhaki; font-size: 80px; line-height: 60px; font-family: Georgia; }
Saturday, February 5, 2011 204 Results
Saturday, February 5, 2011 205 Or try this CSS .dropcap { margin: 5px 6px 0 0; padding: 2px 5px 0 0; float: left; background: firebrick; border: 1px solid black; font-size: 80px; line-height: 60px; font-family: Georgia; }
Saturday, February 5, 2011 206 OR, use :first-letter
Saturday, February 5, 2011 207 HTML
Lorem ipsum …
Lorem ipsum …
Saturday, February 5, 2011 208 CSS #firstPara:first-letter { margin: 5px 6px 0 0; padding: 2px 5px 2px 0; float: left; color: white; background: khaki; border: 1px solid darkkhaki; font-size: 80px; line-height: 60px; font-family: Georgia; }
Saturday, February 5, 2011 209 Hanging Punctuation
Saturday, February 5, 2011 210 Saturday, February 5, 2011 211 Saturday, February 5, 2011 212 HTML
“Text goes here.” CSS blockquote, blockquote p {text- indent: -0.5em;}Saturday, February 5, 2011 213
Saturday, February 5, 2011 214 Terms
Saturday, February 5, 2011 215 Abbreviation A shortened form of a word or phrase used to represent the complete form
Saturday, February 5, 2011 216 Mass. Massachusetts USMC United States Marine Corps.
Saturday, February 5, 2011 217 Acronym A word formed either ... ! from the initial letters of a name (letter acronym) ! by combining initial letters or parts of a series of words (syllable acronym)
Saturday, February 5, 2011 218 WAC Women’s Army Corps FUBAR Fucked Up Beyond All Relief GIF Graphic Interchange Format WASP White Anglo Saxon Protestant
Saturday, February 5, 2011 219 radar radio detecting and ranging sysadmin systems administrator
Saturday, February 5, 2011 220 Initialism An abbreviation (not a word) of ! the first letter or letters of words ! syllables or components of a word ! combination of words & syllables Pronounced by spelling out letters one by one rather than as a solid word
Saturday, February 5, 2011 221 IRS Internal Revenue Service TNT trinitrotoluene ESP extrasensory perception FBI Federal Bureau of Investigation BBC, CIA
Saturday, February 5, 2011 222 Initialisms
Acronyms Abbreviations
Saturday, February 5, 2011 223 W3C
Saturday, February 5, 2011 224 HTML 4.01 Spec, Section 9.2.1 “The ABBR and ACRONYM elements allow authors to clearly indicate occurrences of abbreviations and acronyms. Western languages make extensive use of acronyms such as ‘GmbH’, ‘NATO’, & ‘F.B.I.’, as well as abbreviations like ‘M.’, ‘Inc.’, ‘et al.’, ‘etc.’”
Saturday, February 5, 2011 225 Note that the W3C spec confuses the di"erence between acronyms and initialisms (which are actually abbreviations)
Saturday, February 5, 2011 226
Saturday, February 5, 2011 227 WWW CSS HTML Eur
Saturday, February 5, 2011 228 IE 6 IE 7 Ffox 2 Ffox 3
Safari 3 Chrome Opera 9
Saturday, February 5, 2011 229 If you have to worry about IE 6, your CSS won’t work, since isn’t recognized
So use (Kind of)
Saturday, February 5, 2011 230
Saturday, February 5, 2011 231 WAC Commintern NATO
Saturday, February 5, 2011 232 IE 6 IE 7 Ffox 2 Ffox 3
Safari 3 Chrome Opera 9
Saturday, February 5, 2011 233 is gone in HTML5, so you’re now supposed to use everywhere
Saturday, February 5, 2011 234
Saturday, February 5, 2011 235 Rangelands deja vu
Saturday, February 5, 2011 236 CSS
Saturday, February 5, 2011 237 abbr, acronym, dfn {border-bottom: 1px dotted #000; cursor: help;}
Saturday, February 5, 2011 238 Aural CSS acronym {speak : normal;} abbr.initialism {speak : spell-out;} abbr.truncation {speak : normal;}
Saturday, February 5, 2011 239 Print CSS acronym:after {content: " (" attr (title) ")"; } On the website, reader would see: This site offers RSS When printed, reader would see: This site offers RSS (Really Simple Syndication)
Saturday, February 5, 2011 240 1st time you use , , & , you should provide a title attribute & style it with CSS What about subsequent times?
Saturday, February 5, 2011 241 Wrap every occurrence with an element & title & CSS Wrap the 2nd occurrence with an element, without the title, but with CSS Wrap the 2nd occurrence with an element & title, but without CSS Just be consistent!
Saturday, February 5, 2011 242 Bonus Round
Saturday, February 5, 2011 243 Identify these! ADA, ALT, AOL, API, CGI, CMS, CSS, CTRL, DMV, DNS, DTD, EFF, FAQ, FQDN, FSF, FTP, GIF, GNU, GPL, HTML, HTTP, IE, IIRC, IIS, IM, IMAP, IO, JPEG, KB, KDE, LONGDESC, MB, MSDN, MSN, OPML, P2P, PBS, PDF, PONUR, POP3, RSS, SOAP, SSH, SSN, US, VNC, W3C, WYSIWYG, XHTML, XML
Saturday, February 5, 2011 244 Sources
Saturday, February 5, 2011 245 Meadowcroft, Ben. “ vs in the HTML 4 Specification”. http:// www.benmeadowcroft.com/webdev/ articles/abbr-vs-acronym.shtml. Lieberman, Colin. “The Accessibility Hat Trick: Getting Abbreviations Right”. A List Apart (16 January 2006). http://www.alistapart.com/ articles/hattrick.
Saturday, February 5, 2011 246 Pilgrim, Mark. “Day 17: Defining acronyms”. Dive Into Accessibility: 30 days to a more accessible web site. http://diveintoaccessibility.org/ day_17_defining_acronyms.html. Saila, Craig. “HTML is not an acronym...”. Saila.com (1 August 2002). http://www.saila.com/usage/ acronym/.
Saturday, February 5, 2011 247 Weakley, Russ. “Styling abbreviations, acronyms and definitions”. Webboy. http:// webboy.net/presentation/ abbreviations.cfm.
Saturday, February 5, 2011 248 text- transform
Saturday, February 5, 2011 249 Display this to viewers: HEADLINE OF STORY Don’t type it in all caps!
Saturday, February 5, 2011 250 What if you want to change it later? Screen readers may read it as an initialism Too much work – be lazy!
Saturday, February 5, 2011 251 uppercase
Saturday, February 5, 2011 252 HTML
Sub-head text goes here
CSS .subheadline {text-transform: uppercase;} Viewer sees SUB-HEAD TEXT GOES HERESaturday, February 5, 2011 253 lowercase
Saturday, February 5, 2011 254 HTML
Sub-head text goes here
CSS .subheadline {text-transform: lowercase;} Viewer sees sub-head text goes hereSaturday, February 5, 2011 255 capitalize
Saturday, February 5, 2011 256 HTML
Sub-head text goes here
CSS .subheadline {text-transform: capitalize;} Viewer sees Sub-head Text Goes HereSaturday, February 5, 2011 257 Blockquotes
Saturday, February 5, 2011 258 Image Quotation Marks
Saturday, February 5, 2011 259 Upload 2 images quote.gif
unquote.gif
Saturday, February 5, 2011 260 HTML
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Saturday, February 5, 2011 261 CSS blockquote.quote { background: url(quote.gif) no-repeat; background-position: top left; padding-left: 20px; text-align: justify; } p.unquote { background: url(unquote.gif) no-repeat; background-position: bottom right; padding-right: 5px; }
Saturday, February 5, 2011 262 Results
Saturday, February 5, 2011 263 Pullquotes
Saturday, February 5, 2011 264 Simple
Saturday, February 5, 2011 265 HTML
...
New Granneman Book
Scott Granneman has a new book out that everyone should buy: Google Apps Deciphered.
...
...
Saturday, February 5, 2011 266 CSS .pullquote { .pullquote h4 { width: 200px; text-align: background:gold; center; color: black; margin-top: 5px; float: right; } border: 1px solid .pullquote p { maroon; line-height: padding: 5px; 140%; margin: 10px 0 0 } 10px; }
Saturday, February 5, 2011 267 Results
Saturday, February 5, 2011 268 Nicer Header
Saturday, February 5, 2011 269 HTML
...
New Granneman Book
Scott Granneman has a new book out that everyone should buy: Google Apps Deciphered.
...
...
Saturday, February 5, 2011 270 CSS .pullquote { .pullquote h4 { width: 200px; text-align: background:gold; center; color: black; margin: -5px; float: right; background: border: 1px solid maroon; maroon; color: white; padding: 5px; padding: 5px; margin: 10px 0 0 } 10px; .pullquote p { } line-height: 140%; } Saturday, February 5, 2011 271 Results
Saturday, February 5, 2011 272 Further Reading
Saturday, February 5, 2011 273 Butler, Richard. A practical guide to web typography (2008). http:// webtypography.net. Accessed 2 February 2009. An excellent and comprehensive book online covering all aspects of web typography. Full of examples and code.
Saturday, February 5, 2011 274 Sheerin, Peter K. “The Trouble With EM ’n EN (and Other Shady Characters)”. A List Apart (19 October 2001). http://alistapart.com/ articles/emen. Accessed 2 February 2009. An entertaining & informative rant about the right–and wrong!–uses of punctuation on the Web.
Saturday, February 5, 2011 275 Rutter, Richard & Mark Boulton. “Web Typography Sucks”. http:// webtypography.net/sxsw2007/. Accessed 3 February 2009. A PDF of a presentation these two font experts gave at South by Southwest. Full of fascinating, insightful material.
Saturday, February 5, 2011 276 Thank you!
Email: [email protected] Web: www.granneman.com Publications: www.granneman.com/pubs Blog: blog.granneman.com Twitter: scottgranneman
Saturday, February 5, 2011 277 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 278 Licensing of this work
This work is licensed under the Creative Commons Attribution- ShareAlike License.
To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/1.0 or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.
In addition to the rights and restrictions common to all Creative Commons licenses, the Attribution-ShareAlike License features the following key conditions:
Attribution. The licensor permits others to copy, distribute, display, and perform the work. In return, licensees must give the original author credit.
Share Alike. The licensor permits others to distribute derivative works under a license identical to the one that governs the licensor’s work.
Questions? Email [email protected]
Saturday, February 5, 2011 279