Font-sizing 62.5% and rems

[mhulse]

html {
    font-size: 62.5%; /* Root font size of `10px`. */
}
body {
    /* `16px` base font size: */
    font: 400 1.6rem/1.4 'Raleway', sans-serif; /* Use `em` if you want the property to scale according to its font size and `rem` for everything else. */
}

Related #22

[mhulse]

Updated:

/*
Conversions based on `16px` browser default size:
 `6px` = `37.5%`
 `7px` = `43.8%`
 `8px` = `50.0%`
 `9px` = `56.3%`
`10px` = `62.5%`
`11px` = `68.8%`
`12px` = `75.0%`
`13px` = `81.3%`
`14px` = `87.5%`
`15px` = `93.8%`
`16px` = `100.0%`
*/

html { font-size: 50%; } /* Root font size of `8px`. */
@media screen and (min-width: 35.5rem) {

    html { font-size: 62.5%; } /* `10px` */

}
@media screen and (min-width: 80rem) {

    html { font-size: 87.5%; } /* `14px` */

}

… and then size everything off of the 10px value, like:

h1 { font-size: 3rem; }

[mhulse]

Another example:

/*
Conversions based on `16px` browser default size:
 `6px` = `37.5%`
 `7px` = `43.8%`
 `8px` = `50.0%`
 `9px` = `56.3%`
`10px` = `62.5%`
`11px` = `68.8%`
`12px` = `75.0%`
`13px` = `81.3%`
`14px` = `87.5%`
`15px` = `93.8%`
`16px` = `100.0%`
*/

html { font-size: 62.5%; } /* Root font size of `10px`. */
@media (min-width: 48em) { /* ≥ 480px */
    html { font-size: 75.0%; } /* `12px` */
}
@media screen and (min-width: 120em) { /* ≥ 1920px */
    html { font-size: 87.5%; } /* `14px` */
}

body {
    /* `16px` base font size: */
    font: 400 1.6rem/1.4 Roboto, Arial, sans-serif; /* Use `em` if you want the property to scale according to its font size and `rem` for everything else. */
    /* Weights: 100 thin, 300 light, 400 normal, 500 medium, 700 bold, 900 ultra-bold */
}

[mhulse]

Looks like latest bootstrap does this:

https://getbootstrap.com/docs/4.0/content/typography/#responsive-typography

Though, not sure why they recommend using REM for base font size. I think I like using percents here.

[mhulse]

html {
    font-size: 50%; /* 8px */
}
@media (min-width: 576px) {
    html {
        font-size: 56.3%; /* 9px */
    }
}
@media (min-width: 768px) {
    html {
        font-size: 62.5%; /* 10px */
    }
}
@media (min-width: 992px) {
    html {
        font-size: 68.8%; /* 11px */
    }
}
@media (min-width: 1200px) {
    html {
        font-size: 75.0%; /* 12px */
    }
}

/*
Conversions based on `16px` browser default size:
 `6px` = `37.5%`
 `7px` = `43.8%`
 `8px` = `50.0%`
 `9px` = `56.3%`
`10px` = `62.5%`
`11px` = `68.8%`
`12px` = `75.0%`
`13px` = `81.3%`
`14px` = `87.5%`
`15px` = `93.8%`
`16px` = `100.0%`
*/

body {
    font: 400 1.6rem/1.2 arial, sans-serif; /* 16px @ 62.5% */
}

[mhulse]

Bootstrap 4-specific:

/* xs */
html {
    font-size: 50%; /* 8px */
}

/* sm */
@media (min-width: 576px) {
    html {
        font-size: 56.3%; /* 9px */
    }
}

/* md */
@media (min-width: 768px) {
    html {
        font-size: 62.5%; /* 10px */
    }
}

/* lg */
@media (min-width: 992px) {
    html {
        font-size: 68.8%; /* 11px */
    }
}

/* xl */
@media (min-width: 1200px) {
    html {
        font-size: 75.0%; /* 12px */
    }
}

/*
Conversions based on `16px` browser default size:
 `6px` = `37.5%`
 `7px` = `43.8%`
 `8px` = `50.0%`
 `9px` = `56.3%`
`10px` = `62.5%`
`11px` = `68.8%`
`12px` = `75.0%`
`13px` = `81.3%`
`14px` = `87.5%`
`15px` = `93.8%`
`16px` = `100.0%`
*/

body {
    font: 300 1.6rem/1.2 arial, "Nunito Sans", sans-serif; /* 16px @ 62.5% */
}

[mhulse]

Here’s an example of applying this technique on a modular level: https://codepen.io/mhulse/pen/zYxaYXz?editors=0100