The em * An em is the distance between baselines when type is set solid (ie, with no leading) * Relative unit equivalent to type size * Generally treated as a square entity * An en is half the width of an em
In CSS, the em square is set using the font-size property * Can be set in a variety of units: Absolute (pixels) Relative (ems, percentages) * Absolute sizes do not rely on inheritance * Type with size specified in pixels cannot be resized using browser controls in IE6 or below
Which is better? * Pixel sizing better for maths * Em sizing more flexible as margins grow as text size increases * Sizing text in pixels is an IE problem, not a CSS problem jeffcroft.com/sidenotes/2007/mar/13/clarifying- comments-i-made-typography-panel-sxsw/ * IE7’s PageZoom circumvents problem
“As IE7 takes over more and more of the IE/ Win browser share, the decision to avoid pixel sizing becomes less and less of a sealed tomb.” www.wilsonminer.com/posts/2007/mar/16/problem-pixels/
* Relative sizes are based on the current font size: Either browser default (16 pixels); or Inherited value from parent element Example of nested relative sizing p { font-size: 120%; } strong { font-size: 120%; } <p><strong>How big is my text?</strong></p>
* Richard Rutter suggests resetting browser default font size to 10px using percentages body { font-size: 62.5%; } * Then size text in relative units from that base: eg, 1.2em or 120% to obtain 12px * Downside: inheritance means more complex calculations required for nested elements www.clagnut.com/blog/348/
The Measure * The measure is the length of a single line of text * Choosing an appropriate measure for text blocks is important for maintaining readability
In CSS, the measure is specified using one of the width properties * It is ideal to set the measure in ems, so it is directly proportional to the size of the type * Maintains a consistent number of characters/ words per line even when font size is scaled * Use min-width and max-width to constrain the measure within larger parent elements
* 45 – 75 characters (30 – 50 ems) per line is generally considered optimal for readability example of measure sized with ems #wrap { width: 40em; min-width: 300px; max-width: 500px; }
Leading * Leading is the distance between baselines of type * Originates from traditional typesetting methods, use of lead strips to separate type * Establishing a vertical rhythm and appropriate leading improves overall appearance and readability * Single easiest way to make your page look more professional
In CSS, leading is specified using the line-height property * Can be specified in absolute or relative units * Better to provide a unitless value to ensure line-height scales when text is resized p { line-height: 1.5; }
* Calculate line-height as rhythm (or baseline) divided by text size 16 ÷ 11 = 1.455 * Body copy generally benefits from positive leading, while browser default is to set solid * Sans-serif faces, heavier faces and longer measures require more lead
“The density of texture in a written or typeset page is referred to as its color. This has nothing to do with red or green ink; it refers only to the darkness or blackness of the letterform in mass… evenness of color is the typographer’s normal aim.” — robert bringhurst, the elements of typographic style
Baseline grids * Establish a typographic grid as part of your design * Select an appropriate baseline value, generally matching the line-height of your body copy * Derive margins and leading for other elements as multiples of this baseline value * Image dimensions can be made to fit the grid also * An admirable goal, but not always achievable
Example of a baseline grid * 11-pixel body text with 16 pixels of leading (11/16) * Headings at 24/32 * Sub-headings at 13/16 with 8 pixels of margin above and below * Sidebar copy at 10/16 * Paragraphs and lists with 8 pixel margin below
resetting browser defaults * Reset all browser margins/padding to zero * Breaks dependence on defaults and creates “perfect knowledge” about your styles * “Reset Reloaded” by Eric Meyer meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ * YUI (Yahoo! User Interface) Reset developer.yahoo.com/yui/reset/
resources — baseline grids * “Setting Type on the Web” by Wilson Miner www.alistapart.com/articles/settingtypeontheweb/ * “Compose to a Vertical Rhythm” by Richard Rutter 24ways.org/2006/compose-to-a-vertical-rhythm/ * Syncotype by Rob Goodlatte robgoodlatte.com/2007/07/31/syncotype-your-baselines/ * Vertical Rhythm Calculator drewish.com/tools/vertical-rhythm/
resources — further reading * Read Mark Boulton, Khoi Vinh et al for more on horizontal and vertical rhythm: www.markboulton.co.uk/journal/comments/five_ simple_steps_to_designing_grid_systems_part_1/ www.subtraction.com/archives/2007/0318_oh_yeeaahh.php webtypography.net
* Examples: “Quoted text” 6' 10" 6:00–7:00am Phrase break – with spaces—or without Catherine Zeta-Jones 10−2=8 * Convention changing as resolution increases * Use the correct entity notation where possible www.cookwood.com/html/extras/entities.html * Work best with UTF-8 page encoding
useful tools * SmartyPants and Textile plugins daringfireball.net/projects/smartypants/ textism.com/tools/textile/ * Typogrify for Django code.google.com/p/typogrify/ * “The trouble with EM ’n EN” by Peter K Sheerin www.alistapart.com/articles/emen/
from the smartypants manual * Straight quotes ( " and ' ) into “curly” quote HTML entities * Backticks-style quotes ( `` like this ' ' ) into “curly” quote HTML entities * Dashes ( -- and --- ) into en- and em-dash entities * Three consecutive dots ( ... ) into an ellipsis entity
Ampersands * Elements of Typographic Style 5.1.3: “In heads and titles, use the best available ampersand.” * SimpleBits specifies italic versions of Baskerville, Goudy Old Style, Palatino and Book Antiqua www.simplebits.com
Typefaces * Client-side rendering means fonts must be installed on target computer for HTML pages * Common web faces are designed for the medium * Make deliberate choices for your defaults * Specify common system fonts such as Helvetica Neue (comes with OS X)
common issues * Font stacks only specify a single size for all faces * Arial and Verdana not a good typographic match * The default font stack from applications such as Dreamweaver includes both Arial Verdana Arial is visually more compact than Verdana
new options — vista fonts * New fonts included with Windows Vista OS * Ligatures, lining figures * Size issues, better match with Arial than Verdana * Tuned for ClearType, look awful without anti-aliasing
treats * Negative text indent – image replacement technique by Mike Rundle, based on an idea by Todd Fahrner h1 { text-indent: -999em; overflow: hidden; } * sIFR for headings – unobtrusive JavaScript Flash replacement technique by Mike Davidson and Mark Wubben, based on an idea by Shaun Inman www.mikeindustries.com/sifr/
treats * Widon’t plugin by Shaun Inman for WordPress, TextPattern, Joomla, even SlideShowPro! www.shauninman.com/archive/2007/01/03/ widont_2_1_wordpress_plugin/ * Use color: #333; for dark text on a light background and color: #ccc; for light text on a dark background * Don’t justify without reason until support for automatic hyphenation and resolution-independence improves
“95% of information on the web is written language. It is only logical … that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.” — oliver reichenstein
matthewbuchanan
securecat
thebogheart
yasuhiroyokota
amitnk
zozodevelopers
ashapiro
okabemy
mixi_design
sms_tech
xuechunwu
caraguatatuba
oguemon
chriscoyier
lemiorhan
destraynor
lara
cassininazir
3n
philhawksworth
hannesfritz
csswizardry
afnizarnur
lauravandoore
