Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Setting Font Size with Keywords Using CSS
The CSS font-size property can be set with absolute and relative keywords to scale text as desired. These predefined keywords provide consistent font sizing across different browsers and devices.
Syntax
selector {
font-size: keyword;
}
Font Size Keywords
The following table lists the standard keywords used with the font-size property −
| Keyword | Description |
|---|---|
| medium | Sets the font-size to a medium size (default value) |
| xx-small | Sets the font-size to an xx-small size |
| x-small | Sets the font-size to an extra small size |
| small | Sets the font-size to a small size |
| large | Sets the font-size to a large size |
| x-large | Sets the font-size to an extra-large size |
| xx-large | Sets the font-size to an xx-large size |
| smaller | Sets the font-size to a smaller size than the parent element |
| larger | Sets the font-size to a larger size than the parent element |
Example: Absolute Size Keywords
This example demonstrates different absolute size keywords −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: #f5f5f5;
padding: 20px;
border: 1px solid #ddd;
}
.xx-small { font-size: xx-small; }
.x-small { font-size: x-small; }
.small { font-size: small; }
.medium { font-size: medium; }
.large { font-size: large; }
.x-large { font-size: x-large; }
.xx-large { font-size: xx-large; }
</style>
</head>
<body>
<div class="container">
<p class="xx-small">This text is xx-small</p>
<p class="x-small">This text is x-small</p>
<p class="small">This text is small</p>
<p class="medium">This text is medium (default)</p>
<p class="large">This text is large</p>
<p class="x-large">This text is x-large</p>
<p class="xx-large">This text is xx-large</p>
</div>
</body>
</html>
A gray container displays seven paragraphs with progressively increasing font sizes from very small to very large text.
Example: Relative Size Keywords
This example shows how smaller and larger keywords work relative to parent elements −
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
font-size: medium;
background-color: #e8f4f8;
padding: 15px;
border: 2px solid #4CAF50;
margin: 10px 0;
}
.smaller { font-size: smaller; }
.larger { font-size: larger; }
</style>
</head>
<body>
<div class="parent">
Parent element with medium font size
<p class="smaller">Child with smaller font size</p>
<p class="larger">Child with larger font size</p>
</div>
</body>
</html>
A light blue container shows parent text in medium size, with one child paragraph smaller than the parent and another larger than the parent.
Conclusion
CSS font-size keywords provide a standardized way to set text sizes. Absolute keywords offer fixed sizing, while relative keywords (smaller and larger) adapt to their parent element's font size for responsive typography.
Updated on: 2026-03-15T14:12:42+05:30
354 Views
Advertisements