beautiful web typography (#4)
DESCRIPTION
The fourth rendition of my Beautiful Web Typography with some updates, additional info, more links and whatnot. Kudos should go out to the chaps listed in the end as well as inspirational peeps like Ellen Lupton, whose categorisation of things type into letter, text, grid I’ve used to structure this talk.TRANSCRIPT
![Page 1: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/1.jpg)
Beautiful WebTypography
Simon Pascal Klein
Letter, text, & page
Version 4
Monday, 30 March 2009
![Page 2: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/2.jpg)
Intro…
Beautiful Web Typography
Monday, 30 March 2009
![Page 3: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/3.jpg)
I’m Pascal Klein.
Beautiful Web Typography
Monday, 30 March 2009
![Page 4: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/4.jpg)
I’m…
a graphic & web designer;1.
a bit of a UI and UX aficionado;2.
and, incurably, a rampant ‘typophile’.3.
Beautiful Web Typography
Monday, 30 March 2009
![Page 5: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/5.jpg)
‘Typophiles’ are über gεεks who
♥ typography.
Hands up and make yourselves known.
Beautiful Web Typography
Monday, 30 March 2009
![Page 6: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/6.jpg)
The intertubes today are
info-heavy.
Much of it is textual.
premise:
Much of it is a pain to read.
Beautiful Web Typography
Monday, 30 March 2009
![Page 7: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/7.jpg)
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.
Beautiful Web Typography
Monday, 30 March 2009
![Page 8: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/8.jpg)
Typography exists to bring order to information
by dividing and organizing — aiding readers in
finding what they are looking for.
Beautiful Web Typography
Monday, 30 March 2009
![Page 9: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/9.jpg)
i.e. make textual stuff look pretty.
☻
Beautiful Web Typography
Monday, 30 March 2009
![Page 10: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/10.jpg)
Assumptions.
Limited to sans-serif only for readability?1.
Only ‘web-safe’ fonts?2.
Limited control—resort to Flash and other
technologies?
3.
It sucks?
Beautiful Web Typography
Monday, 30 March 2009
![Page 11: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/11.jpg)
Beautiful Web Typography
Not quite.(Yay!)
Monday, 30 March 2009
![Page 12: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/12.jpg)
Letter (micro)1.
Text2.
Page or grid (macro)3.
Beautiful Web Typography
Monday, 30 March 2009
![Page 13: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/13.jpg)
Reset0.
All the browsers have their own default styling for
various (x)HTML elements. This makes it a pain for
cross-browser consistency.
Beautiful Web Typography
Monday, 30 March 2009
![Page 14: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/14.jpg)
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,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.
Beautiful Web Typography
Monday, 30 March 2009
![Page 15: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/15.jpg)
Letter & Texttypeface (font) and style•
spacing (tracking/letter-spacing)•
individual glyphs•
Beautiful Web Typography
Monday, 30 March 2009
![Page 16: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/16.jpg)
serifsanserifscript
blacklettermonospace
Beautiful Web Typography
Monday, 30 March 2009
![Page 17: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/17.jpg)
Mixing typefaces requires special attention. Try to
align x-heights and sizes. X-heights?
Beautiful Web Typography
Helvetica Regular 96pt & Minion Pro Regular 96pt.
x-height x-height
Helvetica Regular 96pt & Minion Pro Regular 114pt.
x-height x-heightMonday, 30 March 2009
![Page 18: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/18.jpg)
Use a limited palette of type families. A common
and effective technique is to pair a serif and a
sanserif face together. E.g.:
one sets the body, the other the headings;1.
one sets primary content, the other UI controls.2.
We do this with the font-family property.
Beautiful Web Typography
Monday, 30 March 2009
![Page 19: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/19.jpg)
roman (‘normal’)italicultralight regular bold
& bold italic condensedSMALL-CAPITALS
oblique≠
Beautiful Web Typography
Monday, 30 March 2009
![Page 20: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/20.jpg)
Beautiful Web Typography
ArialVerdanaCourier New
Times New RomanGeorgiaTrebuchet MS
Monday, 30 March 2009
![Page 21: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/21.jpg)
– Jeff Cro
“Typography is not picking a ‘cool’ font.”
Beautiful Web Typography
Monday, 30 March 2009
![Page 22: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/22.jpg)
Options for web fonts:
Installed fonts—mostly web-safe•
sIFR—JS and Flash replacement•
Beautiful Web Typography
Other js—Cufón!http://wiki.github.com/sorccu/cufon/about
•
Monday, 30 March 2009
![Page 23: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/23.jpg)
Monday, 30 March 2009
![Page 24: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/24.jpg)
Font stacks:
desired•
fallback•
Beautiful Web Typography
generic (e.g. serif, sans-serif, monospace)•
Monday, 30 March 2009
![Page 25: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/25.jpg)
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 descrip-
tive values (normal, italic, and oblique).
•
font-variant controls case and accepts the
values normal and small-caps.
•
Beautiful Web Typography
Monday, 30 March 2009
![Page 26: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/26.jpg)
Monday, 30 March 2009
![Page 27: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/27.jpg)
Web Typography 1.1
Letter-spacingLetter-spacingTRACKINGTRACKING
Monday, 30 March 2009
![Page 28: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/28.jpg)
Letʼs see some loose word-spacing in action…
And now both loose word-spacing and tracking featured together.
Beautiful Web Typography
Monday, 30 March 2009
![Page 29: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/29.jpg)
And finally, the recent popular trend of negative tracking.
Beautiful Web Typography
Monday, 30 March 2009
![Page 30: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/30.jpg)
Tracking and word-spacing can help differentiate,
aiding readability by removing disruption.
Examples might include spacing acronyms or
setting numerical tabular data.
Beautiful Web Typography
Monday, 30 March 2009
![Page 31: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/31.jpg)
Full-capital acronyms, along with other full-cap-
sized glyphs can disturb the flow 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.
Beautiful Web Typography
Monday, 30 March 2009
![Page 32: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/32.jpg)
letter-spacing and word-spacing controls
tracking and word-spacing respectively. Both take
numerical values and normal.
•
Sadly no property for controlling figure variants—
hopes set for CSS3. For now use Georgia which
(only) features hanging or ‘old-style’ figures.
Beautiful Web Typography
Monday, 30 March 2009
![Page 33: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/33.jpg)
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 specific
font (i.e. 1 em in a 12 point typeface is 12 point).
Beautiful Web Typography
Monday, 30 March 2009
![Page 34: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/34.jpg)
Why?
Old UAs don’t support font-resizing (Ctrl + +/-) or
page zooming/scaling when measurements are
defined in absolute terms.
The web is increasingly being accessed by a
number of different devices and user agents—be
careful of assumptions.
Beautiful Web Typography
Monday, 30 March 2009
![Page 35: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/35.jpg)
Key: remember font sizes are inherited from
parents → children.
1 ÷ parent font-size × required pixel value= em value
To calculate, find what one pixel is in ems and
then multiply by the desired font size (in pixels):
Beautiful Web Typography
Monday, 30 March 2009
![Page 36: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/36.jpg)
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.
.% trickSimplify your calculations. Consider:
p { font-size: 80%; }blockquote { font-size: 80%; }
Beautiful Web Typography
Monday, 30 March 2009
![Page 37: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/37.jpg)
In 2004 Richard Rutter wrote an article outlining
a trick used to make these calculations simpler:
.% trick (cont’d)
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.
•
Beautiful Web Typography
Monday, 30 March 2009
![Page 38: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/38.jpg)
To find an element’s font size in absolute terms
(e.g. pixels) you can use the Firefox Web Develop
Extension, Information → Display Element
Information.
Beautiful Web Typography
Monday, 30 March 2009
![Page 39: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/39.jpg)
Don’t just arbitrarily set type; use a scale:
Stick it to a scale
6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72.the “classic scale”
9, 10, 11, 12, 13, 14, 18, 24, 36, 48, 64, 72, 96.another scale
8, 13, 21, 34, 55, 89.scale based on the Fibonacci sequence
Beautiful Web Typography
Monday, 30 March 2009
![Page 40: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/40.jpg)
Beautiful Web Typography
At small font sizes text-decoration:
underline; can render descender glyphs (g, j, p,
q, y) difficult to read: use border-bottom: 1px solid;
Monday, 30 March 2009
![Page 41: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/41.jpg)
Correct glyphsConsider:
' "1'61"
Beautiful Web Typography
Monday, 30 March 2009
![Page 42: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/42.jpg)
"is is a group of words surrounded by a bunch of tick marks."
Beautiful Web Typography
Monday, 30 March 2009
![Page 43: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/43.jpg)
“is is a quotation!”- Jeff Cro
Beautiful Web Typography
Monday, 30 March 2009
![Page 44: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/44.jpg)
‘ ’ “ ”’
Beautiful Web Typography
Monday, 30 March 2009
![Page 45: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/45.jpg)
- hyphen Mary-Anne, Dominique Strauss-Kahn
– en dash April–May, ages –, pp. –
— em dash Phrase marker—not spaced—like this.
– minus 5–4=1
Beautiful Web Typography
Monday, 30 March 2009
![Page 46: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/46.jpg)
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
![Page 47: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/47.jpg)
Smartypants et al. are scripts that translates plain
ASCII punctuation characters into “smart”
typographic punctuation HTML entities.
Smartypants et al.Let scripts do the conversion for you.
Beautiful Web Typography
Smartypants (PHP, Perl, & Movable Type);•
Typogrify (Python/Django);•
wp-typogrify (WordPress);•
…•
Monday, 30 March 2009
![Page 48: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/48.jpg)
Giving ampersands some love
& & & &
Beautiful Web Typography
& & & &
Monday, 30 March 2009
![Page 49: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/49.jpg)
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.
Marking paragraphs
Beautiful Web Typography
Monday, 30 March 2009
![Page 50: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/50.jpg)
Beautiful Web Typography
MeasuresThe 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
![Page 51: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/51.jpg)
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
![Page 52: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/52.jpg)
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
![Page 53: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/53.jpg)
Beautiful Web Typography
Hanging punctuationTraditionally 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
![Page 54: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/54.jpg)
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
![Page 55: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/55.jpg)
Beautiful Web Typography
Web: text = UIDistinguish content elements from application controls (e.g. a user’s username and description from a logout link or text-field title).
Often done with colour (i.e. setting controls gray), size (making them smaller) and typefaces.
Monday, 30 March 2009
![Page 56: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/56.jpg)
Beautiful Web Typography
Monday, 30 March 2009
![Page 57: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/57.jpg)
Beautiful Web Typography
Monday, 30 March 2009
![Page 58: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/58.jpg)
Page (grid).
Beautiful Web Typography
Grids bring order to your page and help specify
where things should go and their flow.
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
![Page 59: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/59.jpg)
Beautiful Web Typography
Monday, 30 March 2009
![Page 60: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/60.jpg)
Beautiful Web Typography
Monday, 30 March 2009
![Page 61: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/61.jpg)
Addendum
Beautiful Web Typography
• 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
![Page 62: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/62.jpg)
ISBN: ---
Monday, 30 March 2009
![Page 63: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/63.jpg)
Resources & reading
Beautiful Web Typography
• http://webtypography.net
• http://alistapart.com/topics/design/typography
• http://ilovetypography.com
• http://usabletype.org
Ta.
• http://www.papress.com/other/thinkingwithtype/
Monday, 30 March 2009
![Page 64: Beautiful Web Typography (#4)](https://reader035.vdocuments.mx/reader035/viewer/2022081715/53f14ee98d7f72104c8b4772/html5/thumbnails/64.jpg)
Inspirational type nuts
Beautiful Web Typography
• http://cameronmoll.com
• http://jeffcro.com
• http://markboulton.co.uk
• http://zeldman.com
Monday, 30 March 2009