It is quite difficult to manage consistent typographic rhythm in web design. This task gets even more challenging when you have a responsive type question. However, you can now do all this easily, with Sass maps.
It is one thing to write the code but quite a different thing altogether to keep track of the font values size for each breakpoint – and this is just for the paragraphs. Add in h1 to h6 S, each having a font size that is different for every breakpoint and the entire process becomes burdensome, more so in instances where the font does not scale linearly.
If you have attempted tackling responsive type in web design, the example below is something you have experienced all too often.
p { font-size: 14px; }
@media screen and (min-width: 450px) {p { font-size: 15px; }}
@media screen and (min-width: 630px) {p { font-size: 13px; }}
@media screen and (min-width: 1024px) {p { font-size: 15px; }
Sass variables come in handy towards making values reusable in each aspect of your web design project. However, their management for responsive font size is difficult, and often becomes a nightmare for many.
$p-font-size-mobile : 14px;
$p-font-size-small : 15px;
$p-font-size-medium : 16px;
$p-font-size-large : 18px;
$h1-font-size-mobile: 27px;
$h1-font-size-small : 30px;
$h1-font-size-medium: 32px;
$h1-font-size-large : 35px;
It is in instances such as these that loops and Sass maps become most effective: They have assisted me in the management of z-index, colors as well as values and more importantly the font sizes, as you will discover in the following examples.
Use of Sass Maps to Organize Font Sizes
We are going to begin with the creation of a Sass map that contains key-value pairs with the breakpoints serving as keys. In addition, the font will act as the corresponding values.
$p-font-sizes: (
null : 14px,
480px : 15px,
640px : 16px,
1024px: 18px
);
First of all, let’s keep the mobile in mind, and we shall see the key nu11 stands for the font size by default (certainly not within the media query), while the breakpoints adopt an ascending order.
Secondly, there is the mixin, which repeats itself through Sass map, leading to generation of ideal media queries.
@mixin font-size($fs-map) {
@each $fs-breakpoint, $fs-font-size in $fs-map {
@if $fs-breakpoint == null {
font-size: $fs-font-size;
}
@else {
@media screen and (min-width: $fs-breakpoint) {
font-size: $fs-font-size;
}
}
}
}
Note that the mixing, together with those that follow here, contains the most basic logic in programming. With the backing of SassScript, Sass (a range of extensions parched in), help in basic construction of programming possible. This includes statements such as if/else and each loops among others, used in programming.
On this note, I highly recommend documentation, which you should consider reading as soon as possible. The “power features” of Sass will help you see a whole new dimension of what you can achieve with Sass.
It is far easier to keep track of and manage font sizes. You should create a map for each new element then use the mixin in the most convenient selector.
$h1-font-sizes: (null : 27px, 470px : 30px, 630px : 32px, 1024px: 33px);
h1 { @include font-size($h1-font-sizes);}
Maintain font sizes to ensure they are consistent with different elements.
Conclusion
There are several approaches to responsive typography in web design as well as consistent vertical rhythm. These options are more than what we have covered here. However, I have given you an overview of what works for me most of the time. By use of this mixin, it is likely that you will note a duplication of media queries in the compiled CSS.
Numerous point of views have arisen as more people discuss the differences between duplicate media and group media queries; the use of @extend as opposed to mixins; the file and performance size. Nevertheless, tests have shown that the above have minimal to non-existent differences. The solution might not be the most powerful of them all, but it is surely the most effective way to extract values from existing maps.