The Elements of Typographic Style Applied to the Web – a practical guid... http://webtypography.

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

W.&# ;B. Yeats

J.&# ;C.&# ;L. Prillwitz

     

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>

search = '/\b([A-Z][A-Z - ]{ ,})\b/';

replace = '<abbr> </abbr>';
text = preg_replace( search, replace, text);

<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

impact, haettenschweiler, sans-serif;

font-size: %;
letter-spacing: . em;
}

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