Thanks to visit codestin.com
Credit goes to github.com

Skip to content

The <small> font size normalization is no longer necessary #89

@germanfrelo

Description

@germanfrelo

/**
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}

Chrome, Firefox, and Safari all render <small> elements with font-size: smaller, as the HTML Standard suggests.

Assuming this rule comes from the normalize.css reset, this is the commit that explains the rule:

csstools/normalize.css@0cdbf7c

Adjust small font size normalization
Make the font size for small not quite so small. The default value of
smaller doesn't scale the base font size down by the same proportion
whatever the base size. IE 6/7/8 end up rendering small text larger than
most modern browsers. Opera can render it slightly smaller than Chrome
and Firefox when the base font size is relatively large.
The previous size of 75% was a bit too small.

It's from 2012. It mentions IE 6/7/8 and Opera as the ones that don't render it well compared to modern browsers like Chrome and Firefox. Possibly related: https://alistapart.com/article/howtosizetextincss/.

I ran a simple test in the latest versions (as of this writing) of Chrome (131.0.6778.140), Safari (18.1.1), and Firefox (133.0.3), all on macOS:

Example of <small> with a parent paragraph with a font size of 16px, rendering the <small> element with a computed value of 13.3333px (ratio is 0.8333):

small-x1

The same as above, but the parent paragraph has a font size of 32px, and the <small> element renders with a computed value of 26.6667px (ratio is 0.8333):

small-x2

In both cases, the ratio is the same in the three browsers.

@atjn I hope you don't mind me pinging you, but I saw that you reviewed some outdated rules in August, and I was wondering if you knew anything about this rule.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions