The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Scale the entire page with font-size

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #157807


    There are some articles about using html{font-size: 62.5%} body{font-size: 1.4rem}, the base 10 trick (not be confused with body{font-size: 62.5%}). Sure the base 10 is useful, and what about scalability?

    My intention is to use it to scale all (width, height, margins … all rem units), with only the change of one property in @media. Is it safe? or is totally hacky my intention? There is a better approach?

    Example Code:

    html {font-size: 58.3%;}
    @media (min-width: 60em) {
        html {font-size: 62.5%;}
    @media (min-width: 78em) {
        html {font-size: 66.6%;}
    body {font-size: 1.5rem;}

    In this exemple the font-size wild be: 14px -> 15px -> 16px, adds one pixel every step, not only font-size but also to all rem elements.

    ps – I am aware of this bug.

    sorry for my bad english.


    Thanks gcyrillus, it is a great idea. The support is a little worse of rem units and has some issues in ie 9 and 10 ( nothing new), I will study it.

    And about the above example, any thought?

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.