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;
}

Viewports Units to the rescue?

h1 {
font-size: 2vw;
}

Statistical Linear Regression?

Scatter plot of font-size and corresponding Viewport width (Google Spreadsheets)

The trendline is the key to all of this

Linear equation definition
  • 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);
}

Can this be automated?

Polynomial Least Squares Fit

Polynomial regression trendline (Google Spreadsheets)
A 3rd degree polynomial equation
font-size: calc(3vw * 3vw); /* This doesn't work in CSS */

Breakpoints + Multiple Linear Equations

Linear Regression trendlines between multiple pairs of values (Google Spreadsheets)
// SCSSh1 {
@media (min-width:576px) {
font-size: calc(???);
}
@media (min-width:768px) {
font-size: calc(???);
}
}
Linear equation definition
Finding the slope and y-intercept of a linear equation
// 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);
}
https://codepen.io/jakobud/pen/vmKLYb

Conclusion

--

--

--

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.

Recommended from Medium

Animated source code statistics with Vizzu

CMS for the CMO, part 2

Making Horizontal Carousel Layout in Android

What’s the most popular programming language in 2019? Python vs Java vs C

Launching X11 RISC-V applications on QEMU (Debian)

UNDROP or RECOVER Table Programmatically

Introducing Google Fonts for Flutter v 1.0.0!

A Generative tree made for our Wedding 🤵👰

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jake Wilson

Jake Wilson

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

More from Medium

VS Code Snippets: let’s make unit testing a little less painful

Snippet for Angular unit testing using Spectator

Three.js- A JavaScript 3D Library

WebGL example image

How To Create A Data table in Angular 10 Using Bootstrap And Contrast

Object in JavaScript