Setting min/max to font-size - How to use

HTML-CSS
1

Hi guys, I’d just like some more explanation on this topic.

I’m at the part where I learn how to set min and max values to font-size. I understand how to do that (e.g. font-size: min(5vw, 1em); ), however I do not understand the reasoning behind it.

Why do I need to put two values in brackets? What does each value mean? Why do I need to put two values, and why is not only one enough?

I tried to search online but I couldn’t find anything specific.

TIA for any answers

Tell us what’s happening:
Describe your issue in detail here.

   **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
   <title>Accessibility Quiz</title>
   <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
   <header>
     <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
     <h1>HTML/CSS Quiz</h1>
     <nav></nav>
   </header>
   <main></main>
 </body>
</html>


/* file: styles.css */
body {
	background: #f5f6f7;
	color: #1b1b32;
	font-family: Helvetica;
	margin: 0;
}

header {
 width: 100%;
	height: 50px;
	background-color: #1b1b32;
	display: flex;
}

#logo {
 width: max(100px, 18vw);
	background-color: #0a0a23;
 aspect-ratio: 35 / 4;
	padding: 0.4rem;
}

h1 {
color: #f1be32; 
font-size: min(5vw, 1.em);
}

   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Challenge: Step 11

Link to the challenge:

2

The min() function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. So the min function will evaluate each of the expressions and use the one that is the smallest.

1 Like
3

Thank you! So basically the second value would be the fallback option, got it now, thanks again!

4

There really is no fallback. The min function evaluates all the expressions listed and chooses the one that is the smallest. You can have more than two expressions in the list and it doesn’t matter what positions they are in. They all get evaluated and the smallest wins.

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.