A very simple and small (270 bytes) when M&G'd script to scale typography based on the viewport width.
function typeScale(){
var a = window,
b = document,
c = b.documentElement,
d = b.getElementsByTagName("body")[0],
x = a.innerWidth||c.clientWidth||d.clientWidth;
d.style.fontSize = x/375 + 15 + "px",
d.style.lineHeight = x/8000 + 1.4
}
window.addEventListener("resize",typeScale),
typeScale();#####which equates to...
| Viewport Width | font-size | em's equivalent | line-height |
|---|---|---|---|
| 400px | 16.067px | 1.004167 | 1.45 |
| 800 | 17.133 | 1.070833 | 1.5 |
| 1200 | 18.2 | 1.1375 | 1.55 |
| 1600 | 19.267 | 1.204187 | 1.6 |
| 2000 | 20.33 | 1.278333 | 1.65 |
###Demo
#####Questions
I don't want the line-height to change.
then remove d.style.lineHeight = x/8000 + 1.4, and the comma after the "px" on the previous line.
How do I change the rate at which the font-size and line-height grow?
font-size = x/α + β
where α = rate of growth,
x = width of viewport (px),
β = font-size @ width = 0
so in my equation α = 375, which means the font-size will grow 1px for every 375px increase in width, with a starting point of font-size: 15px @ width = 0.
calculating the line-height formula is pretty much the same
line-height = x/α + β
where α = rate of growth,
x = width of viewport (px),
β = line-height @ width = 0
so in my equation α = 8000, which means the line-height will grow 0.05 for every 400px increase in width, with a starting point of line-height: 1.4 @ width = 0.
I want my font-size expressed in ems or percentages
For ems the formula is
font-size = (x/α + β)/16
d.style.fontSize = x/6000 + 1.066667 + "em" // at defaults
and in percentages
font-size = (x/α + β)*6.25
d.style.fontSize = x/60 + 93.75 + "%" // at defaults
My font is unreadable on mobiles or massive on desktops
Every font is different, not just in style. Some fonts look tiny at 16px whilst others look relatively large. So you may very well need to tweek the formulae depending on what font you set as your base type. As a rule of thumb:
An increase in β will increase the font-size on mobiles.
An increase in α will decrease the font-size on desktops.
Remember to compensate though, so If your font looks too small on mobiles but just right on desktops then you should increase β (eg. to 16), but also increase α (eg. to 450).
Hopefully you can tweek the formula to fit your font.
no support for IE8 or earlier
function typeScale(){
var x = window.innerWidth,
b = document.getElementsByTagName("body")[0].style;
b.fontSize = x/375+15+"px",
b.lineHeight = x/8e3+1.4
}
window.addEventListener("resize",typeScale),
typeScale();function typeScale(){var e=window.innerWidth,t=document.getElementsByTagName("body")[0].style;t.fontSize=e/375+15+"px",t.lineHeight=e/8e3+1.4}window.addEventListener("resize",typeScale),typeScale();