<Saief/>

Responsive Typography | Fluid Font Size, SASS Mixin, Utility Class

|

, ,

|

|

6 minutes

What is fluid typography?

Fluid typography is a technique that allows the text size and line height to adjust according to the width of the viewport, or the screen size of the device. This creates a more fluid and responsive design, as the text adapts to different screen sizes and orientations. Fluid typography can improve the readability, accessibility, and aesthetics of web pages, as well as reduce the need for media queries and breakpoints .

How to use fluid typography?

One way to achieve fluid typography is to use a combination of viewport units, such as vw (viewport width), and the CSS calc() function, which can perform calculations with different units. For example, the following code snippet sets the font size to 16px at a minimum viewport width of 320px, and increases it linearly until it reaches 22px at a maximum viewport width of 1000px:

html {
  font-size: 16px;
}

@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}

@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}

Here is the formula to calculate this fluid font-size,

$$\text{font_size} = \text{min_fontsize } + \text{ fontsize_difference} \times \frac{\text{ 100vw } – \text{ min_viewport_size}}{\text{viewport_difference}}$$

Another way to achieve fluid typography is to use the CSS clamp() function, which can set a minimum, maximum, and preferred value for a property. For example, the following code snippet sets the font size to be between 16px and 22px, and scales it proportionally to the viewport width within that range:

html {
  font-size: clamp(16px, 4vw, 22px);
}

The number before vw in clamp(16px, 4vw, 22px) is the coefficient that determines how fast the font size changes with the viewport width. The higher the number, the more responsive the font size is. The lower the number, the more fixed the font size is. For example, if you change 4vw to 8vw, then the font size will increase twice as fast as the viewport width increases. If you change 4vw to 2vw, then the font size will increase half as fast as the viewport width increases.

There is no definitive rule on what number to put before vw, as it depends on your design preferences and goals. However, some general guidelines are:

  • Use a smaller number (such as 2vw or 3vw) if you want a more subtle and consistent typography that does not vary too much across different screen sizes.
  • Use a larger number (such as 6vw or 8vw) if you want a more dramatic and expressive typography that adapts more to different screen sizes and orientations.
  • Use a moderate number (such as 4vw or 5vw) if you want a balanced and flexible typography that scales well with different screen sizes but does not lose its readability or aesthetics.

You can also use different numbers for different elements or breakpoints, depending on your design needs. For example, you can use a larger number for headings and a smaller number for body text, or you can use a smaller number for mobile devices and a larger number for desktop devices. You can experiment with different values and see how they affect your typography and layout.

Why is fluid typography important?

Fluid typography is an important skill for web developers and designers, as it can enhance the user experience and adapt to different devices and contexts. It can also create more dynamic and expressive typography, as the text size and line height can vary depending on the content and layout of the page. Fluid typography is a modern and innovative way to create responsive web pages that are accessible and beautiful.

I totally understand how frustrating it can be to calculate font-sizes every time you need to style a layout. But don’t worry, I’ve got a solution that will make your life a lot easier! With just one line of code, you can use the @include fluid-font-size(48px, 60px, 576px, 1366px) mixin to set minimum and maximum sizes for your fonts and viewport. This Sass mixin does all the complex calculations behind the scenes, so you don’t have to worry about it. It sets a minimum font-size of 48px for viewports smaller than 576px, and a maximum font-size of 60px for viewports larger than 1366px. For viewports between 576px and 1366px, it sets a variable size that always stays between the maximum and minimum values. It’s super easy and flexible! Let’s take a closer look at how it works.


Fluid Font Size Mixin

This Sass mixin allows you to create fluid font sizes that will scale responsively based on the viewport width. It takes two arguments:

  • $min_font_size : The minimum font size in pixels.
  • $max_font_size : The maximum font size in pixels.
  • (optional) $min_viewport : The minimum viewport width in pixels.
  • (optional) $max_viewport : The maximum viewport width in pixels.

The mixin will then calculate a fluid font size that falls within that range, based on the current viewport width.


/**
* Fluid Font Size Mixin - @include fluid-font-size()
* @param {$min_font_size} - Number in px
* @param {$max_font_size} - Number in px,
* @param {$min_viewport} - Number in px (optional | default 576px)
* @param {$max_viewport} - Number in px (optional | default 1366px)
* @returns - Font Size using clamp()
* 
* Gist: https://gist.github.com/iamsaief/dad6b1d3b4bb96d374d415cff0e01dfd 
*/

@mixin fluid-font-size($min_font_size, $max_font_size, $min_viewport: 576px, $max_viewport: 1366px) {
	font-size: clamp(
		$min_font_size,
		get-fluid-size($min_font_size, $max_font_size, $min_viewport, $max_viewport),
		$max_font_size
	);
}

@function get-fluid-size($min_font_size, $max_font_size, $min_viewport, $max_viewport) {
	$min_font_size_in_rem: #{strip-unit($min_font_size) / 16}rem;
	$font_size_diff: strip-unit($max_font_size) - strip-unit($min_font_size);
	$viewport_diff: strip-unit($max_viewport) - strip-unit($min_viewport);

	@return calc($min_font_size_in_rem + ($font_size_diff) * ((100vw - $min_viewport) / ($viewport_diff)));
}

@function strip-unit($number) {
	@if type-of($number) == "number" and not unitless($number) {
		@return $number / ($number * 0 + 1);
	}

	@return $number;
}

// $fluid-sizes($name, $min, $max)
$fluid-sizes: ("h1" 60px 48px, "h2" 48px 36px, "h3" 36px 30px, "h4" 30px 24px, "h5" 24px 20px, "h6" 20px 18px);

@each $name, $max, $min in $fluid-sizes {
	.fluid-text-#{$name} {
		@include fluid-font-size($min, $max);
	}
}

Usage

There are 3 ways to use the mixin:

  1. As a utility class: You can apply these classes to your elements or you could create your own utility classes.
  2. @include mixin: You can also use the mixin directly in your Sass code.
  3. @extend utility class: You can also use the @extend at-rule to extend the utility classes created by the mixin.
<!-- Usage #1 - as utility class  -->

<h1 class="fluid-text-h1">I am heading 1</h1>
<h2 class="fluid-text-h2">I am heading 2</h2>
...
...
<h6 class="fluid-text-h6">I am heading 6</h6>

<!-- utility classes
.fluid-text-h1 {
  font-size: clamp(48px, 3rem + 12 * (100vw - 576px) / 790, 60px);
}

.fluid-text-h2 {
  font-size: clamp(36px, 2.25rem + 12 * (100vw - 576px) / 790, 48px);
}

...
...

.fluid-text-h6 {
  font-size: clamp(18px, 1.125rem + 2 * (100vw - 576px) / 790, 20px);
}
 -->


// Usage #2 - @include mixin
body {
	@include fluid-font-size(14px, 16px);
}

// Usage #3 - @extend utility class
h1 {
	@extend .fluid-text-h1;
}

Benefits of using the mixin

There are several benefits to using the fluid font size mixin:

It makes your code more reusable and maintainable. It allows you to create responsive font sizes that will scale well on all devices. It can help you to improve the readability of your website or web application.

The fluid font size mixin is a powerful tool that can help you to create responsive and maintainable CSS code. It is easy to use and offers several benefits, such as improved readability and reusability.

Happy Coding, Cheers 🥂

Tags | , ,