7.1 Main Principles
Responsive fonts play a key role in creating responsive web design. Using relative units like vw, vh, vmin, and vmax allows fonts to dynamically change based on the viewport size, ensuring optimal text display across different devices. Let's dive into how these units work and how to use them to create responsive fonts.
Main Concepts
vw and vh:
vw(viewport width): 1vwunit is equal to 1% of the viewport widthvh(viewport height): 1vhunit is equal to 1% of the viewport height
vmin and vmax:
vmin(viewport minimum): 1vminunit is equal to 1% of the smaller viewport dimension (either width or height)vmax(viewport maximum): 1vmaxunit is equal to 1% of the larger viewport dimension (either width or height)
Benefits of Responsive Fonts:
- Improved Readability: the font size automatically adjusts to the screen size, ensuring comfortable reading on any device
- Design Flexibility: responsive fonts help maintain a harmonious and balanced design as the viewport size changes
- Unified Approach: using relative units for fonts allows for a consistent approach in creating responsive designs
7.2 Examples of Using vw and vh
Example 1: Base Font Size Using vw
Let's create an example where the font size changes based on the viewport width:
body {
font-size: 2vw; /* Font size equals 2% of the viewport width */
}
h1 {
font-size: 4vw; /* Font size of the heading equals 4% of the viewport width */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Font Using vw</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Responsive Heading</h1>
<p>This text resizes based on the viewport width.</p>
</body>
</html>
Code Explanation:
body { font-size: 2vw; }: sets the font size for text insidebodyto 2% of the viewport widthh1 { font-size: 4vw; }: sets the font size for theh1heading to 4% of the viewport width
Example 2: Base Font Size Using vh
Now let's create an example where the font size changes based on the viewport height:
body {
font-size: 2vh; /* Font size equals 2% of the viewport height */
}
h1 {
font-size: 4vh; /* Font size of the heading equals 4% of the viewport height */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Font Using vh</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Responsive Heading</h1>
<p>This text resizes based on the viewport height.</p>
</body>
</html>
Code Explanation:
body { font-size: 2vh; }: sets the font size for text insidebodyto 2% of the viewport heighth1 { font-size: 4vh; }: sets the font size for theh1heading to 4% of the viewport height
7.3 Examples of Using vmin and vmax
Example 1: Base Font Size Using vmin
Let's create an example where the font size changes based on the smaller viewport dimension:
body {
font-size: 2vmin; /* Font size equals 2% of the smaller viewport dimension */
}
h1 {
font-size: 4vmin; /* Font size of the heading equals 4% of the smaller viewport dimension */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Font Using vmin</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Responsive Heading</h1>
<p>This text resizes based on the smaller viewport dimension.</p>
</body>
</html>
Code Explanation:
body { font-size: 2vmin; }: sets the font size for text insidebodyto 2% of the smaller viewport dimensionh1 { font-size: 4vmin; }: sets the font size for theh1heading to 4% of the smaller viewport dimension
Example 2: Base Font Size Using vmax
Let's create an example where the font size changes based on the larger viewport dimension:
body {
font-size: 2vmax; /* Font size equals 2% of the larger viewport dimension */
}
h1 {
font-size: 4vmax; /* Font size of the heading equals 4% of the larger viewport dimension */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Font Using vmax</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Responsive Heading</h1>
<p>This text resizes based on the larger viewport dimension.</p>
</body>
</html>
Code Explanation:
body { font-size: 2vmax; }: sets the font size for text insidebodyto 2% of the larger viewport dimensionh1 { font-size: 4vmax; }: sets the font size for theh1heading to 4% of the larger viewport dimension
GO TO FULL VERSION