Beautiful Web Typography (#4)

Beautiful Web Typography Letter, text, & page Simon Pascal Klein Version 4 Monday, 30 March 2009

Beautiful Web Typography Intro… Monday, 30 March 2009

Beautiful Web Typography I’m Pascal Klein. Monday, 30 March 2009

Beautiful Web Typography I’m… 1. a graphic & web designer; 2. a bit of a UI and UX aﬁcionado; 3. and, incurably, a rampant ‘typophile’. Monday, 30 March 2009

Beautiful Web Typography ‘Typophiles’ are über gεεks who typography. Hands up and make yourselves known. Monday, 30 March 2009

Beautiful Web Typography premise: The intertubes today are info-heavy. Much of it is textual. Much of it is a pain to read. Monday, 30 March 2009

Beautiful Web Typography ty•pog•ra•phy | tīˈpägrəfē | •n Typography is the art of creating and setting type with the purpose of honoring the text it sets. Monday, 30 March 2009

Beautiful Web Typography Typography exists to bring order to information by dividing and organizing — aiding readers in ﬁnding what they are looking for. Monday, 30 March 2009

Beautiful Web Typography i.e. make textual stuﬀ look pretty. ☻ Monday, 30 March 2009

Beautiful Web Typography Assumptions. It sucks? 1. Limited to sans-serif only for readability? 2. Only ‘web-safe’ fonts? 3. Limited control—resort to Flash and other technologies? Monday, 30 March 2009

Beautiful Web Typography Not quite. (Yay!) Monday, 30 March 2009

Beautiful Web Typography 1. Letter (micro) 2. Text 3. Page or grid (macro) Monday, 30 March 2009

Beautiful Web Typography 0. Reset All the browsers have their own default styling for various (x)HTML elements. This makes it a pain for cross-browser consistency. Monday, 30 March 2009

Beautiful Web Typography body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,in put,textarea,p,blockquote,th,td {margin:0;padding:0;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0;} address,caption,cite,code,dfn,em,strong,th,var {font- style:normal;font-weight:normal;} ol,ul {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} q:before,q:after {content:'';} abbr,acronym {border:0;} Googling “CSS reset stylesheets” should land you with numerous examples. This one above is from the Yahoo! UI library. Monday, 30 March 2009

Beautiful Web Typography Letter & Text • typeface (font) and style • spacing (tracking/letter-spacing) • individual glyphs Monday, 30 March 2009

Beautiful Web Typography serif sanserif script blackletter monospace Monday, 30 March 2009

Beautiful Web Typography Mixing typefaces requires special attention. Try to align x-heights and sizes. X-heights? x-height x-height Helvetica Regular 96pt & Minion Pro Regular 96pt. x-height x-height Helvetica Regular 96pt & Minion Pro Regular 114pt. Monday, 30 March 2009

Beautiful Web Typography Use a limited palette of type families. A common and eﬀective technique is to pair a serif and a sanserif face together. E.g.: 1. one sets the body, the other the headings; 2. one sets primary content, the other UI controls. We do this with the font-family property. Monday, 30 March 2009

Beautiful Web Typography roman (‘normal’) italic ≠ oblique ultralight regular bold & bold italic condensed S MALL - CAPITALS Monday, 30 March 2009

Beautiful Web Typography Arial Verdana Courier New Times New Roman Georgia Trebuchet MS Monday, 30 March 2009

Beautiful Web Typography “Typography is not picking a ‘cool’ font.” – Jeﬀ Cro Monday, 30 March 2009

Beautiful Web Typography Options for web fonts: • Installed fonts—mostly web-safe • sIFR —JS and Flash replacement • Other js—Cufón! http://wiki.github.com/sorccu/cufon/about Monday, 30 March 2009

Monday, 30 March 2009

Beautiful Web Typography Font stacks: • desired • fallback • generic (e.g. serif, sans-serif, monospace) Monday, 30 March 2009

Beautiful Web Typography Use a combination of families, styles, weights and to breath some fresh air into your web type. • font-weight controls weight and accepts numerical and descriptive (e.g. ‘black’) values. • font-style controls… style. Accepts the descriptive values (normal, italic, and oblique). • font-variant controls case and accepts the values normal and small-caps. Monday, 30 March 2009

Monday, 30 March 2009

Web Typography 1.1 TRACKING T RACKING Letter-spacing Letter-spacing Monday, 30 March 2009

Beautiful Web Typography Letʼs see some loose word- spacing in action… And now both loose word-spacing and tracking featured together. Monday, 30 March 2009

Beautiful Web Typography And finally, the recent popular trend of negative tracking. Monday, 30 March 2009

Beautiful Web Typography Tracking and word-spacing can help diﬀerentiate, aiding readability by removing disruption. Examples might include spacing acronyms or setting numerical tabular data. Monday, 30 March 2009

Beautiful Web Typography Full-capital acronyms, along with other full-cap- sized glyphs can disturb the ﬂow of the text. E.g. Lorem ipsum dolor sit amet, NASA consectetur adipiscing et. Vestibulum elit pellentesque habitant orci tristique senectus et 4,962 malesuada fames ac turpis egestas HTML lectus vestibulum aenean; luctus posuere cubilia. Lorem ipsum dolor sit amet, NASA consectetur adipiscing et. Vestibulum elit pellentesque habitant orci tristique senectus et , malesuada fames ac turpis egestas HTML lectus vestibulum aenean; luctus posuere cubilia. Monday, 30 March 2009

Beautiful Web Typography • letter-spacing and word-spacing controls tracking and word-spacing respectively. Both take numerical values and normal. Sadly no property for controlling ﬁgure variants— hopes set for CSS 3. For now use Georgia which (only) features hanging or ‘old-style’ ﬁgures. Monday, 30 March 2009

Beautiful Web Typography • font-size controls… font sizes. Takes numerical and descriptive values. Most user agents (browsers) set default value at 16px. Size font sizes relatively using ems or %. An em is a relative unit best to be thought of as a box. It is relative to the point size of a speciﬁc font (i.e. 1 em in a 12 point typeface is 12 point). Monday, 30 March 2009

Beautiful Web Typography Why? Old UA s don’t support font-resizing (Ctrl + +/-) or page zooming/scaling when measurements are deﬁned in absolute terms. The web is increasingly being accessed by a number of diﬀerent devices and user agents—be careful of assumptions. Monday, 30 March 2009

Beautiful Web Typography Key: remember font sizes are inherited from parents → children. To calculate, ﬁnd what one pixel is in ems and then multiply by the desired font size (in pixels): 1 ÷ parent font-size × required pixel value = em value Monday, 30 March 2009

Beautiful Web Typography .% trick Simplify your calculations. Consider: p { font-size: 80%; } blockquote { font-size: 80%; } 80% of 16px is 12.8px, so p and blockquote elements will be that size, but what happens when we put a p element inside a blockquote element? The parent (blockquote) is 12.8px so the p will be rendered at 80% of that: 10.42px. Monday, 30 March 2009

Beautiful Web Typography .% trick (cont’d) In 2004 Richard Rutter wrote an article outlining a trick used to make these calculations simpler: • browsers have common default size of 16px; thus: • set body to 62.5% and reset all to 10px; thus: • from here calculations are simpler for direct descendants of the body, e.g. 12px = 1.2em; 8px = 0.8em. Further nested elements are (still) relative. Monday, 30 March 2009

Beautiful Web Typography To ﬁnd an element’s font size in absolute terms (e.g. pixels) you can use the Firefox Web Develop Extension, Information → Display Element Information. Monday, 30 March 2009

Beautiful Web Typography Stick it to a scale Don’t just arbitrarily set type; use a scale: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72. the “classic scale” 9, 10, 11, another scale 24,12, 13, 14, 18, 36, 48, 64, 72, 96. 8, 13, 21, 34, 55, scale based on the Fibonacci sequence 89. Monday, 30 March 2009

Beautiful Web Typography At small font sizes text-decoration: underline; can render descender glyphs (g, j, p, q, y) diﬃcult to read: use border-bottom: 1px solid; Monday, 30 March 2009

Beautiful Web Typography Correct glyphs Consider: 1'61quot; ' quot; Monday, 30 March 2009

Beautiful Web Typography quot;is is a group of words surrounded by a bunch of tick marks.quot; Monday, 30 March 2009

Beautiful Web Typography “is is a quotation!” - Jeﬀ Cro Monday, 30 March 2009

Beautiful Web Typography ‘’ “” ’ Monday, 30 March 2009

Beautiful Web Typography - hyphen Mary-Anne, Dominique Strauss-Kahn – en dash April–May, ages –, pp. – — em dash Phrase marker—not spaced—like this. – minus 5–4=1 Monday, 30 March 2009

Beautiful Web Typography “ opening double quote “ ” closing double quote ” ‘ opening single quote ‘ ’ closing single quote ’ – en dash – — em dash — − minus − × multiplication × … ellipsis … Monday, 30 March 2009

Beautiful Web Typography Smartypants et al. Let scripts do the conversion for you. Smartypants et al. are scripts that translates plain ASCII punctuation characters into “smart” typographic punctuation HTML entities. • Smartypants (PHP , Perl, & Movable Type); • Typogrify (Python/Django); • wp-typogrify (WordPress); • … Monday, 30 March 2009

Beautiful Web Typography Giving ampersands some love &&&& &&&& Monday, 30 March 2009

Beautiful Web Typography Marking paragraphs Don’t be afraid to mark new paragraphs with indents, outdents, a plain white-line, a pilcrow (¶) or other ornament, drop cap and/or headers. Monday, 30 March 2009

Beautiful Web Typography Measures The measure is the length of a single line. It is important to select a good measure for running text. Do this with the width property. Ideally these should be relative to the font size, such that the type scales proportionately to the measure; use ems or percentages. Monday, 30 March 2009

Beautiful Web Typography Measures (cont’d) An apt measure for running text ranges from about 45-75 characters for serif type set in a single column on a page (print). On the web, type generally benefits from a smaller measure. Generally use flush-left (text-align: left;) for running text, particularly when set in a narrow measure. Justification can work at ample measures and better with serif typefaces. Monday, 30 March 2009

Beautiful Web Typography Leading (line-height) Don’t forget to set an ample leading for running text! Done using the line-height property and you can use a unit-less number (e.g. 1.5 which acts as a multiplier of the font size); Leading spans from baseline to baseline… and I need some more text to illustrate the point. :) Monday, 30 March 2009

Beautiful Web Typography Hanging punctuation Traditionally punctuation marks, bullets, lists, hyphens, and brackets all hang in the margin. “Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer a odio. Vivamus placerat felis id risus. Cras mollis est. Suspendisse molestie imperdiet libero. Etiam mollis libero vulputate lorem nullam ut leo. Etiam (at turpis non massa rhoncus sodales.)” Monday, 30 March 2009

Beautiful Web Typography Hanging punctuation (cont’d) Easily done with lists by just setting their margins to zero. Possible for opening punctuation marks using background-image or a negative text-indent. CSS3 will hopefully support hanging punctuation with the proposed hanging-punctuation property. → http://www.w3.org/TR/css3-text/#hanging-punctuation Monday, 30 March 2009

Beautiful Web Typography Web: text = UI Distinguish content elements from application controls (e.g. a user’s username and description from a logout link or text-ﬁeld title). Often done with colour (i.e. setting controls gray), size (making them smaller) and typefaces. Monday, 30 March 2009

Beautiful Web Typography Monday, 30 March 2009

Beautiful Web Typography Page (grid). Grids bring order to your page and help specify where things should go and their ﬂow. Remember to put in apt “gutters” (margins between columns) to separate your columns particularly when neighbouring columns hold running text. Ruler guides help enormously: use the Web Developer extension for Firefox or ruler background images. Also see the YUI library. Monday, 30 March 2009

Beautiful Web Typography Monday, 30 March 2009

Beautiful Web Typography Addendum • Please don’t use Comic Sans unless you have a very, very good reason. • For the free desktop: stick fonts into ~/.fonts and to reload your font cache: fc-cache -fv Monday, 30 March 2009

ISBN : --- Monday, 30 March 2009

Beautiful Web Typography Resources & reading • http://webtypography.net • http://alistapart.com/topics/design/typography • http://usabletype.org • http://ilovetypography.com • http://www.papress.com/other/thinkingwithtype/ Ta. Monday, 30 March 2009

Beautiful Web Typography Inspirational type nuts • http://cameronmoll.com • http://jeﬀcro.com • http://zeldman.com • http://markboulton.co.uk Monday, 30 March 2009

http://danielmiessler.com	70
http://staff.washington.edu	40
http://www.slideshare.net	36
http://www.telematheia.net	34
http://www.sundog.net	27
http://dmiessler.com	15
http://www.polano.eu	13
http://www.sundoginteractive.com	12
http://syringawest.com	6
http://randomtestblogtest.blogspot.com	2
http://telematheia.net	1
http://dev.sundoginteractive.com	1

Beautiful Web Typography (#4)

by Pascal Klein on Mar 30, 2009

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 257

Statistics

Beautiful Web Typography (#4) Presentation Transcript