CSS font size


#1

What is the standard font size for in pixels.


#2

There is no real standard, as such, but out of the box a browser will render the default size set on the user’s device. On a desktop and laptop it will be ~16px for a capital X (unless the user has changed it).

As a general rule, I always start with the body having a font size of 100% so that the user’s preferred size is adopted as the base. After that I use em's so proportion is maintained.

If not zoomed in or out, the font size of this text is 14px set by the site style sheet.


#3

Extra Study

Be sure to do lots of experimenting with raw html sprinkled with CSS for effect. To be really effective at CSS design we need to know not just how to do things, but what happens when we do things.

CSS is entirely declarative. There is no logic, only design and purpose. Learn all the default styles of every HTML element when a page has no style sheet of its own.

Here is an example of raw testing…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Computed Font Size</title>
<style>
body {
  font-size: 100%;
}
li {
  font-size: 0.85em;
}
</style>
</head>
<body>
<p>TEXT</p>
<ul>
<li>TEXT
<ul>
<li>TEXT
<ul>
<li>TEXT
<ul>
<li>TEXT</li>
</ul></li>
</ul></li>
</ul></li>
</ul>
</body>
</html>

computed_font_size


#4

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