The Benefits of Using Typographic Styles in SCSS

In web development, it’s important to maintain a consistent visual style throughout a website. One way to achieve this is by using typographic styles in SCSS or any other CSS pre-processor. By using typographic styles, developers can ensure that all text on a site is presented in a uniform and visually appealing manner.

There are several benefits to using typographic styles in CSS. For one, it allows for reusability and inheritance. Rather than defining the same styles repeatedly for different elements, developers can simply apply a single typographic style to multiple elements. This makes the code more efficient and easier to manage.

Another advantage of using typographic styles is that it makes it easier to change the overall layout of a site. Because the styles are applied consistently throughout the site, changing a single typographic style can have a significant impact on the site’s overall appearance. This allows developers to make broad changes to the site’s design quickly and easily.

Traditionally, typographic styles are applied using HTML classes or IDs, or by styling HTML tags directly. However, by using a mixin, developers can apply the style to dedicated typographic HTML classes as well as any other HTML selector. This approach makes the code easier to read and debug, and reduces the need for complex style overrides.

In the below example the font-size property is defined for default, small and large breakpoints.

    font-size: (
        default:  small,
        small:    normal,
        large:    large
    )

Similarly font-weight, or in fact any other property can be treated the same way.

    font-weight: (
        default:  bold
        small:    normal
    )

While some argue that defining HTML classes with typographic styles and applying them to HTML tags is sufficient, this approach can make it more difficult to create style overrides. Also it is sometimes hard to avoid silly CSS classes that define only a single property (e. g. .typography-weight-medium { font-weight: 500; }) By using mixins, developers can make the code more readable and easier to debug.

    .headline,
    h1 {
        @include typography(headline);
    }

    [...]

    .some-frameworks-class
    {
        @include typography(headline);
    }

All typographic styles can live in one place, in a JSON file, or a Sass map. Inheritance can be achieved by creating a custom property, e.g., INHERIT, where the properties defined in the style content can be overridden by the definitions of the style headline in the pre-processing.

    $typography: (
        content: (
            font-family: sans-serif,
            line-height: 1.4,
        ),
        headline: (
            font-size: (
                default: small,
                small:   normal,
                large:   large
            ),
            font-weight: (
                default: bold
                small:   normal
            )
        )
    )

    headline: (
        INHERIT: content,
        font-size: ....
    )

Typography mixin example.

////
// Typography funtion
// for Typography mixin
// 
// @param style, string name of the typographic style
//        output, map used for recursion
// @use $typography, map of typographic styles
//
// @returns map, properties of a typographic style
//
@function typography( $style, $output:() ) {
   
   $map:    $typography;
   $i:      1;
   $length: length($style);
   
   @while $length >= $i  {
      
      $map: map-get($map, nth($style, $i));
      $i: $i + 1;
   }
   
   @each $property, $value in $map {
      
      ////
      // supports multiple parents
      //
      @if $property == 'INHERIT'{ 
         
         @each $parent_style in $value {
            $output: map-merge( $output, typography($parent_style));
         }
      }
      @else { 

         $output: map-merge( $output, ($property: $value));    
      }
   }
   
   @return $output;
}


////
// Typography mixin
// 
// @param style name
// @use bp() breakpoint mixin
// @return CSS of a typographic style
//
//
@mixin typography($style){

   $output: typography($style);

   @each $property, $value in $output {
      
      @if type-of($value) != map {
         // simple property
         #{$property}: $value;
      }
      
      @else {
         // responsive property
         @each $breakpoint, $bp_value in $value {
            // default value
            @if $breakpoint == default or $breakpoint == def {
               #{$property}: $bp_value;
            }
            // double-auto breakpoint (horizontal and vertical, lower limit)
            // prefixed 'da-' in the style definition
            @else if str-starts-with($breakpoint, 'da-') {
               $breakpoint: str-slice($breakpoint, 4);
               @include bp(double-auto, $breakpoint) {
                  #{$property}: $bp_value;
               }
            }
            // horizontal breakpoint (lower limit)
            @else {
               @include bp($breakpoint) {
                  #{$property}: $bp_value;
               }
            }     
         }
      }
   }
}

Breakpoint definitions for reference.

{
   "def"      : 0,
   "mini"     : 481,
   "xxsmall"  : 600,
   "xsmall"   : 736,
   "small"    : 768,
   "medium"   : 961,
   "large"    : 1041,
   "mlarge"   : 1281,
   "xlarge"   : 1441,
   "xxlarge"  : 1881,
   "bp4k"     : 2880
}

In conclusion, using typographic styles in CSS offers several benefits, including reusability, inheritance, and the ability to make broad changes to a site’s layout quickly and easily. By using mixins to apply typographic styles, developers can make their code more efficient and easier to manage. Despite the slight increase in CSS file size, which can be mitigated by using gzip compression. Overall, using typographic styles is an effective way to ensure that a website is visually appealing and consistent across all pages.