Professional Documents
Culture Documents
The Elements of Typographic Style Applied To The Web
The Elements of Typographic Style Applied To The Web
The Elements of Typographic Style Applied To The Web
net/
1 of 1 3/4/2019, 2:58 PM
Introduction | The Elements of Typographic Style Applied to the Web http://webtypography.net/intro/
1 of 3 3/4/2019, 2:58 PM
Introduction | The Elements of Typographic Style Applied to the Web http://webtypography.net/intro/
2 of 3 3/4/2019, 2:58 PM
Introduction | The Elements of Typographic Style Applied to the Web http://webtypography.net/intro/
3 of 3 3/4/2019, 2:58 PM
Define the word space to suit the size and natural letterfit of the font | Th... http://webtypography.net/2.1.1
word-
spacing
normal
word-spacing
1 of 4 3/4/2019, 2:59 PM
Define the word space to suit the size and natural letterfit of the font | Th... http://webtypography.net/2.1.1
p {
word-spacing: . em;
}
h {
word-spacing: - . em;
}
word-spacing
word-spacing
2 of 4 3/4/2019, 2:59 PM
Define the word space to suit the size and natural letterfit of the font | Th... http://webtypography.net/2.1.1
#box {
font-size: px;
width: em;
height: em;
border: px solid black;
}
#box {
font-size: px;
width: em;
height: em;
border: px solid black;
}
font-size
3 of 4 3/4/2019, 2:59 PM
Define the word space to suit the size and natural letterfit of the font | Th... http://webtypography.net/2.1.1
4 of 4 3/4/2019, 2:59 PM
Choose a comfortable measure | The Elements of Typographic Style App... http://webtypography.net/2.1.2
width
#col {
width: px;
}
#col {
width: %;
}
#col {
width: em;
1 of 3 3/4/2019, 2:59 PM
Choose a comfortable measure | The Elements of Typographic Style App... http://webtypography.net/2.1.2
2 of 3 3/4/2019, 2:59 PM
Choose a comfortable measure | The Elements of Typographic Style App... http://webtypography.net/2.1.2
3 of 3 3/4/2019, 2:59 PM
Set ragged if ragged setting suits the text and page | The Elements of Typ... http://webtypography.net/2.1.3
text-
align
p {
text-align: left; /* ragged right */
}
p {
text-align: right; /* ragged left */
}
1 of 3 3/4/2019, 2:59 PM
Set ragged if ragged setting suits the text and page | The Elements of Typ... http://webtypography.net/2.1.3
p {
text-align: justify;
}
text-justify
inter-word inter-character
inter-word
inter-character
2 of 3 3/4/2019, 2:59 PM
Set ragged if ragged setting suits the text and page | The Elements of Typ... http://webtypography.net/2.1.3
p {
text-align: justify;
text-justify: inter-character;
}
text-align-last
text-align-last justify
text-align-last
size size
3 of 3 3/4/2019, 2:59 PM
Use a single word space between sentences | The Elements of Typograph... http://webtypography.net/2.1.4
1 of 2 3/4/2019, 2:59 PM
Use a single word space between sentences | The Elements of Typograph... http://webtypography.net/2.1.4
&# ;
&# ;
&# ;
&# ;
&# ;
&# ;
&# ;
&# ;
&# ;
white-space:pre
pre
2 of 2 3/4/2019, 2:59 PM
Add little or no space within strings of initials | The Elements of Typogra... http://webtypography.net/2.1.5
1 of 2 3/4/2019, 3:00 PM
Add little or no space within strings of initials | The Elements of Typogra... http://webtypography.net/2.1.5
2 of 2 3/4/2019, 3:00 PM
Letterspace all strings of capitals and small caps, and all long strings of di... http://webtypography.net/2.1.6
letter-spacing
<abbr>
abbr {
letter-spacing: . em;
}
<acronym>
1 of 2 3/4/2019, 3:00 PM
Letterspace all strings of capitals and small caps, and all long strings of di... http://webtypography.net/2.1.6
<abbr>
<abbr>
2 of 2 3/4/2019, 3:00 PM
Don’t letterspace the lower case without a reason | The Elements of Typo... http://webtypography.net/2.1.7
letter-spacing
h {
font-family: "univers bold condensed",
1 of 2 3/4/2019, 3:00 PM
Don’t letterspace the lower case without a reason | The Elements of Typo... http://webtypography.net/2.1.7
w h ar v es an d
w a r f i ng e rs
letter-spacing
ems
2 of 2 3/4/2019, 3:00 PM