Understanding CSS Font Property: A Beginner’s Guide
Day 9 : 60 Days Of Full Stack Web Development Challenge
CSS Font property is used to control the look of texts.
By the use of CSS font property you can change the text size, color, style and more.
These are some important font attributes:
CSS Font color: This property is used to change the color of the text. (standalone attribute)
CSS Font family: This property is used to change the face of the font.
CSS Font size: This property is used to increase or decrease the size of the font.
CSS Font style: This property is used to make the font bold, italic or oblique.
CSS Font variant: This property creates a small-caps effect.
CSS Font weight: This property is used to increase or decrease the boldness and lightness of the font.
All CSS Font Properties :
| Property | Description |
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |
1) CSS Font Family
CSS font family can be divided in two types:
Generic family: It includes Serif, Sans-serif, and Monospace.
Font family: It specifies the font family name like Arial, New Times Roman etc.
Serif: Serif fonts include small lines at the end of characters. Example of serif: Times new roman, Georgia etc.
Sans-serif: A sans-serif font doesn't include the small lines at the end of characters. Example of Sans-serif: Arial, Verdana etc.
Syntax
font-family: family-name|generic-family|initial|inherit;
Generic Font Families :
In CSS there are five generic font families:
Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
Cursive fonts imitate human handwriting.
Fantasy fonts are decorative/playful fonts.
Difference Between Serif and Sans-serif Fonts :
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { font-family: sans-serif; }
h2 { font-family: serif; }
p { font-family: monospace; }
}
</style>
</head>
<body>
<h1>This heading is shown in sans-serif.</h1>
<h2>This heading is shown in serif.</h2>
<p>This paragraph is written in monospace.</p>
</body>
</html>
Output:
2) CSS Font Color :
CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS fonts.
It is used to change the color of the text.
There are three different formats to define a color:
By a color name
By hexadecimal value
By RGB
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>
Output :
3 ) CSS Font Size :
CSS font size property is used to change the size of the font.
These are the possible values that can be used to set the font size:
Syntax :
font-size: medium|large|x-large|xx-large|xx-small|x-small|small|;
The font-size can be relative or absolute.
Absolute-size
It is used to set the text to a definite size. Using absolute-size, it is not possible to change the size of the text in all browsers. It is advantageous when we know the physical size of the output.
Relative-size
It is used to set the size of the text relative to its neighboring elements. With relative-size, it is possible to change the size of the text in browsers.
| Font Size Value | Description |
| xx-small | used to display the extremely small text size. |
| x-small | used to display the extra small text size. |
| small | used to display small text size. |
| medium | used to display medium text size. |
| large | used to display large text size. |
| x-large | used to display extra large text size. |
| xx-large | used to display extremely large text size. |
| smaller | used to display comparatively smaller text size. |
| larger | used to display comparatively larger text size. |
| size in pixels or % | used to set value in percentage or in pixels. |
<html>
<head>
<title>Practice CSS font-size property</title>
</head>
<body>
<p style="font-size:xx-small;">
This font size is extremely small.</p>
<p style="font-size:x-small;">
This font size is extra small</p>
<p style="font-size:small;">
This font size is small</p>
<p style="font-size:medium;">
This font size is medium. </p>
<p style="font-size:large;">
This font size is large. </p>
<p style="font-size:x-large;">
This font size is extra large. </p>
<p style="font-size:xx-large;">
This font size is extremely large. </p>
<p style="font-size:smaller;">
This font size is smaller. </p>
<p style="font-size:larger;">
This font size is larger. </p>
<p style="font-size:200%;">
This font size is set on 200%. </p>
<p style="font-size:20px;">
This font size is 20 pixels.
</p>
</body>
</html>
Output:
Font-size with em :
It is used to resize the text.
Most of the developers prefer em instead of pixels.
It is recommended by the world wide web consortium (W3C).
As stated above, the default text size in browsers is 16px. So, we can say that the default size of 1em is 16px.
The formula for calculating the size from pixels to em is em = pixels/16.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#first {
font-size: 2.5em; /* 40px/16=2.5em */
}
#second {
font-size: 1.875em; /* 30px/16=1.875em */
}
#third {
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<p id='first'>First paragraph.</p>
<p id='second'>Second paragraph</p>
<p id='third'>Third Paragraph.</p>
</body>
</html>
Output:
4) CSS Font Style :
The font-style property is mostly used to specify italic text.
This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
}
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
<h3>This heading is shown in oblique font.</h3>
<h4>This heading is shown in normal font.</h4>
</body>
</html>
Output:
5) CSS Font Variant
CSS font variant property specifies how to set font variant of an element.
It may be normal and small-caps.
In a small-caps font, all lowercase letters are converted to uppercase letters.
However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>
</head>
<body>
<h3>This heading is shown in normal font.</h3>
<p>This paragraph is shown in small font.</p>
</body>
</html>
Output :
6) CSS Font Weight :
CSS font weight property defines the weight of the font and specify that how bold a font is.
The possible values of font weight may be normal, bold, bolder, lighter or number (100, 200..... upto 900).
Example:
<!DOCTYPE html>
<html>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>
<p style="font-weight:100;">This font is 100 weight.</p>
<p style="font-weight:200;">This font is 200 weight.</p>
<p style="font-weight:300;">This font is 300 weight.</p>
<p style="font-weight:400;">This font is 400 weight.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
<p style="font-weight:600;">This font is 600 weight.</p>
<p style="font-weight:700;">This font is 700 weight.</p>
<p style="font-weight:800;">This font is 800 weight.</p>
<p style="font-weight:900;">This font is 900 weight.</p>
</body>
</html>
Output:
7) Google Fonts :
If you do not want to use any of the standard fonts in HTML, you can use Google Fonts.
Google Fonts are free to use, and have more than 1000 fonts to choose from.
How To Use Google Fonts
Just add a special style sheet link in the <head> section and then refer to the font in the CSS.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
<body>
<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>
</body>
</html>
Output:
Conclusion
This article explores various Font Properties and their representation, as well as the pros and cons of each. Feel free to leave any comments or questions below. If you found this article informative, please share it with your network. Thank you.
What Next ?
CSS Color Property.