Get best of the week

Responsive Font. Adapting text between layout and minimum values

Responsive or responsive font is the dream of any web developer. I reviewed many options for implementation, sat in the evening and came up with a reliable working option. I want to share it with you. Bonus SCSS Mixin!


So the challenge. Indicate the value according to the layout, as well as the minimum value at which the text or title would look good on mobile devices, for example iPhone 5 (320px). In this case, the font would adapt, increasing or decreasing depending on the width of the screen.

We take the initial values ​​from the layout, for example, the H1 header with a size of 40px. We also need the width of the entire canvas layout, for example 1280px.



To get the minimum font value, we make up the header according to the layout and, using the Chrome developer tools (F12), select the desired minimum screen size and select the font size, changing the value until the text looks adequate. I got 24px



after that in CSS, instead of font-size: 40px; write the following.

font-size: calc(24px + 16 * (100vw / 1280));

Where 24px is our minimum font, 16 is the difference between the font in layout 40 and the minimum font in 24 (40-24 = 16). 100vw is the full current width of the viewport (screen); 1280 is the width of the layout.

We test and get a responsive font that fully matches the size of the layout.

But, at a size of 320px, we will not see the desired result, namely a 24px font. This is due to the fact that we did not specify the minimum screen size in exactly 320px.



To solve the situation, we write a media request for 767px, and inside we change the formula:

@media (min-width: 767px){
 h1 {
  font-size: calc(24px + (16 + 16 * 0.7) * ((100vw - 320px) / 1280));
 }
}

Here we subtract 320px from the full width of the viewport, as well as adding an additional number of 16 we add 70% (16 + 16 * 0.7). We

check and see the full compliance with the task! At the same time, the transition to break point is made seamlessly and not noticeably!

Of course, we can close all this in the SCSS mixin:

$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
	$addSize: $pcSize - $mobSize;
	$addMobSize: $addSize + $addSize * 0.7;
	@media (max-width: 767px) {
		font-size: calc(#{$mobSize + px} + #{$addMobSize} * ((100vw - 320px) / #{$maxWidth}));
	}
	@media (min-width: 767px) {
		font-size: calc(#{$mobSize + px} + #{$addSize} * (100vw / #{$maxWidth}));
	}
}

And connect as follows:

h1{
 @include adaptiv-font(40, 24);
}


You can completely get rid of the media query:

$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
	$addSize: $pcSize - $mobSize;
	$maxWidth: $maxWidth - 320;
	font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}

I will be glad to read in the comments how else this solution can be improved. Thank you for the attention!

Based on materials from the video " Adaptive Font. An example of the implementation of a responsive (rubber) font on CSS + SCSS mixin " On the YouTube channel " Freelancer for Life "

More articles:


All Articles