# CSS Poly Fluid Sizing using calc(), vw, breakpoints and linear equations

• The h1 at the small layout could be22px
• The h1 at the medium layout could be 24px
• The h1 at the large layout could be 34px
h1 {
font-size: 22px;
}
@media (min-width:576px) {
h1 {
font-size: 22px;
}
}
@media (min-width:768px) {
h1 {
font-size: 24px;
}
}
@media (min-width:992px) {
h1 {
font-size: 34px;
}
}
h1 {
font-size: 22px;
transition: font-size 0.2s;
}

h1 {
font-size: 2vw;
}

# Statistical Linear Regression?

## The trendline is the key to all of this

• m = slope
• b = the y-intercept.
• x = the current viewport width
• y = the resulting font-size

# How do I use this in CSS?

h1 {
font-size: calc({slope}*100vw + {y-intercept}px);
}

# Polynomial Least Squares Fit

font-size: calc(3vw * 3vw); /* This doesn't work in CSS */

# Breakpoints + Multiple Linear Equations

// SCSSh1 {
@media (min-width:576px) {
font-size: calc(???);
}
@media (min-width:768px) {
font-size: calc(???);
}
}
// SCSSh1 {
// Minimum font-size
font-size: 22px;
// Font-size between 576 - 768
@media (min-width:576px) {
\$map: (576px: 22px, 768px: 24px);
font-size: linear-interpolation(\$map);
}
// Font-size between 768 - 992
@media (min-width:768px) {
\$map: (768px: 24px, 992px: 34px);
font-size: linear-interpolation(\$map);
}
// Maximum font-size
@media (min-width:992px) {
font-size: 34px;
}
}
h1 {
font-size: 22px;
}
@media (min-width: 576px) {
h1 {
font-size: calc(1.04166667vw + 16px);
}
}
@media (min-width: 768px) {
h1 {
font-size: calc(4.46428571vw - 10.28571429px);
}
}
@media (min-width: 992px) {
h1 {
font-size: 34px;
}
}

# The Holy Grail of CSS sizing?

h1 {
\$map: (576px: 22px, 320px: 18px, 992px: 34px, 768px: 24px);
@include poly-fluid-sizing('font-size', \$map);
}

# Conclusion

--

--

--

## More from Jake Wilson

Full stack developer. Husband and father to three. I’m a total nerd.

Love podcasts or audiobooks? Learn on the go with our new app.

## Jake Wilson

Full stack developer. Husband and father to three. I’m a total nerd.