CSS Fonts & Formatting—Handouts

CSS Fonts & Formatting

Washington University in St. Louis R. Scott Granneman [email protected] www.granneman.com

CSS Reset

Each browser set margins & padding & other styles in its own way

3 Saturday, February 5, 2011 Reset CSS to make sure everything will be the same on all browsers

Caveat: you must set everything explicitly

Examples strong {font-weight: bold;} em {font-style: italic;}

The Original

6 Saturday, February 5, 2011 * { margin: 0; padding: 0; }

Yahoo

Yahoo User Interface Library YUI2: Reset CSS developer.yahoo.com/yui/reset/

9 Saturday, February 5, 2011 blockquote,body,dd,div,dl,dt,ﬁeldset, 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; } 10

ﬁeldset,img { border:0; } address,caption,cite,code,dfn,em, strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } 11

caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } abbr,acronym { border:0; } 12 Saturday, February 5, 2011 q:before,q:after { content:''; }

An easier way (Of course, check YUI2: Reset CSS often to see if the URL has changed)

Eric Meyer

15 Saturday, February 5, 2011 Eric Meyer CSS Tools: Reset CSS meyerweb.com/eric/tools/css/reset/

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, ﬁeldset, 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; } 17

body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; }

18 Saturday, February 5, 2011 blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember: deﬁne focus styles! */ :focus { outline: 0; }

/* remember: highlight inserts! */ ins { text-decoration: none; } del { text-decoration: line-through; }

/* tables still need cellspacing="0" */ table { border-collapse: collapse; border-spacing: 0; }

21 Saturday, February 5, 2011 An easier way Really, though, you should download it & use it on your server

Fonts

Types

24 Saturday, February 5, 2011 Most basic: Serif Sans-serif Monospaced

Adobe Type Classiﬁcations http://www.adobe.com/type/ browser/classiﬁcations.html

Adobe Originals Garalde Oldstyle Blackletter Glyphic Capitals Greek Computer Related Hand-tooled, Cyrillic Inline, Outline, Stencil Decorative & Display Japanese Mathematical Didone (Modern) Expert Collection Monospaced 27 Saturday, February 5, 2011 OpenType Pro Slab Serif Opticals Small Caps & Old Ornamentals Style Figures Phonetic Swash Sans Serif: Symbol Grotesque, Neo- Transitional Grotesque, Venetian Oldstyle Geometric and Humanist Script 28

Key font family stacks safalra.com/web-design/ typography/web-safe-fonts-myth/

Sans serif

Wide Narrow

Verdana Tahoma

Geneva Arial

DejaVu Sans Helvetica

Trebuchet MS !"#$%&$ 30 Saturday, February 5, 2011 Serif

Wide Narrow

Georgia Times New Roman

DejaVu Serif Times

!"#$%&#%'& !"#$%&"

Palatino 31

Monospace

Wide Narrow

Courier Courier New

!"#$"%&$ Andale Mono

Monaco Menlo

Operating System Defaults

33 Saturday, February 5, 2011 34

36 Saturday, February 5, 2011 “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

“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

“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

39 Saturday, February 5, 2011 “Mac OS X 10.4: Fonts list” support.apple.com/kb/HT1538

“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

“OS X 10.6 Snow Leopard font list” www.prepressure.com/fonts/basics/ snow-leopard-fonts/list

42 Saturday, February 5, 2011 “Fonts supplied with UNIX / XFree and GhostScript” www.microsoft.com/typography/ fonts/unix.htm

Web Browser Defaults

OS Browser Sans-serif Serif Mono

Times New Courier Arial Roman New

Helvetica Times Courier

sans-serif serif monospace 45 Saturday, February 5, 2011 OS Browser Standard Fixed-Width

Times New Roman Courier New

Times Courier

Mono/ OS Browser Sans-serif Serif Fixed-Width

Times New Courier Arial Roman New

Helvetica Times-Roman Courier

48 Saturday, February 5, 2011 49

Microsoft’s Core Fonts for the Web

51 Saturday, February 5, 2011 Provided by Microsoft 1996-2002 Still legally available all over the Web & on all Macs

54 Saturday, February 5, 2011 55

57 Saturday, February 5, 2011 58

60 Saturday, February 5, 2011 61

Webdings

Microsoft ClearType Font Collection

63 Saturday, February 5, 2011 Introduced with Windows Vista, O!ce 2007 for Windows, & O!ce 2008 for Mac OS X

66 Saturday, February 5, 2011 67

69 Saturday, February 5, 2011 70

Other Sources of Fonts

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.

72 Saturday, February 5, 2011 73

The best of Laurel & Hardy.

CSS span.amp { font-family: "Goudy Old Style", Palatino, "Book Antiqua", serif; font-style: italic; font-size: 110%; } 172

Others

173

HTML

' Multiplication ′ ×

… Ellipses … …

& Ampersand & &

174 Saturday, February 5, 2011 Typography

175

Measure

176

Length of a line should be pleasing to the eye & facilitate reading

177 Saturday, February 5, 2011 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.

179

180 Saturday, February 5, 2011 Shoot for between 40-80 characters, including spaces ~ 65 characters is ideal

181

Leading

182

Leading: space between lines of type Very important for readability

183 Saturday, February 5, 2011 The longer the measure, the more leading is needed The larger the font, the less leading is needed

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.

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. 186 Saturday, February 5, 2011 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.

187

Rough rule of thumb: set leading 1.3 times your font size

188

* { font-family: Helvetica, sans-serif; font-size: 12px; line-height: 16px; }

189 Saturday, February 5, 2011 Baseline Grid

190

Scale

191

10 11 12

14 16 18 21 24 36 48

60 72

192 Saturday, February 5, 2011 Drop Caps

193

Free

194

HTML

Lorem ipsum …

195 Saturday, February 5, 2011 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; }

196

Results

197

OR, use :ﬁrst-letter

198 Saturday, February 5, 2011 HTML

Lorem ipsum …

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; }

200

Results

201 Saturday, February 5, 2011 Boxed

202

HTML

Lorem ipsum …

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; } 204 Saturday, February 5, 2011 Results

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; } 206

OR, use :ﬁrst-letter

207 Saturday, February 5, 2011 HTML

Lorem ipsum …

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; } 209

Hanging Punctuation

210 Saturday, February 5, 2011 211

212

HTML

“Text goes here.” CSS blockquote, blockquote p {text- indent: -0.5em;}
213 Saturday, February 5, 2011
214
Terms
215
Abbreviation A shortened form of a word or phrase used to represent the complete form
216 Saturday, February 5, 2011 Mass. Massachusetts USMC United States Marine Corps.
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)
218
WAC Women’s Army Corps FUBAR Fucked Up Beyond All Relief GIF Graphic Interchange Format WASP White Anglo Saxon Protestant
219 Saturday, February 5, 2011 radar radio detecting and ranging sysadmin systems administrator
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
221
IRS Internal Revenue Service TNT trinitrotoluene ESP extrasensory perception FBI Federal Bureau of Investigation BBC, CIA 222 Saturday, February 5, 2011 Initialisms
Acronyms Abbreviations
223
W3C
224
HTML 4.01 Spec, Section 9.2.1 Source: http://www.w3.org/TR/html4/struct/ “The ABBR and ACRONYM elements text.html#h-9.2.1 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.’” 225 Saturday, February 5, 2011 Note that the W3C spec confuses the di"erence between acronyms and initialisms (which are actually abbreviations)
226
227
WWW CSS HTML Eur
228 Saturday, February 5, 2011 IE 6 IE 7 Ffox 2 Ffox 3
Safari 3 Chrome Opera 9
229
If you have to worry about IE 6, your CSS won’t work, since isn’t recognized
So use (Kind of)
230
231 Saturday, February 5, 2011 WAC Commintern NATO
232
IE 6 IE 7 Ffox 2 Ffox 3
Safari 3 Chrome Opera 9
233
is gone in HTML5, so you’re now supposed to use everywhere
234 Saturday, February 5, 2011
235
Rangelands deja vu
236
CSS
237 Saturday, February 5, 2011 abbr, acronym, dfn {border-bottom: 1px dotted #000; cursor: help;}
238
Aural CSS acronym {speak : normal;} abbr.initialism {speak : spell-out;} abbr.truncation {speak : normal;}
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)
240 Saturday, February 5, 2011 1st time you use , , & , you should provide a title attribute & style it with CSS What about subsequent times?
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!
242
Bonus Round
243 Saturday, February 5, 2011 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 244
Sources
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. 246 Saturday, February 5, 2011 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/.
247
Weakley, Russ. “Styling abbreviations, acronyms and definitions”. Webboy. http:// webboy.net/presentation/ abbreviations.cfm.
248
text- transform
249 Saturday, February 5, 2011 Display this to viewers: HEADLINE OF STORY Don’t type it in all caps!
250
What if you want to change it later? Screen readers may read it as an initialism Too much work – be lazy!
251
uppercase
252 Saturday, February 5, 2011 HTML
Sub-head text goes here
CSS .subheadline {text-transform: uppercase;} Viewer sees SUB-HEAD TEXT GOES HERE
253
lowercase
254
HTML
Sub-head text goes here
CSS .subheadline {text-transform: lowercase;} Viewer sees sub-head text goes here
255 Saturday, February 5, 2011 capitalize
256
HTML
Sub-head text goes here
CSS .subheadline {text-transform: capitalize;} Viewer sees Sub-head Text Goes Here
257
Blockquotes
258 Saturday, February 5, 2011 Image Quotation Marks
259
Upload 2 images quote.gif
unquote.gif
260
HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

261 Saturday, February 5, 2011 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; } 262
Results
263
Pullquotes
264 Saturday, February 5, 2011 Simple
265
HTML
...

New Granneman Book

Scott Granneman has a new book out that everyone should buy: Google Apps Deciphered.

...

...
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; } 267 Saturday, February 5, 2011 Results
268
Nicer Header
269
HTML
...

New Granneman Book

Scott Granneman has a new book out that everyone should buy: Google Apps Deciphered.

...

...
270 Saturday, February 5, 2011 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%; } 271
Results
272
Further Reading
273 Saturday, February 5, 2011 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.
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.
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.
276 Saturday, February 5, 2011 Thank you!
Email: [email protected] Web: www.granneman.com Publications: www.granneman.com/pubs Blog: blog.granneman.com Twitter: scottgranneman
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. 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]
279 Saturday, February 5, 2011