-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Font-sizing 62.5% and rems #25
Comments
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 h1 { font-size: 3rem; } |
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 */
} |
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. |
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% */
} |
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% */
} |
Here’s an example of applying this technique on a modular level: https://codepen.io/mhulse/pen/zYxaYXz?editors=0100 |
Related #22
The text was updated successfully, but these errors were encountered: