Search code examples
cssaccessibilityfont-size

Manipulate absolute and relative front-size in CSS


What defines the algorithm behind absolute and relative font sizes?

For Example: font-size: smaller or font-size: small

I know that this relative/absolute font-size declaration makes the font smaller by a certain percentage, but what is defining this percentage, and how can I manipulate it?

I'm aware that there are ways to achieve the same result in different ways. But I would love to use this in my CSS by having control over the final result.

Couldn't find any explanation yet. https://developer.mozilla.org/en-US/docs/Web/CSS/font-size


Solution

  • I know that this relative/absolute font-size declaration makes the font smaller by a certain percentage, ...

    No it doesn't. The ratios differ. See the table at https://www.w3.org/TR/css-fonts-4/#absolute-size-mapping. Browsers may tweak the values as they see fit, on a per font basis if necessary.

    how can I manipulate it?

    You can't. Skip the named font sizes and just specify the pixel sizes, em/rem ratios or percentage values as you require them.