Web Typography

WEB TYPOGRAPHYPresented by Matthew Buchananauckland web meetup, august af bjjg

With acknowledgement to Jeff Croft, Mark Boulton, Richard Rutter

august af bjjgWEB TYPOGRAPHY auckland web meetup

“The screen is not a place where you want to get fancy with fonts.”

— john gruber, the talk show


TYPOGRAPHic UniTs

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


TYPOGRAPHic UniTs

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


TYPOGRAPHic UniTs

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 problemjeffcroft.com/sidenotes/2007/mar/13/clarifying-comments-i-made-typography-panel-sxsw/

* IE7’s PageZoom circumvents problem

http://jeffcroft.com/sidenotes/2007/mar/13/clarifying-comments-i-made-typography-panel-sxsw/

http://jeffcroft.com/sidenotes/2007/mar/13/clarifying-comments-i-made-typography-panel-sxsw/


TYPOGRAPHic UniTs

“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/

http://www.wilsonminer.com/posts/2007/mar/16/problem-pixels/


TYPOGRAPHic UniTs

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

How big is my text?


TYPOGRAPHic UniTs

* 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 elementswww.clagnut.com/blog/348/

http://www.clagnut.com/blog/348/


TYPOGRAPHic UniTs

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


TYPOGRAPHic UniTs

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


TYPOGRAPHic UniTs

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


TYPOGRAPHic UniTs

wikipedia.org Good measure, approximately 80 characters per line

http://en.wikipedia.org


TYPOGRAPHic UniTs

wikipedia.org Until you do this...

http://en.wikipedia.org


TYPOGRAPHic UniTs

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


TYPOGRAPHic UniTs

kstatecollegian.com, poor leading nytimes.com, good leading

http://www.kstatecollegian.com

http://www.nytimes.com


TYPOGRAPHic UniTs

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


TYPOGRAPHic UniTs

* 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


TYPOGRAPHic TEcHniqUE

“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/

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

http://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/

http://www.alistapart.com/articles/settingtypeontheweb/

http://24ways.org/2006/compose-to-a-vertical-rhythm/

http://robgoodlatte.com/2007/07/31/syncotype-your-baselines/

http://drewish.com/tools/vertical-rhythm/



Example baseline grid from “Setting Type on the Web” by Wilson Mineralistapart.com

http://www.alistapart.com/articles/settingtypeontheweb/



REsOURcEs — TYPOGRAPHic GRids

* “Gridding the 960” by Cameron Moll cameronmoll.com/archives/2006/12/gridding_the_960/

* CSS Grid Calculator www.29digital.net/grid/

* Blueprint CSS Framework by Olav Bjørkøy code.google.com/p/blueprintcss/

http://cameronmoll.com/archives/2006/12/gridding_the_960/

http://www.29digital.net/grid/

http://code.google.com/p/blueprintcss/



29 Digital’s CSS Grid Calculatorwww.29digital.net/grid/

http://www.29digital.net/grid/



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

http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/

http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/

http://www.subtraction.com/archives/2007/0318_oh_yeeaahh.php

http://webtypography.net



Entities

* Some typographic elements you may be familiar with from the web:

' " -



* Those are “primes” and the “hyphen”

* Often used when typographer’s quote marks or a dash would be more appropriate:

‘ ’ “ ” – —



* 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

http://www.cookwood.com/html/extras/entities.html



nAmEd And dEcimAl EnTiTiEs

“ opening double quote “ “ ” closing double quote ” ” ‘ opening single quote ‘ ‘ ’ closing single quote ’ ’ – en dash – – — em dash — — − minus − − × multiplication symbol × × © copyright symbol © © ™ trademark symbol ™ ™ … (horizontal) ellipsis … …



UsEfUl TOOls

* SmartyPants and Textile pluginsdaringfireball.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/

http://daringfireball.net/projects/smartypants/

http://textism.com/tools/textile/

http://code.google.com/p/typogrify/

http://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



“Because proper typographic punctuation looks sharp.”

— john gruber, creator of smartypants



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

http://www.simplebits.com



SimpleBits ampersand: &

span.amp { font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif; }



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



visTA fOnTs & GOOd mATcHEs

Calibri Arial Corbel Myriad Cambria Georgia Candara Verdana Constantia Palatino, Book Antiqua Consolas Andale Mono


TRicks & 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/

http://www.mikeindustries.com/sifr/


TRicks & 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

http://www.shauninman.com/archive/2007/01/03/widont_2_1_wordpress_plugin/

http://www.shauninman.com/archive/2007/01/03/widont_2_1_wordpress_plugin/


THE End

“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

Date post:	27-Jan-2015
Category:	Technology
Upload:	matthew-buchanan
View:	6,210 times
Download:	1 times

Web Typography

Technology