Date post: | 27-Jan-2015 |
Category: |
Documents |
Upload: | kdmcberkeley-at-uc-berkeley |
View: | 2,125 times |
Download: | 3 times |
What does it sayabout you?
B Y L E N D E G R O O T
TYPOGRAPHY
& DESIGNTTuesday, October 12, 2010
Anatomy
HlgxBASELINE
Tuesday, October 12, 2010
Anatomy
HlgxCAP HEIGHT
Tuesday, October 12, 2010
Hlgx
Anatomy
ASCENDER
Tuesday, October 12, 2010
Hlgx
Anatomy
DESCENDER
Tuesday, October 12, 2010
Hlgx
Anatomy
X HEIGHT
Tuesday, October 12, 2010
Anatomy
!"#$%&$' The upward vertical stem on some lowercase letters, such as ‘h’ and ‘b’, that extends above the x-height is the ascender.
!($')*'$The aperture is the partially enclosed, somewhat rounded negative space in some characters such as ‘n’, ‘C’, ‘S’, the lower part of ‘e’, or the upper part of a double-storey ‘a’.
!+,"An imaginary line drawn from top to bottom of a glyph bisecting the upper and lower strokes is the axis.
-!"$.,%$The imaginary line upon which the letters in a font appear to rest.
-/0. The curved part of the character that encloses the circular or curved parts (counter) of some letters such as ‘d’, ‘b’, ‘o’, ‘D’, and ‘B’ is the bowl.
-'!#1$)The bracket is a curved or wedge-like connection between the stem and serif of some fonts. Not all serifs are bracketed serifs.
!"#$ %&%!'("Quick Reference
— Basic parts of a typeface
a
Typeface Anatomy
HandgloveryBracket Crossbar
Stem Terminal
Counter
Loop/Lobe
Axis
Link/Neck
Bowl Eye
Aperture
Tail
Descender
SerifShoulder
Ascender
Ear
Overshoot
!"#-$%&'$(
)-$%&'$(
*"+%,&-%
!!!."#$%&'#(.)#* %#++ ",-- .% /// "" "#$%& 012.323.1445
CREDIT: FontShop.com
Tuesday, October 12, 2010
Anatomy
HlgxSERIFS
Tuesday, October 12, 2010
Anatomy
HlgxSANS SERIF
Tuesday, October 12, 2010
Anatomy
HlgxSANS (STYLIZED)
Tuesday, October 12, 2010
Anatomy
HlgxWEIGHT (NORMAL - 400)
p { font-weight: normal}
100, 200, 300, 400, 500, 600, 700, 800, 900
Tuesday, October 12, 2010
Anatomy
HlgxWEIGHT (BOLD - 700)
p { font-weight: bold}
100, 200, 300, 400, 500, 600, 700, 800, 900
Tuesday, October 12, 2010
Anatomy
WEIGHT (OTHER)
p {font-weight: 300;
}
p {font-weight: bolder}p {font-weight: lighter}
100 = thin200 = extra-light300 = light400 = normal, book500 = medium600 = demi-bold700 = bold800 = heavy900 = black
Tuesday, October 12, 2010
Anatomy
STYLE (OBLIQUE)
p {font-style: oblique}
HlgxTuesday, October 12, 2010
Anatomy
STYLE (OBLIQUE)
p {font-style: oblique}
Tuesday, October 12, 2010
Anatomy
HlgxSTYLE (ITALIC)
p {font-style: italic}
Tuesday, October 12, 2010
Hlgx
Readability
LETTER SPACING (KERINING)
Tuesday, October 12, 2010
OVENLETTER SPACING (KERINING)
Readability
Tuesday, October 12, 2010
OVENLETTER SPACING (KERINING)
Readability
Tuesday, October 12, 2010
HlgxLETTER SPACING (TRACKING)
Readability
Tuesday, October 12, 2010
ovenLETTER SPACING (TRACKING)
Readability
Tuesday, October 12, 2010
ovenLETTER SPACING (TRACKING)
Readability
Tuesday, October 12, 2010
ovenLETTER SPACING (TRACKING)
Readability
h1 { letter-spacing: -3px;}
Tuesday, October 12, 2010
Turn off the ovenWORD SPACING
Readability
p { word-spacing: 10px;}
Tuesday, October 12, 2010
Turn off the ovenWORD SPACING
Readability
Turn off the oven
Tuesday, October 12, 2010
Turn off the ovenWORD SPACING
Readability
Turn off the ovenTurn off the ovenp {word-spacing: 10px;}
Tuesday, October 12, 2010
Readability
Turn off the ovenLIGATURES
Tuesday, October 12, 2010
Turn off the ovenLIGATURES
Readability
Tuesday, October 12, 2010
Turn off the ovenLIGATURES
Readability
Turn off the oven
Tuesday, October 12, 2010
MONOSPACED (EM)
Readability
Courier ham
Tuesday, October 12, 2010
SIZE (EM)
Readability
size size size size size size size size.75 1.0 1.25 1.5 2.0 3.0 4.0 5.0
h1 { font-size: 2.5 em;} /* 40px/16=2.5em */
h2 { font-size: 1.875 em;} /* 30px/16=1.875em */
Tuesday, October 12, 2010
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
VERITCAL SPACING (LEADING)
Readability
Tuesday, October 12, 2010
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
VERITCAL SPACING (LEADING)
Readability
FONT: 16 PT LEADING: 16 PT
Tuesday, October 12, 2010
VERITCAL SPACING (LEADING)
Readability
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
FONT: 16 PT LEADING: 16 PT
Tuesday, October 12, 2010
VERITCAL SPACING (LEADING)
Readability
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
FONT: 16 PT LEADING: 16 PT
Tuesday, October 12, 2010
VERITCAL SPACING (LEADING)
Readability
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
FONT: 16 PT LEADING: 20 PT
p { line-height: 1.25;} /* 1 em = 16pt so 1.25 em = 20 pt leading */
Tuesday, October 12, 2010
VERITCAL SPACING (LEADING)
Readability
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
FONT: 16 PT LEADING: 20 PT
p { line-height: 1.25;} /* 1 em = 16pt so 1.25 em = 20 pt leading */
Tuesday, October 12, 2010
VERITCAL SPACING (LEADING)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Readability
FONT: 16 PT LEADING: 20 PT
p { line-height: 1.25;} /* 1 em = 16pt so 1.25 em = 20 pt leading */
Tuesday, October 12, 2010
VERITCAL SPACING (LEADING)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Readability
p { font-size: 16px; line-height: 20px;}
Tuesday, October 12, 2010
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 officia deserunt mollit anim id est laborum.
VERITCAL SPACING (COLOR)
Readability
Tuesday, October 12, 2010
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 officia deserunt mollit anim id est laborum.
VERITCAL SPACING (COLOR)
Readability
Tuesday, October 12, 2010
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 officia deserunt mollit anim id est laborum.
VERITCAL SPACING (COLOR)
Readability
Tuesday, October 12, 2010
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 officia deserunt mollit anim id est laborum.
VERITCAL SPACING (COLOR)
Readability
Tuesday, October 12, 2010
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 officia deserunt mollit anim id est laborum. 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 officia deserunt mollit anim id est laborum.
VERTICAL SPACING (PARAGRAPH)
Readability
Tuesday, October 12, 2010
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 officia deserunt mollit anim id est laborum.
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 officia deserunt mollit anim id est laborum.
VERTICAL SPACING (PARAGRAPH)
Readability
p { margin-bottom: 20px;}
Tuesday, October 12, 2010
VERTICAL SPACING (BASELINE GRID)
Readability
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 officia deserunt mollit anim id est laborum.
Lorem ipsum dolorLorem 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.
GOOD BAD
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 officia deserunt mollit anim id est laborum.
Lorem ipsum dolor
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.
Tuesday, October 12, 2010
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 officia deserunt mollit anim id est laborum.
Lorem ipsum dolor
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.
VERTICAL SPACING (BASELINE GRID)
Readability
GOOD
body{ font-size: 13px; line-height: 15px;}
p { margin-bottom: 15px;}
h3 { font-size: 15px; line-height: 20px; margin-bottom: -5px;}
Tuesday, October 12, 2010
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 officia deserunt mollit anim id est
laborum.
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 officia deserunt mollit anim id est
laborum. Excepteur sint occaecat cupidatat.
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 officia deserunt mollit anim id est
laborum.
COLUMN WIDTH (620 px)
Readability
TOO WIDE
Tuesday, October 12, 2010
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 officia deserunt mollit anim id est
laborum.
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 officia deserunt mollit anim id est
laborum. Excepteur sint occaecat cupidatat.
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 officia deserunt mollit anim id est
laborum.
COLUMN WIDTH (620 px)
Readability
TOO WIDE
Tuesday, October 12, 2010
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
officia deserunt mollit anim id est laborum.
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
officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat.
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
COLUMN WIDTH (420 px)
Readability
GOOD
Tuesday, October 12, 2010
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
COLUMN WIDTH (80 px)
Readability
TOO NARROW
Tuesday, October 12, 2010
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 officia deserunt mollit anim id est laborum.
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 officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat.
INDENTS
Readability
p { text-indent:30px;}
Tuesday, October 12, 2010
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 officia deserunt mollit anim id est laborum. 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 officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat.
ALIGNMENT (FLUSH LEFT)
Readability
DEFAULT
Tuesday, October 12, 2010
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 officia deserunt mollit
anim id est laborum. 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 officia deserunt mollit
anim id est laborum. Excepteur sint occaecat cupidatat.
ALIGNMENT (CENTERED)
Readability
p { text-align: center;}
Tuesday, October 12, 2010
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 officia deserunt mollit anim id est laborum.
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 officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat.
ALIGNMENT (FLUSH RIGHT)
Readability
p { text-align: right;}
Tuesday, October 12, 2010
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 officia deserunt mollit anim id est laborum. 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 officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat.
ALIGNMENT (JUSTIFIED)
Readability
p { text-align: justify;}
Tuesday, October 12, 2010
Lorem ipsum doloj sit game, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
LINKS
Readability
“Lorem ipsum doloj sit game, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.”
GOOD BAD
“
Tuesday, October 12, 2010
ALL CAPS TYPE CAN ADD EMPHASIS. BUT TOO MUCH TYPE IN ALL CAPS IS VERY HARD TO READ. IT WILL HURT PEOPLE IN THE BRAIN AND MAY RESULT IN SEIZURES. MAKE SURE THAT YOU USE SIMPLE PHRASES OR SINGLE WORDS.
ALL CAPS
Readability
Tuesday, October 12, 2010
Requires tight leading – less than the font size
ALL CAPS
Readability
GOOD 16/12 BAD 16/16
HIRE ME
HIRE ME
WORSE 16/20
HIRE ME
Tuesday, October 12, 2010
It can also look good with loose tracking.
ALL CAPS
Readability
J U S T I C E
h1 { letter-spacing: 30px;}
Tuesday, October 12, 2010
Web fonts
Tuesday, October 12, 2010
FORMATS
Web fonts
.ttf .otf .svg .eot .woff
Tuesday, October 12, 2010
@fontface
Web fonts
.ttf .otf .svg .eot .woff
Tuesday, October 12, 2010
Web fonts
Tuesday, October 12, 2010
@fontface
Web fonts
29.95%
11.4%
5.5%
1.6%49.87%
Tuesday, October 12, 2010
@fontface
Web fonts
.ttf
.otf
.svg
.eot
Tuesday, October 12, 2010
@fontface
Web fonts
.ttf
.otf
.svg
.eot
.woff IE9 3.6 6
Tuesday, October 12, 2010
@fontface
Web fonts
@font-face { font-family: "Anivers"; src: url("Anivers.eot");}@font-face { font-family: "Anivers"; src: url("Anivers.otf");}body { font-family: Anivers, "Helvetica Neue", Helvetica, Arial, sans-serif;}
Tuesday, October 12, 2010
TYPEKIT
Web fonts
<head> <script type="text/javascript" src="http://use.typekit.com/qfd4pcz.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script></head>
h1 { font-family: "ff-din-web", Helvetica, sans-serif;}
HTML
CSS
Tuesday, October 12, 2010
TYPEKIT
Web fonts
<head> <script type="text/javascript" src="http://use.typekit.com/qfd4pcz.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script></head>
h1 { font-family: "ff-din-web", Helvetica, sans-serif;}
HTML
CSS
IE6 3.5 4.0249.4 3.1 10.54
Tuesday, October 12, 2010
TYPEKIT
Web fonts
<head> <script type="text/javascript" src="http://use.typekit.com/qfd4pcz.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script></head>
h1 { font-family: "ff-din-web", Helvetica, sans-serif;}
HTML
CSS
2.2 Experimental
Tuesday, October 12, 2010
PhotoShop
FONT
SIZEKERNING
WEIGHT
LEADINGTRACKING
COLOR
Tuesday, October 12, 2010
PhotoShop
ALIGNMENT
INDENT LEFT
SPACE BEFORE
INDENT RIGHT
SPACE AFTER
INDENT 1ST
Tuesday, October 12, 2010