To create a great visual hierarchy, consistency and contrast for typography, we need to implement a font scaling methodology that easy to implement and adapt to, at the end, make the designer and developer use typography on the same page, simplify our work process.
The basic theory is to find a base font size, a ratio, then use them to create a sequence of sizes that relate to one another in a meaningful way.
For example:
Code Block |
---|
$m-break: 56.25rem; //900px $base-font-size: 20px; 1rem; // 1rem = 16px $font-scale: 1.25; // Major Third $font-scale-mobile: 1.125; // Major Second $font-size-sm: $base-font-size / $font-scale; // 16px13px; // Function to calculate power @function pow($exponent) { $value: 1; @if $exponent > 0 { @for $i from 1 through $exponent { $value: $value * $font-scale; } } @return $value; } //Function to calculate power for mobile @function m-pow($exponent) { $value: 1; @if $exponent > 0 { @for $i from 1 through $exponent { $value: $value * $font-scale-mobile; } } @return $value; } h6 { font-size: $base-font-size; //20px16px } h5 { font-size: $base-font-size *m-pow(1); @include breakpoint($m-break) { font-size: $base-font-size *pow(1); //25px20px } } h4 { font-size: $base-font-size *m-pow(2); @include breakpoint($m-break) { font-size: $base-font-size *pow(2); //31.25px } } h3 { font-size: $base-font-size *m-pow(3); @include breakpoint($m-break) { font-size: $base-font-size *pow(3); //39px31px } } h2 { font-size: $base-font-size *m-pow(4); @include breakpoint($m-break) { //49px font-size: $base-font-size *pow(4); //39px } } h1 { font-size: $base-font-size *m-pow(5); //61px } @include breakpoint($m-break) { font-size: $base-font-size *pow(5); //48px } } |
The $base-font-size
doesn’t need to limit to px
, it can be rem
em
or ex
.
While setting up the $font-scale
value, keep in mind that a small adjust may end up have a big impact on sizes. Here are some numbers that are recommended based on the usage of the site:
...
Defining a Modular Type Scale for Web UI Defining a Modular Type Scale for Web UI
Remove top space from your text https://medium.com/codyhouse/line-height-crop-a-simple-css-formula-to-remove-top-space-from-your-text-9c3de06d7c6f