Utilizing the latest CSS units, vw and vh (viewport width/height), can address this design concern.
For detailed insights, refer to an insightful article on css-tricks illustrating the application of these units for typography.
Below is an example extracted from the article:
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
Thus, h1 will exhibit a font size equivalent to 5.9% of the viewport width, etc.
Nonetheless, employing viewport units exclusively for font-size might lead to issues whereby under extremely narrow viewports, the text size could become too small or vice versa.
To tackle this challenge effectively, adopting a method like Fluid Type also known as CSS Locks can be advantageous.
A CSS lock involves defining:
- a minimum value and a maximum value,
- two breakpoints (typically based on viewport width),
- and between those breakpoints, the actual value linearly transitions from the minimum to the maximum.
(Refer to this article on CSS locks explaining the intricate math behind it in detail.)
Suppose we want to implement the above technique with a scenario where the minimal font size equals 16px at a viewport width of 600px or less, gradually increasing until reaching a maximum of 32px at a viewport width of 1200px.
We can utilize this SASS mixin which handles all the equations, making the CSS appear as follows:
div {
/* Gradually increase font-size from 16->32px
within a viewport range of 600px-> 1200px */
@include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
div {
font-size: 16px;
}
}
@media screen and (min-width: 1200px) {
div {
font-size: 36px;
}
}
// ----
// libsass (v3.3.6)
// ----
// =========================================================================
//
// PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
// ---------------------------------------------------
// Indrek Paas @indrekpaas
//
// Inspired by Mike Riethmuller's Precise control over responsive typography
// http://madebymike.com.au/writing/precise-control-responsive-typography/
//
// `strip-unit()` function by Hugo Giraudel
//
// 11.08.2016 Remove redundant `&` self-reference
// 31.03.2016 Remove redundant parenthesis from output
// 02.10.2015 Add support for multiple properties
// 24.04.2015 Initial release
//
// =========================================================================
@function strip-unit($value) {
@return $value / ($value * 0 + 1);
}
@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
@each $property in $properties {
#{$property}: $min-value;
}
@media screen and (min-width: $min-vw) {
@each $property in $properties {
#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
}
}
@media screen and (min-width: $max-vw) {
@each $property in $properties {
#{$property}: $max-value;
}
}
}
// Usage:
// ======
// /* Single property */
// html {
// @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
// }
// /* Multiple properties with same values */
// h1 {
// @include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
// }
////////////////////////////////////////////////////////////////////////////
div {
@include fluid-type(font-size, 600px, 1200px, 16px, 32px);
}
@media screen and (max-width: 600px) {
div {
font-size: 16px;
}
}
@media screen and (min-width: 1200px) {
div {
font-size: 36px;
}
}
<div>Responsive Typography technique known as Fluid Type or CSS Locks.
Resize the browser window to see the effect.
</div>
For Deeper Understanding
Enhance knowledge about precise control over responsive typography
Learn more about Fluid Responsive Typography With CSS Poly Fluid Sizing
Insights into non-linear interpolation in CSS