CSS Fonts
The features and techniques used by CSS, or Cascading Style Sheets, to manage how text appears on webpages are referred to as CSS fonts.
CSS fonts provide a variety of styling possibilities for text information within HTML components. It allows you to manage several font attributes, including font style, weight, size, family, and more.
Why CSS font Selection is important?
- The typeface selection greatly influences the way that readers interact with a website.
- Your brand might have a powerful identity thanks to the choice of typeface.
- It’s crucial to have an easy-to-read typeface. Your text gains value from the font. Selecting the appropriate font color and font size is also crucial.
Example: In this example, we’ll use CSS font properties.
<!DOCTYPE html>
<html>
<head>
<title>CSS Font</title>
<style>
.cds {
font-family: "Arial, Helvetica, sans-serif";
font-size: 60px;
color: #090;
text-align: center;
}
.coder {
font-family: "Comic Sans MS", cursive, sans-serif;
font-variant: small-caps;
text-align: center;
}
</style>
</head>
<body>
<div class="cds">codershot</div>
<div class="coder">
A computer science portal for codershot
</div>
</body>
</html>Output :
CSS Font Properties
Various font properties exist in CSS, some of which are listed and briefly covered below:
- CSS Font-family: The text’s font family can be specified using this parameter. A series of fonts and family names, separated by commas, can be supplied. The browser will select the first font in the list that is available.
Syntax: font-family: “font family name”;
Example:
<!DOCTYPE html>
<html>
<head>
<title>font-family property</title>
<style>
.cds {
font-family: "Times New Roman";
font-weight: bold;
font-size: 40px;
color: #060;
text-align: center;
}
.coders {
font-family: "Comic Sans MS", cursive, sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div class="cds">Codershot</div>
<div class="coders">
A computer science portal for codershot
</div>
</body>
</html>Output:
- CSS Font-style: The font style, such as italics, oblique, or normal, can be specified using the font-style attribute in CSS.
Syntax : font-style : style name ;
Example:
<!DOCTYPE html>
<html>
<head>
<title>font-style property</title>
<style>
.cds {
font-style: normal;
font-family: "Times New Roman";
font-weight: bold;
font-size: 40px;
color: #060;
text-align: center;
}
.coders {
font-style: italic;
text-align: center;
}
</style>
</head>
<body>
<div class="cds">Codershot</div>
<div class="coders">
A computer science portal for coders
</div>
</body>
</html>Output:
- CSS Font-weight: The size or thickness of the font used with the text in HTML can be adjusted using the font-weight attribute within the CSS.
Syntax: font-weight: font-weight value ;
Example:
<!DOCTYPE html>
<html>
<head>
<title>font-weight property</title>
<style>
.cds {
font-weight: bold;
font-style: normal;
font-family: "Times New Roman";
font-size: 40px;
color: #060;
text-align: center;
}
.coders {
font-weight: normal;
text-align: center;
}
</style>
</head>
<body>
<div class="cds">Codershot</div>
<div class="coders">
A computer science portal for coders
</div>
</body>
</html>Output :
- CSS Font-variant: Beyond the standard style, weight, and size, fonts can have different appearances, which can be specified using the font-variant attribute in CSS. Controlling whether text is shown in lowercase or regular lowercase and uppercase characters is the primary goal of font-variant.
Syntax: font-variant: font-variant value ;
Example:
<!DOCTYPE html>
<html>
<head>
<title>font-variant property</title>
<style>
.cds {
font-variant: small-caps;
font-weight: bold;
font-family: "Times New Roman";
font-size: 40px;
color: #060;
text-align: center;
}
.coders {
font-variant: normal;
text-align: center;
}
</style>
</head>
<body>
<div class="cds">Codershot</div>
<div class="coders">
A computer science portal for coders
</div>
</body>
</html>Output :
- CSS Font-size: The font size can be adjusted with this attribute. Numerous units, including pixels, rems, percentages, etc., are available for use in its specification.
Syntax: font-size: font-size value ;
Example:
<!DOCTYPE html>
<html>
<head>
<title>font-size property</title>
<style>
.cds {
font-size: 40px;
font-weight: bold;
font-family: "Times New Roman";
color: #060;
text-align: center;
}
.coders {
font-size: 1.2em;
text-align: center;
}
</style>
</head>
<body>
<div class="cds">Codershot</div>
<div class="coders">
A computer science portal for coders
</div>
</body>
</html>Output:
- CSS Font-stretch: You can regulate the character width of a font family using CSS’s font-stretch feature. This property comes in especially handy when you need to change the character widths to meet specific typographic or design specifications.
Syntax: font-stretch: value ;
- CSS Font-kerning: The phrase “font kerning” in typography describes the process of modifying the spacing between letters to enhance both appearance and accessibility. It entails changing the distance between particular letter pairings to create a more aesthetically pleasant and harmonious appearance.
Syntax: font-kerning: value ;
CSS Generic Font Families
In CSS, there are five families of generic fonts:
- SERIF: Fonts with serifs—small ornamental strokes at the end of characters—fall into this category. Because serif fonts are simpler to read, printed publications frequently utilize them for body text.
Examples: Times New Roman, Georgia, and Palatino.
- SANS-SERIF: Sans-serif fonts are simpler and seem cleaner since they lack serifs. Because they typically appear well on screens, they are frequently used for digital material, including on websites or in user interfaces.
Examples: Arial, Helvetica, and Verdana.
- MONOSPACE: Fixed-width characters, or those in monospace typefaces, take up the same proportion of horizontal space. They can therefore be used to preserve alignment in tables or to display code snippets.
Examples: Courier, Consolas, and Monaco.
- CURSIVE: Cursive typefaces have flowing, linked characters that resemble handwriting. They are employed to give texts a more casual or intimate feel.
Examples: Comic Sans MS, Lucida Handwriting, and Brush Script.
- FANTASY: Fantasy fonts are typically employed for creative or decorative purposes, and they have an ornamental or decorative quality. They might differ greatly in appearance and style.
Examples: Papyrus, Impact, and Chiller.
