I was reading about relative and absolute size in CSS and came across this question.
what's the difference between xx-large and larger other than absolute and relative? also what is meant by scaling factor?
The larger seems to be smaller than xx-large in the browser. why?
.one{ font-size:xx-large;
}
.two{ font-size:larger;
}<!DOCTYPE html>
<head> <title>CSS</title> <link rel="stylesheet" href="style.css">
</head>
<body> <h1>hello</h1> <h1>hello</h1>
</body>
</html>1 Answer
Sometimes larger is bigger than xx-large, and sometimes the opposite is true. One is a relative size value and the other is an absolute size value. See the examples below for an illustration.
larger (not to be confused with large) is a relative size keyword, which will increase the size of the text one step from whatever it currently is.
xx-large is an absolute size keyword, which sets the size of the text to a specific size, regardless of what its current size is.
For more information, refer to Mozilla's CSS docs on the font-size property.
Example 1
Here, the font-size of the body element is set to 24px.
Adding xx-large to a paragraph sets its size absolutely to 32px.
Adding larger to a paragraph increments the base size set on the body relatively to 28.8px.
body { font-size: 24px; }
.xx-large { font-size: xx-large; }
.larger { font-size: larger; }<p>base size</p>
<p>xx-large size</p>
<p>larger size</p>Example 2
If we change the font-size of the body element is set to 48px, we can see the difference between these two values.
Adding xx-large to a paragraph still sets its size absolutely to 32px.
However, adding larger to a paragraph increments the base size set on the body relatively to 57.6px.
body { font-size: 48px; }
.xx-large { font-size: xx-large; }
.larger { font-size: larger; }<p>base size</p>
<p>xx-large size</p>
<p>larger size</p>
