Typography
Typography refers to the styling and arrangement of texts in order to improve readability and user experience. Texts are almost everywhere on a webpage. They could be the headings (<h1>
-<h6>
), the paragraphs (<p>
), lists (<li>
), and so on.
In the field of web design, typography can be roughly divided into two topics, font related CSS properties, such as font-family, font-style, font size, and so on.
1p {
2 font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
3 font-size: 1rem;
4 font-style: italic;
5}
And also text related CSS properties such as text spacing, text alignment, text wrap, and more.
1p {
2 letter-spacing: 0.025em;
3 text-align: right;
4 text-decoration-line: underline;
5}
We will discuss all of them in detail in the next few lessons.
Text decoration
We'll start with text decorations, which defines decorative lines you add to the plain text. For example, by setting the text-decoration-line
property to underline
, you can add an underline to the text like this:
1<p>Lorem ipsum dolor sit amet consectetur.</p>
1p {
2 text-decoration-line: underline;
3}
Other possible values include overline
, which is a line displayed over the text.
1p {
2 text-decoration-line: overline;
3}
Or line-through
, which is a line displayed through the text.
1p {
2 text-decoration-line: line-through;
3}
The text-decoration-line
property also allows you to specify multiple decoration lines like this: