Font-related CSS Properties

Articles

This article explains font-related CSS properties.

You can learn about the use cases and how to write properties like font-style and font-family.

YouTube Video

Creating HTML for preview

css-font.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-font.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Font-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Font-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>font-size</h3>
 23            <section>
 24                <h4>Absolute Values</h4>
 25                <header><h4>font-size: 16px</h4></header>
 26                <section class="sample-view">
 27                    <p class="font-size-px">Font size: 16px</p>
 28                </section>
 29                <header><h4>font-size: 12pt</h4></header>
 30                <section class="sample-view">
 31                    <p class="font-size-pt">Font size: 12pt</p>
 32                </section>
 33            </section>
 34            <section>
 35                <h4>Relative Values</h4>
 36                <header><h4>font-size: 1.2em</h4></header>
 37                <section class="sample-view">
 38                    <p class="font-size-em">Font size: 1.2em</p>
 39                </section>
 40                <header><h4>font-size: 1.5rem</h4></header>
 41                <section class="sample-view">
 42                    <p class="font-size-rem">Font size: 1.5rem</p>
 43                </section>
 44                <header><h4>font-size: 150%</h4></header>
 45                <section class="sample-view">
 46                    <p class="font-size-percent">Font size: 150%</p>
 47                </section>
 48            </section>
 49            <section>
 50                <h4>Keywords</h4>
 51                <header><h4>font-size: small</h4></header>
 52                <section class="sample-view">
 53                    <p class="font-size-small">Font size: small</p>
 54                </section>
 55                <header><h4>font-size: medium%</h4></header>
 56                <section class="sample-view">
 57                    <p class="font-size-medium">Font size: medium (default)</p>
 58                </section>
 59                <header><h4>font-size: large</h4></header>
 60                <section class="sample-view">
 61                    <p class="font-size-large">Font size: large</p>
 62                </section>
 63                <header><h4>font-size: x-large</h4></header>
 64                <section class="sample-view">
 65                    <p class="font-size-x-large">Font size: x-large</p>
 66                </section>
 67            </section>
 68            <section>
 69                <h4>Relative Keywords</h4>
 70                <header><h4>font-size: smaller</h4></header>
 71                <section class="sample-view">
 72                    <p class="font-size-smaller">Font size: smaller</p>
 73                </section>
 74                <header><h4>font-size: larger</h4></header>
 75                <section class="sample-view">
 76                    <p class="font-size-larger">Font size: larger</p>
 77                </section>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>font-family</h3>
 82            <section>
 83                <h4>Specific Font Names</h4>
 84                <header><h4>font-family: Arial, sans-serif</h4></header>
 85                <section class="sample-view">
 86                    <p class="font-family-arial">Font Family Arial</p>
 87                </section>
 88                <header><h4>font-family: Verdana, sans-serif</h4></header>
 89                <section class="sample-view">
 90                    <p class="font-family-verdana">Font Family Verdana</p>
 91                </section>
 92                <header><h4>font-family: "Times New Roman", serif</h4></header>
 93                <section class="sample-view">
 94                    <p class="font-family-times">Font Family Times New Roman</p>
 95                </section>
 96                <header><h4>font-family: "Courier New", monospace</h4></header>
 97                <section class="sample-view">
 98                    <p class="font-family-courier">Font Family Courier New</p>
 99                </section>
100                <header><h4>font-family: Georgia, serif</h4></header>
101                <section class="sample-view">
102                    <p class="font-family-georgia">Font Family Georgia</p>
103                </section>
104            </section>
105            <section>
106                <h4>Generic Font Families</h4>
107                <header><h4>font-family: serif</h4></header>
108                <section class="sample-view">
109                    <p class="font-family-serif">Font Family Serif</p>
110                </section>
111                <header><h4>font-family: sans-serif</h4></header>
112                <section class="sample-view">
113                    <p class="font-family-sans-serif">Font Family Sans-Serif</p>
114                </section>
115                <header><h4>font-family: monospace</h4></header>
116                <section class="sample-view">
117                    <p class="font-family-monospace">Font Family Monospace</p>
118                </section>
119                <header><h4>font-family: cursive</h4></header>
120                <section class="sample-view">
121                    <p class="font-family-cursive">Font Family Cursive</p>
122                </section>
123                <header><h4>font-family: fantasy</h4></header>
124                <section class="sample-view">
125                    <p class="font-family-fantasy">Font Family Fantasy</p>
126                </section>
127            </section>
128        </article>
129        <article>
130            <h3>font-weight</h3>
131            <section>
132                <h4>Keyword Values</h4>
133                <header><h4>font-weight: normal</h4></header>
134                <section class="sample-view">
135                    <p class="font-weight-normal">Font weight: normal</p>
136                </section>
137                <header><h4>font-weight: bold</h4></header>
138                <section class="sample-view">
139                    <p class="font-weight-bold">Font weight: bold</p>
140                </section>
141                <header><h4>font-weight: bolder</h4></header>
142                <section class="sample-view">
143                    <p class="font-weight-bolder">Font weight: bolder</p>
144                </section>
145                <header><h4>font-weight: lighter</h4></header>
146                <section class="sample-view">
147                    <p class="font-weight-lighter">Font weight: lighter</p>
148                </section>
149            </section>
150            <section>
151                <h4>Numeric Values</h4>
152                <header><h4>font-weight: 100</h4></header>
153                <section class="sample-view">
154                    <p class="font-weight-100">Font weight: 100 (Thin)</p>
155                </section>
156                <header><h4>font-weight: 200</h4></header>
157                <section class="sample-view">
158                    <p class="font-weight-200">Font weight: 200 (Extra Light)</p>
159                </section>
160                <header><h4>font-weight: 300</h4></header>
161                <section class="sample-view">
162                    <p class="font-weight-300">Font weight: 300 (Light)</p>
163                </section>
164                <header><h4>font-weight: 400</h4></header>
165                <section class="sample-view">
166                    <p class="font-weight-400">Font weight: 400 (Normal)</p>
167                </section>
168                <header><h4>font-weight: 500</h4></header>
169                <section class="sample-view">
170                    <p class="font-weight-500">Font weight: 500 (Medium)</p>
171                </section>
172                <header><h4>font-weight: 600</h4></header>
173                <section class="sample-view">
174                    <p class="font-weight-600">Font weight: 600 (Semi Bold)</p>
175                </section>
176                <header><h4>font-weight: 700</h4></header>
177                <section class="sample-view">
178                    <p class="font-weight-700">Font weight: 700 (Bold)</p>
179                </section>
180                <header><h4>font-weight: 800</h4></header>
181                <section class="sample-view">
182                    <p class="font-weight-800">Font weight: 800 (Extra Bold)</p>
183                </section>
184                <header><h4>font-weight: 900</h4></header>
185                <section class="sample-view">
186                    <p class="font-weight-900">Font weight: 900 (Black)</p>
187                </section>
188            </section>
189        </article>
190        <article>
191            <h3>font-style</h3>
192            <section>
193                <h4>Keyword Values</h4>
194                <header><h4>font-style: normal</h4></header>
195                <section class="sample-view">
196                    <p class="font-style-normal">This is normal font style.</p>
197                </section>
198                <header><h4>font-style: italic</h4></header>
199                <section class="sample-view">
200                    <p class="font-style-italic">This is italic font style.</p>
201                </section>
202                <header><h4>font-style: oblique</h4></header>
203                <section class="sample-view">
204                    <p class="font-style-oblique">This is oblique font style.</p>
205                </section>
206                <header><h4>font-style: oblique 20deg</h4></header>
207                <section class="sample-view">
208                    <p class="font-style-oblique-20deg">This is an oblique font style with a 20-degree angle.</p>
209                </section>
210            </section>
211        </article>
212        <article>
213            <h3>color</h3>
214            <section>
215                <h4>Color Property Examples</h4>
216                <header><h4>color: red</h4></header>
217                <section class="sample-view">
218                    <p class="color-red">This text is red using a keyword.</p>
219                </section>
220                <header><h4>color: #FF5733</h4></header>
221                <section class="sample-view">
222                    <p class="color-hex">This text is displayed with a hex color code (#FF5733).</p>
223                </section>
224                <header><h4>color: rgb(255, 87, 51)</h4></header>
225                <section class="sample-view">
226                    <p class="color-rgb">This text is displayed using RGB (rgb(255, 87, 51)).</p>
227                </section>
228                <header><h4>color: rgba(255, 87, 51, 0.7)</h4></header>
229                <section class="sample-view">
230                    <p class="color-rgba">This text is displayed using RGBA with transparency (rgba(255, 87, 51, 0.7)).</p>
231                </section>
232                <header><h4>color: hsl(14, 100%, 60%)</h4></header>
233                <section class="sample-view">
234                    <p class="color-hsl">This text is displayed using HSL (hsl(14, 100%, 60%)).</p>
235                </section>
236                <header><h4>color: hsla(14, 100%, 60%, 0.7)</h4></header>
237                <section class="sample-view">
238                    <p class="color-hsla">This text is displayed using HSLA with transparency (hsla(14, 100%, 60%, 0.7)).</p>
239                </section>
240            </section>
241        </article>
242    </main>
243</body>
244</html>

Typography (Font-Related)

`font-size` property

 1/* Absolute Values */
 2.font-size-px {
 3    font-size: 16px;
 4}
 5
 6.font-size-pt {
 7    font-size: 12pt;
 8}
 9
10/* Relative Values */
11.font-size-em {
12    font-size: 1.2em; /* 120% of the parent font size */
13}
14
15.font-size-rem {
16    font-size: 1.5rem; /* 150% of the root element's font size */
17}
18
19.font-size-percent {
20    font-size: 150%; /* 150% of the parent font size */
21}
22
23/* Keywords */
24.font-size-medium {
25    font-size: small;
26}
27
28.font-size-medium {
29    font-size: medium;
30}
31
32.font-size-large {
33    font-size: large;
34}
35
36.font-size-x-large {
37    font-size: x-large;
38}
39
40/* Relative Keywords */
41.font-size-larger {
42    font-size: larger;
43}
44
45.font-size-smaller {
46    font-size: smaller;
47}

font-size is a CSS property used to specify the size of text within an element. It is used to adjust the visual importance of text and improve readability. font-size can be specified using various units and methods.

Main ways to specify values

Absolute values(px, pt)

If you want to use a fixed size that is independent of the browser or device, specify font sizes in absolute units like pixels or points.

1p {
2    font-size: 16px;
3}

px: Pixels are the most common unit. Specify the size in increments of 1 pixel.

1p {
2    font-size: 12pt;
3}

pt: Points are units commonly used in printing. 1 point is 1/72 of an inch.

Relative values(em, rem, %)

You can also specify relative font sizes based on the font size of a parent or root element. This is suitable for responsive design.

1p {
2    font-size: 1.2em; /* 120% of the parent element's font size */
3}

em: em is a relative unit based on the font size of the parent element. If the parent's font-size is 16px, then 1em equals 16px.

1p {
2    font-size: 1.5rem; /* 150% of the root element's font size */
3}

rem: rem is a relative unit based on the font size of the root element (usually the <html> element).

1p {
2    font-size: 150%; /* 150% of the parent element's font size */
3}

%: % is specified as a percentage relative to the font size of the parent element.

Keywords

You can also use keywords to easily specify user-friendly sizes.

 1p.xx-small {
 2    font-size: xx-small;
 3}
 4p.x-small {
 5    font-size: x-small;
 6}
 7p.small {
 8    font-size: small;
 9}
10p.medium {
11    font-size: medium;
12}
13p.large {
14    font-size: large;
15}
16p.x-large {
17    font-size: x-large;
18}
19p.xx-large {
20    font-size: xx-large;
21}

xx-small, x-small, small, medium, large, x-large, xx-large: These keywords define basic font sizes that vary by browser but are easy to use.

Relative keywords

You can specify relative font sizes using keywords in relation to the parent element or surrounding text size.

1p {
2    font-size: larger;
3}

larger: larger makes the font size larger than that of the parent element.

1p {
2    font-size: smaller;
3}

smaller: smaller makes the font size smaller than that of the parent element.

Common usage examples

In responsive design, em and rem are often used to specify flexible font sizes based on the size of the parent or root elements.
In fixed design or precise design, it is common to use px to fix the size.

Examples of font size adjustments

 1h1 {
 2    font-size: 2.5rem; /* 2.5 times the size of the root element's font size */
 3}
 4
 5p {
 6    font-size: 16px; /* Fixed size */
 7}
 8
 9.small-text {
10    font-size: smaller; /* Smaller than the parent element's size */
11}

Conclusion

font-size is an important property for adjusting the visual importance and readability of text. It is important to use units and keywords appropriately according to the design purpose or for flexible responsive design.

The `font-family` Property

 1/* Specific Font Names */
 2.font-family-arial {
 3    font-family: Arial, sans-serif;
 4}
 5
 6.font-family-verdana {
 7    font-family: Verdana, sans-serif;
 8}
 9
10.font-family-times {
11    font-family: "Times New Roman", serif;
12}
13
14.font-family-courier {
15    font-family: "Courier New", monospace;
16}
17
18.font-family-georgia {
19    font-family: Georgia, serif;
20}
21
22/* Generic Font Families */
23.font-family-serif {
24    font-family: serif;
25}
26
27.font-family-sans-serif {
28    font-family: sans-serif;
29}
30
31.font-family-monospace {
32    font-family: monospace;
33}
34
35.font-family-cursive {
36    font-family: cursive;
37}
38
39.font-family-fantasy {
40    font-family: fantasy;
41}

The font-family property can primarily specify the following two types of values:.

Specific font names: Specify the name of a particular font. Specify fonts that are installed on the system or available as web fonts.
- Example:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
Generic font family: Specify a group of fallback fonts to use when a specific font is unavailable.
- Example:
  - serif: Serif (e.g., Times New Roman, Georgia)
  - sans-serif: Sans-serif (e.g., Arial, Verdana)
  - monospace: Monospace (e.g., Courier New, Lucida Console)
  - cursive: Cursive (e.g., Comic Sans MS)
  - fantasy: Fantasy (e.g., Papyrus, Impact)

How to Specify `font-family`

When specifying multiple fonts, it is recommended to separate font names with commas and list a generic font as a fallback at the end.

1p {
2    font-family: "Times New Roman", Georgia, serif;
3}

In this case, if Times New Roman is unavailable, Georgia is used, and if neither is available, a serif font is used.

The `font-weight` Property

 1/* Keyword Values */
 2.font-weight-normal {
 3    font-weight: normal; /* Standard thickness (usually 400) */
 4}
 5
 6.font-weight-bold {
 7    font-weight: bold; /* Bold (usually 700) */
 8}
 9
10.font-weight-bolder {
11    font-weight: bolder; /* Bolder than the parent element */
12}
13
14.font-weight-lighter {
15    font-weight: lighter; /* Lighter than the parent element */
16}
17
18/* Numeric Values */
19.font-weight-100 {
20    font-weight: 100; /* Thin (Thin) */
21}
22
23.font-weight-200 {
24    font-weight: 200; /* Extra Light */
25}
26
27.font-weight-300 {
28    font-weight: 300; /* Light */
29}
30
31.font-weight-400 {
32    font-weight: 400; /* Normal */
33}
34
35.font-weight-500 {
36    font-weight: 500; /* Medium */
37}
38
39.font-weight-600 {
40    font-weight: 600; /* Semi Bold */
41}
42
43.font-weight-700 {
44    font-weight: 700; /* Bold */
45}
46
47.font-weight-800 {
48    font-weight: 800; /* Extra Bold */
49}
50
51.font-weight-900 {
52    font-weight: 900; /* Black */
53}

font-weight is a CSS property used to specify the thickness of text. It plays a significant role in the visual emphasis and style of text and is used to change the font style. font-weight can be specified using numbers or keywords to indicate a range of thicknesses from thin to bold.

Main Values of `font-weight`

Keywords

1p {
2    font-weight: normal; /* Default thickness */
3}

normal represents the standard font weight. It typically corresponds to 400.

1p {
2    font-weight: bold; /* Bold */
3}

bold represents bold text. It typically corresponds to 700.

1p {
2    font-weight: bolder; /* Bolder than the parent element's font-weight */
3}

bolder represents text that is bolder than its parent element.

1p {
2    font-weight: lighter; /* Lighter than the parent element's font-weight */
3}

lighter represents text that is lighter than its parent element.

Numerical Values

1p {
2    font-weight: 300; /* Light text */
3}
4
5h1 {
6    font-weight: 700; /* Bold text */
7}

font-weight can also be specified as a number, ranging from 100 to 900. Smaller numbers result in thinner text, and larger numbers result in bolder text. Usually, font families support a range of specific thicknesses, but not all numbers are available for all fonts.

100: Thin
200: Extra Light
300: Light
400: Normal
500: Medium
600: Semi Bold
700: Bold
800: Extra Bold
900: Black

Examples of How to Use `font-weight`

 1h1 {
 2    font-weight: 900; /* Black (Extra Bold) */
 3}
 4
 5p.normal {
 6    font-weight: normal; /* Standard thickness */
 7}
 8
 9p.bold {
10    font-weight: bold; /* Bold */
11}
12
13p.lighter {
14    font-weight: lighter; /* Lighter than the parent element */
15}
16
17p.custom-weight {
18    font-weight: 500; /* Medium */
19}

Practical Usage

Standard text usually uses 400 (normal).
For headings or emphasized parts, it is common to use 700 (bold).
Depending on the design, intermediate weights like 500 or 600 may also be used to avoid overemphasis.

Summary

font-weight is a property specifying the thickness of text, using keywords like normal or bold, or numbers from 100 to 900.
lighter and bolder adjust relatively to the parent element's thickness.
Choosing an appropriate font-weight based on design and readability is important.

The `font-style` Property

 1/* Font style examples */
 2.font-style-normal {
 3    font-style: normal; /* Normal font style */
 4}
 5
 6.font-style-italic {
 7    font-style: italic; /* Italic */
 8}
 9
10.font-style-oblique {
11    font-style: oblique; /* Slanted text */
12}
13
14.font-style-oblique-20deg {
15    font-style: oblique 20deg; /* Slanted text with a 20-degree angle */
16}

font-style is a CSS property used to specify the style of characters, particularly for applying italic or normal styles. This property is often used for text emphasis and design, especially in titles and quotations.

Main Values of `font-style`

`normal`

1p {
2    font-style: normal;
3}

normal is the standard character style (normally upright characters).

`italic`

1p {
2    font-style: italic;
3}

italic makes the text italic (slanted). This style can be applied if the font family supports italics.

`oblique`

1p {
2    font-style: oblique;
3}

oblique makes the text slanted. Unlike italic, if the font does not have an italic version, this may artificially slant the text.

`oblique <angle>`

1p {
2    font-style: oblique 20deg;
3}

Specify an angle with oblique to slant the text by the specified angle. This specification is for further customizing oblique. Currently, most browsers do not support angle specification, but some do.

`font-style` usage

italic is often used for emphasis, quotations, and book titles.
oblique is often used when a font does not include an italic style, as a means to slant text artificially.
normal is used when reverting to a normal text style.

Summary

font-style is used to control the slant of text, with three main values: normal, italic, and oblique.
In design, italics are often used for emphasizing text, and if the font does not support it, oblique can be used to slant the text.

`color` property

 1/* Color examples */
 2.color-red {
 3    color: red;
 4}
 5
 6.color-hex {
 7    color: #FF5733;
 8}
 9
10.color-rgb {
11    color: rgb(255, 87, 51);
12}
13
14.color-rgba {
15    color: rgba(255, 87, 51, 0.7);
16}
17
18.color-hsl {
19    color: hsl(14, 100%, 60%);
20}
21
22.color-hsla {
23    color: hsla(14, 100%, 60%, 0.7);
24}

The color property is a fundamental property in CSS to specify the color of text. It is used to change the text color of HTML elements and can specify colors in various formats.

Explanation:

The color-red class specifies the text color as red using a keyword.
- You can specify color names such as red, blue, green which are defined in CSS.
The color-hex class specifies colors using hexadecimal color codes.
- You can specify with 3 digits like #F00. In this case, #F00 is the same color as #FF0000.
The color-rgb class specifies colors using the RGB format.
- RGB: Specifies the red, green, and blue components within a range from 0 to 255.
The color-rgba class uses RGBA format to add transparency.
The color-hsl class specifies colors using the HSL format.
- Colors can be specified with hue, saturation, and lightness. Hue is specified from 0 to 360 degrees, and saturation and lightness are specified from 0% to 100%.
The color-hsla class uses HSLA format to add transparency.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

CSS `@` Rules Text-related CSS properties

Font-related CSS Properties

YouTube Video

Creating HTML for preview

Typography (Font-Related)

font-size property

Main ways to specify values

Absolute values(px, pt)

Relative values(em, rem, %)

Keywords

Relative keywords

Common usage examples

Examples of font size adjustments

Conclusion

The font-family Property

How to Specify font-family

The font-weight Property

Main Values of font-weight

Keywords

Numerical Values

Examples of How to Use font-weight

Practical Usage

Summary

The font-style Property

Main Values of font-style

normal

italic

oblique

oblique <angle>

font-style usage

Summary

color property

Explanation:

YouTube Video

`font-size` property

The `font-family` Property

How to Specify `font-family`

The `font-weight` Property

Main Values of `font-weight`

Examples of How to Use `font-weight`

The `font-style` Property

Main Values of `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

`font-style` usage

`color` property