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 px, not in rem-units, you can however work with a mixin to convert px to rem.- (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. 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 https://codepen.io/dbox/pen/meaMba (Sorry Daniel Box) @import 'path/to/fluid-type-mixin'; .title {@include fluid-type(28px, 52px);} .body {@include fluid-type(14px, 20px);} This generates this css: .title {font-size: calc(28px + 24 * ( (100vw - 420px) / 480));}@media screen and (max-width: 420px) {.title {font-size: 28px;}}@media screen and (min-width: 900px) {.title {font-size: 52px;}} .body {font-size: calc(14px + 6 * ( (100vw - 420px) / 480));}@media screen and (max-width: 420px) {.body{font-size: 14px;}}@media screen and (min-width: 900px) {.body{font-size: 20px;}} 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 {@include rfs(20);} h1 {@include rfs(64);} 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 font-size mixin (or responsive-font-size property for PostCSS) instead of the font-size property The font sizes of all text elements will always remain in relation with each other Download RFS on github or install with npm. Before reading on, you need to know what these things are: SCSS-mixins Fluid typography SCSS-mixins SCSS-mixins Fluid typography 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 .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 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 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 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 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 px , not in rem -units, you can however work with a mixin to convert px to rem .- (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 What A Wonderful World 3. Minimum-maximum based mixins Shamelessly stolen from https://codepen.io/dbox/pen/meaMba (Sorry Daniel Box ) https://codepen.io/dbox/pen/meaMba Daniel Box @import 'path/to/fluid-type-mixin'; .title {@include fluid-type(28px, 52px);} .body {@include fluid-type(14px, 20px);} @import 'path/to/fluid-type-mixin'; .title {@include fluid-type(28px, 52px);} .body {@include fluid-type(14px, 20px);} This generates this css: .title {font-size: calc(28px + 24 * ( (100vw - 420px) / 480));}@media screen and (max-width: 420px) {.title {font-size: 28px;}}@media screen and (min-width: 900px) {.title {font-size: 52px;}} .body {font-size: calc(14px + 6 * ( (100vw - 420px) / 480));}@media screen and (max-width: 420px) {.body{font-size: 14px;}}@media screen and (min-width: 900px) {.body{font-size: 20px;}} .title {font-size: calc(28px + 24 * ( (100vw - 420px) / 480));}@media screen and (max-width: 420px) {.title {font-size: 28px;}}@media screen and (min-width: 900px) {.title {font-size: 52px;}} .body {font-size: calc(14px + 6 * ( (100vw - 420px) / 480));}@media screen and (max-width: 420px) {.body{font-size: 14px;}}@media screen and (min-width: 900px) {.body{font-size: 20px;}} 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 https://github.com/twbs/rfs @import "~rfs/scss"; p {@include rfs(20);} h1 {@include rfs(64);} 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);}} @import "~rfs/scss"; p {@include rfs(20);} h1 {@include rfs(64);} 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. 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 font-size mixin (or responsive-font-size property for PostCSS) instead of the font-size property The font sizes of all text elements will always remain in relation with each other 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 font-size mixin (or responsive-font-size property for PostCSS) instead of the font-size 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 github or install with npm . github npm
