Before reading on, you need to know what these things are: SCSS-mixins Fluid typography 1. Manual rescaling .title {font-size: 25px; @media (min-width: 800px) {font-size: 30px;} @media (min-width: 1200px) {font-size: 40px;}} // And continue doing this for every element Cons:- A lot of work/code/testing- Hard to keep relation between all font-sizes (Titles may become too small to make a difference in size in relation to the text) Pros:+ Perfect control over every font-size for every screen-width 2. REM-unit rescaling 2.1 Responsive REM-unit rescaling html {font-size: 12px; @media (min-width: 800px) {font-size: 14px;} @media (min-width: 1200px) {font-size: 16px;}} .title {font-size: 1.5rem;} .body {font-size: 1rem;} // And continue working with rem-font-sizes 2.2 Fluid REM-unit rescaling html {font-size: 16px; // Magic:@media (max-width: 1000px) {font-size: calc(12px + .4vw);}} .title {font-size: 1.5rem;} .body {font-size: 1rem;} // And continue working with rem-font-sizes Cons:- People tend to think in , not in -units, you can however work with a mixin to convert to .- (Limitted) testing needed to check if the font is scaled correctly- There is a linear relation between the font-sizes and this can be problematic on small screens, body-text may become to small or titles won’t be scaled small enough. px rem px rem Pros:+ Very fast to implement+ Fluid font-sizes are so impressive, developers will keep resizing their screen all day while listening to Louis Armstrong’s What A Wonderful World 3. Minimum-maximum based mixins Shamelessly stolen from (Sorry ) https://codepen.io/dbox/pen/meaMba Daniel Box @import 'path/to/fluid-type-mixin'; .title { fluid-type(28px, 52px);} @include .body { fluid-type(14px, 20px);} @include This generates this css: .title {font-size: calc(28px + 24 * ( (100vw - 420px) / 480));} screen and (max-width: 420px) {.title {font-size: 28px;}} screen and (min-width: 900px) {.title {font-size: 52px;}} @media @media .body {font-size: calc(14px + 6 * ( (100vw - 420px) / 480));} screen and (max-width: 420px) {.body{font-size: 14px;}} screen and (min-width: 900px) {.body{font-size: 20px;}} @media @media Cons:- The developer must pass a minimum and a maximum for evey font sizes to the mixin. - Hard to know the font-sizes at some point between the lower- and upper-range Pros:+ Straightfoward and easy to use 4. Automated font rescaling by the RFS-mixin Shamelessly referring to a mixin I made myself: https://github.com/twbs/rfs @import "~rfs/scss"; p { rfs(20);} @include h1 { rfs(64);} @include This generates this css: p {font-size: 1.25rem;} h1 {font-size: 4rem;} @media (max-width: 1200px) {h1 {font-size: calc(1.525rem + 3.3vw);}} Cons: You depend on a pre- or postprocessor like Sass, Less or Stylus or PostCSS. Pros: Font sizes will rescale for every screen or device, this prevents long words from being chopped off the viewport on small devices RFS will prevent the font size from rescaling too small so readability can be assured Super easy to use, just use the mixin (or property for PostCSS) instead of the property font-size responsive-font-size font-size The font sizes of all text elements will always remain in relation with each other Download RFS on or install with . github npm

CodePen

Super

Twitter

YouTube

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

4 techniques for responsive font sizing with SCSS

Too Long; Didn't Read

Companies Mentioned

Martijn Cuppens

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

4 techniques for responsive font sizing with SCSS

Too Long; Didn't Read

Companies Mentioned

Martijn Cuppens

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES