Styling Text with CSS
Font Size
The font-size property enables you to specify a size for the font. There are several ways to specify the size of a font. The most common are:
PIXELS
Pixels are commonly used because they allow web designers very precise control over how much space their text takes up. The number of pixels is followed by the letters px.
PERCENTAGES
The default size of text in browsers is 16px. So a size of 75% would be the equivalent of 12px, and 200% would be 32px.
EMS
Similar to percentages EMS are relative units. Since the default size of text in web browsers is 16 pixels, you can use similar rules to those shown for percentages.
Users can change the default size of text in their browsers so using percentages or ems can make fonts look bigger or smaller. One one hand you're loosing control over your layout, on the other hand it can be very helpful to people who can't read smaller fonts. If you use the pixel units users can't adjust the font sizes in the browser.
Defining a certain size scale in CSS is often a good method to achieve visual order/balance with typography using enough visible contrast in size.
CSS code example:
Font Weight
CSS code example:p { font-weight: 700; }
If you're using the @font-face method you probably have access to a bold font-family and would use it instead (for example):
Font Style
CSS code example:.caption { font-style: oblique; }
If you're using the @font-face method you probably have access to an italic font-family and would use it instead (for example):
Text Transform
CSS code example:h2 { text-transform: lowercase; }
.credits { text-transform: capitalize; }
Text Decoration
CSS code example:a { text-decoration: none; }
Line Height (Leading)
CSS code example:p { line-height: 1.5;}
Letter & Word Spacing
CSS code example:h1 { word-spacing: 1em; }
Alignment (text-align)
CSS code example:p { text-align: justify; }
.credits { text-align: right; }
.caption { text-align: center; }
Combinations With Color and Border Properties
Next to color, font and border properties the CSS examples below are using margins and paddings. Margins are the spaces that seperate 2 elements, Paddings are spaces between text and the edges/sides of its element. More about in this articel (scroll down to the "Box Model" section).
Background Color and Color Properties
HTML code:<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</p>
<p>Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
font-family: 'din_blackregular';
font-size: 48px;
margin: 20px;
}
p {
font-family: 'din_lightregular';
font-size: 24px;
background-color: black;
color: white;
margin: 20px;
padding: 20px;
A background color property applied to the p tag will color the whole paragraph area black. This is because a paragraph is a "block-element". If you want to use the background color for the lines of text individually you need to use an "inline-element" such as the "span" tag instead.
HTML code:<p><span class="t-back-2">Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</span></p>
<p><span class="t-back-2">Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</span></p>
font-family: 'din_blackregular';
font-size: 48px;
margin: 20px;
}
p {
font-family: 'din_lightregular';
font-size: 24px;
color: white;
line-height: 40px;
margin: 20px;
}
.t-back-1 {
background-color: orangered;
}
.t-back-2 {
background-color: black;
padding: 5px 0px;
}
Text and Border Properties
If we use the method above we can also archieve interesting results combining text with lines.
HTML code:<p><span class="t-borders-2">Investigationes demonstraverunt lectores legere me lius quod legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</span></p>
<p><span class="t-borders-2">Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</span></p>
font-family: 'din_blackregular';
font-size: 48px;
margin: 40px 20px;
}
p {
font-family: 'din_lightregular';
font-size: 24px;
line-height: 40px;
margin: 20px;
}
.t-borders-1 {
border-top: 10px solid black;
}
.t-borders-2 {
border-top: 3px solid black;
padding: 3px 0px;
}
Text and Background Images
The example below is using a background image instead to create a line pattern / text combination. In that case I needed to make sure that the line-height value (40px) for the paragraph matches the height of the pattern image.
HTML code:<p>Investigationes demonstraverunt lectores legere me lius quod legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</p>
<p>Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
font-family: 'din_blackregular';
font-size: 48px;
margin: 40px 20px;
}
p {
font-family: 'din_lightregular';
font-size: 24px;
line-height: 40px;
margin: 40px 20px;
padding-bottom: 4px;
background-image: url(../images/text-pattern.png);
}
Further Readings
Multi-Line Paddet Text (fine tuning text and background color/spacing).