Introduction to CSS Typography
The typography concept in CSS is defined as one of the essential components for designing websites. The typography concept is about styling the pages, spacing properties, and proportions. This concept is used for improving the text which is more readability using proper font properties, text color properties, etc. Typography allows the users to define color, the shape of text, size, and spacing which are CSS properties so that the text is easily legibility and readability. The main properties of typography in CSS are the color of the text, the font size of text, the spacing of the line, etc.
Working of CSS Typography with Examples
Here we will see about typography concept and its properties. The two main groups of this topography concept are font and text.
Typography properties in CSS are as follows:
1. Color
This property is used for coloring the texts or elements in website layouts such as foreground color, background color, the color of the text, etc.
Example
Code:
<!DOCTYPE html>
<html>
<title>Educba Training</title>
<style>
body {
}
.text1 {
color: red
}
.text2 {
color: #71ffb0;
}
.text3 {
color: rgb(70, 98, 120);
}
.text4 {
color: rgba(0, 0, 0, 0.4);
}
.text5 {
color: hsl(15, 80%, 73%);
}
.text6 {
color: hsla(18, 130%, 43%, 0.5);
}
</style>
<body>
<div class="text1">Color name is given directly</div>
<div class="text2">This text have hexadecimal code for color</div>
<div class="text3">This text uses rgb() color codes </div>
<div class="text4">This text uses rgb color codes with alpha values like transparent or opaque</div>
<div class="text5">This text uses hsl() color codes </div>
<div class="text6">This text uses hsl color codes with alpha values like transparent or opaque </div>
</body>
</html>Output:
In the above program, we can see that we are specifying the color properties in topography which can be specified in different ways and shown in the above program with screenshot such as color can be specified using its color name, hexadecimal code, rgb() color codes, hsl() color codes, etc.
2. Font Property
This property has other shorthand properties like font-family such as font-size, font-style, font-weight, etc in this topography concept.
Example #1: font-size property
Code:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<style>
body {
}
.text1 {
font-size: medium;
}
.text2 {
font-size: 30px;
}
.text3 {
font-size: 5.2em;
}
.text4 {
font-size: 140%;
}
.text5 {
font-size: smaller;
}
.text6 {
font-size: x-large;
}
</style>
<body>
<div class="text1">Default size can be declared as medium </div>
<div class="text2">This text uses pixel values</div>
<div class="text3">This text uses em values </div>
<div class="text4">This text uses percentage values </div>
<div class="text5">This text uses some relative keywords </div>
<div class="text6">This text uses some absolute keywords </div>
</body>
</html>Output:
Example #2: font style
Code:
<!DOCTYPE html>
<html>
<title>Educba Training </title>
<style>
body {
}
.text1 {
font-style: normal;
}
.text2 {
font-style: italic;
}
.text3 {
font-style: oblique;
}
</style>
<body>
<div class="text1">Default font style with normal value</div>
<div class="text2">This text uses italic font style values</div>
<div class="text3">This text uses more slanted text than italic and is declared as oblique</div>
</body>
</html>Output:
Example #3: font weight property
Code:
<!DOCTYPE html>
<html>
<title>Educba Training</title>
<style>
body {
}
.text1 {
font-size: x-large;
font-weight: normal;
}
.text2 {
font-size: x-large;
font-weight: bold;
}
.text3 {
font-size: x-large;
font-weight: 800;
}
</style>
<body>
<div class="text1">Default font style with normal value and font size as x-large </div>
<div class="text2">This text uses bold for font weight values</div>
<div class="text3">This text uses numeric values for specifying font weight </div>
</body>
</html>Output:
Example #4: font family property
Code:
<!DOCTYPE html>
<html>
<title>Educba Training</title>
<style>
body {
}
.text1 {
font-family: "Arial";
}
.text2 {
font-family: Courier New;
}
.text3 {
font-family: Times New Roman;
}
</style>
<body>
<div class="text1">This text displays in Areial font family </div>
<div class="text2">This text displays in Courier New font family</div>
<div class="text3">This text displays in Times New Roman font family</div>
</body>
</html>Output:
2. Spacing Property
This property is used where there is spacing required such as line spacing, letter spacing, word spacing, etc.
Example #1
Code:
<!DOCTYPE html>
<html>
<title>Educba Training</title>
<style>
body {
}
.text1 {
font-size: x-large;
letter-spacing: normal;
}
.text2 {
font-size: x-large;
letter-spacing: 4px;
}
.text3 {
font-size: x-large;
letter-spacing: 1.2em;
}
.text4 {
font-size: x-large;
word-spacing: normal;
}
.text5 {
font-size: x-large;
word-spacing: 3px;
}
.text6 {
font-size: x-large;
word-spacing: 0.8em;
}
</style>
<body>
<div class="text1">Default letter spacing with normal value </div>
<div class="text2">This text uses pixel values for letter spacing</div>
<div class="text3">This text uses em values for letter spacing </div>
<div class="text4">Default word spacing with normal value </div>
<div class="text5">This text uses pixel values for word spacing</div>
<div class="text6">This text uses em values word spacing </div>
</body>
</html>Output:
Example #2: Other typography properties
Other typography properties are not mostly used such as text alignment and text-decoration.
Code:
<!DOCTYPE html>
<html>
<title>Educba Training</title>
<style>
body {
}
.text1 {
font-size: large;
text-align: left;
}
.text2 {
font-size: large;
text-align: right;
}
.text3 {
font-size: large;
text-decoration: underline;
}
</style>
<body>
<div class="text1">This text displays at left </div>
<div class="text2">This text displays at right </div>
<div class="text3">This text displays text decoration with the text underlined </div>
</body>
</html>Output:
Conclusion
Here, we conclude that the CSS typography is used for the main property likes font, color, and spacing for text display. Here, we have seen that the typography concept is used for designing website layout which contains text or elements with text that attracts the users to browse the websites. Here we have seen the typography properties such as font properties like font- family, font-size, font-weight, and font-style, and the second main property is text properties like letter spacing, word spacing, text- alignment, etc.
Recommended Articles
This is a guide to CSS Typography. Here we discuss the introduction to CSS Typography along with examples respectively. You may also have a look at the following articles to learn more –
