Default Unit for Font-Size

Default unit for font-size?

Per the "CSS Fonts Module Level 3" the font-size property can have values that are:

Value: <absolute-size> | <relative-size> | <length> | <percentage>

<absolute-size>, <relative-size>, and <percentage> are defined in the same spec, and are all either keywords (e.x. small, larger, etc) or have percentage units.

<length> being more generic is defined in "CSS Values and Units Module Level 3":

Lengths refer to distance measurements and are denoted by <length> in the property definitions. A length is a dimension. However, for zero lengths the unit identifier is optional (i.e. can be syntactically represented as the <number> 0).

What this means is that unitless numbers for font-size are invalid, with an explicit exception for 0.

---

With that said, what size is <div style="font-size: 20;">20 size</div> being rendered at?

The rendered font-size of an element will depend on a lot of things. However, if we're able to assume that

• the user hasn't customized their default font-size
• the browser is using default styles
• there are no parent elements that would otherwise change the font-size (e.x. <font>, <sub>, <h1>...yes it would be invalid markup to have those elements as parents, but it would still change the font-size)

Then the default font-size in every modern browser that I'm aware of currently is 16px.

What is the default unit if the specified font size has none?

So the Font tag had 7 degrees of freedom. You can specify a value between 1 and 7. 7 is largest and 3 is default

Font Tag

In CSS you have the font-size property, also 7 degrees of freedom, the constants for it are not numeric, and medium (which is the 3rd value) is the default.

FONT Tag   font-size CSS

N/A             xx-small         

       1          x-small           

       2          small              
       3          medium          (default values)
       4          large              
       5          x-large           
       6          xx-large         
       7          N/A                 

CSS font-size Property

So if you consider that the default values do not match up exactly betewen both standards, then we can assume that the standards are slightly different, without 1:1 mapping or meaning. Your value of 2, might be small and it might not. I do think that is probably is small though.

You will discover that other factors are coming into play with CSS, and you will generally discover other discrepancies that prevent a direct conversion between the Font tag and the CSS properties. You might be safe on this one, though, as these values are defined as "absolute sizes".

see: It Depends
see: Size to px

Default reference font-size of em?

Most major browsers have standard text set to a default font size of 16px.

From MDN:

If you haven't set the font size anywhere on the page, then it is the
browser default, which is often 16px.

It continues on to say:

So, by default 1em = 16px, and 2em = 32px. If you set a font-size of
20px on the body element, then 1em = 20px and 2em = 40px. Note that
the value 2 is essentially a multiplier of the current em size.

Whether the initial font size is declared on the body or html element is at the discretion of the browser maker. The W3C recommended default style sheet doesn't specify an element (or even a font size, for that matter).

measurement unit in css for font size

Generally, you should not change the font size of body text. The user has configured his browser to suit his display and his eyesight. If you force the font size to something else, the user may not be able to read the text.

Option to use pt as unit to define font size is meant to be used with printers, but it is not good idea to use it for screen. It tries to set absolute size ( 1pt=1/72in). Even if the text is correct size on your desktop PC, it is most likely not correct on a small phone screen. (A phone screen is viewed from shorter distance, so the font needs to be smaller.)
In addition to that, pt size depends on the dpi setting on users computer. Many users have wrong dpi setting (it depends on the monitor used), so the size of the font will not be what you expect.

The unit px is not good since the size of pixels wary between displays, as does users eyesight. However, it is useful if you want the text to be aligned correctly with an image, since the image (when displayed in actual size) is dimensioned as pixels.

In most cases, the size of body text should be 100% (i.e. do not change it). For other elements, use relative sizing (e.g. as %). If you must change the font size for body, the other elements will automatically change relative to that. The size given as % is size relative to the font size on parent element.

Default HTML font size

The default is 16px.

If you create an HTML file with any text in it, open it in Chrome, you can check the computed styles.

Is the default font-size of every browser 16px? Why?

The base font-size is determined by the users pre-defined preferences within the browser.

In almost every browser, 16px is the standard for proportional fonts. This can also change dependant on if the font uses serifs or is a fixed width font.

Just remember, em is relative to the element it is used on or relative to the inherited parents font-size, and is proportional to that. rem however, uses the root html elements.

For example:

html {
  font-size: 16px;
}
h1 {
  font-size: 2em; // 32px
}
p {
  font-size: 1em; // 16px
}
.someClass {
  font-size: .75em; // 12px
}
.someClass p {
  font-size: 2em; // 24px
}
.someClass p .test {
  font-size: 1.25rem; // 20px
}

<html>
<h1>2em Title Text</h1>
<p>Normal Element Text</p>
<div class="someClass">
  someClass font size
  <p>SomeClass with em</p>
  <p><span class="test">someClass p element with class test</span>
  </p>
</div>

</html>

---

Related Topics