DEV Community: MD3BM

Mastering Responsive Typography: Best Practices of the CSS SASS Mixin

MD3BM — Thu, 08 Feb 2024 16:05:16 +0000

In today's digital landscape, responsive design has become a fundamental aspect of web development. Ensuring that our websites adapt seamlessly to different screen sizes and devices is crucial for delivering an optimal user experience. One key element of responsive design is typography, which plays a significant role in readability and overall aesthetics.

In this blog post, we will explore the best practices for utilizing the CSS SASS Mixin for responsive typography, empowering you to create visually stunning and user-friendly websites.

SASS Mixin for Base Typography

Certainly! Here's an example of how you can create a SASS Mixin for base typography:

@mixin base-typography {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

// Usage example:
h1 {
  @include base-typography;
  font-size: 24px;
  font-weight: bold;
}

p {
  @include base-typography;
}

In the example above, we define a SASS Mixin called base-typography that includes the properties of the base typography style. This mixin sets the font-family to 'Arial', sans-serif, font-size to 16px, line-height to 1.5, and color to #333.

To use this mixin, you can simply include it in your desired selectors by using the @include directive. In the example, we demonstrate how to use the mixin for h1 and p elements. Notice that you can override specific properties, such as font-size and font-weight, to customize the typography style for individual elements while still maintaining the base typography properties.

By using this base typography mixin throughout your project, you can ensure consistent typography styles and easily make global changes by modifying the mixin's properties.

SASS Mixin for Responsive Typography

You can create a SASS Mixin for responsive typography by combining the power of SASS variables and media queries. Here's an example:

@mixin responsive-typography($mobile-size, $tablet-size, $desktop-size) {
  font-size: $mobile-size;

  @media screen and (min-width: 768px) {
    font-size: $tablet-size;
  }

  @media screen and (min-width: 1024px) {
    font-size: $desktop-size;
  }
}

// Usage example:
h1 {
  @include responsive-typography(24px, 32px, 48px);
  font-weight: bold;
}

p {
  @include responsive-typography(16px, 18px, 20px);
  line-height: 1.5;
}

In the example above, we define a SASS Mixin called responsive-typography. It takes three parameters: $mobile-size, $tablet-size, and $desktop-size, which represent the font sizes for mobile, tablet, and desktop views, respectively.

Within the mixin, we set the initial font-size to the $mobile-size value. Then, we utilize media queries to override the font-size at different breakpoints. In this example, we set the font-size to $tablet-size when the screen width is at least 768px, and to $desktop-size when the screen width is at least 1024px.

To use this mixin, you can include it in your desired selectors and provide the appropriate font size values for different breakpoints. In the example, we demonstrate how to use the mixin for h1 and p elements, with different font sizes for each breakpoint.

By utilizing this responsive typography mixin, you can easily define and maintain consistent typography styles across different screen sizes, enhancing the responsiveness and readability of your website.

Viewport-Sized Typography and Line-Height with Min and Max Font-sizes (CSS Locking)

Based on calculations done by Tim Brown and Florens Verschelde but altered to make it as dynamic as possible. The mixin includes line-height as an optional extra using the last property passed to the mixin.

Tested in the latest versions of Chrome Firefox and Opera. It seems to work in Safari but requires a refresh. All font values are provided in px as a fallback for older browsers. The mixin will calculate the middle of the two font-sizes provided as a fallback for browsers that don't support CSS calc().

Also, this doesn't affect the user's zoom settings for font size, zooming will still function as normal so no problems with accessibility.

Usage

// @include responsive-typography($min-font-size, $max-font-size, $line-height(true or false));
    @include responsive-typography(20px, 38px, true);

Output

h2 {
        font-size: 20px;
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    @media (min-width: 360px) {

        h2 {
           font-size: 29px;
           font-size: calc(2.50348vw + 20px - 0.02503 * 360px);
           line-height: 52px;
           line-height: calc(6.67594vw + 28px - 0.06676 * 360px);
        }

    }
    @media (min-width: 1080px) {

        h2 {
           font-size: 38px;
           font-size: 2.375rem;
           line-height: 4.75rem;
        }

    }

Usage (no line-height)

// @include responsive-typography($min-font-size, $max-font-size, $line-height(true or false));
    @include responsive-typography(20px, 38px, false);

Output

h2 {
        font-size: 20px;
        font-size: 1.25rem;
    }

    @media (min-width: 360px) {

        h2 {
           font-size: 29px;
           font-size: calc(2.50348vw + 20px - 0.02503 * 360px);
        }

    }
    @media (min-width: 1080px) {

        h2 {
           font-size: 38px;
           font-size: 2.375rem;
        }

    }

Source: Responsive Typography (CSS Locking) Mixin - Steven Roberts.

Other Techniques to Create Responsive Typography in SASS

In addition to using mixins, there are other techniques you can employ in SASS to create responsive typography. Here are a few alternative approaches:

Using Functions:

SASS provides various built-in functions that can assist in creating responsive typography. For example, you can use functions like calc() and vw() to calculate font sizes based on viewport units. Here's an example:

h1 {
  font-size: calc(16px + 1vw);
}

p {
  font-size: vw(4);
}

In the example above, calc() is used to add a dynamic font size based on the viewport width, and vw() sets the font size relative to the viewport width.

Utilizing SASS Maps:

SASS maps allow you to store key-value pairs, making it easier to manage responsive typography styles. You can define different font sizes for various breakpoints using a map and then loop over the map to apply the styles.

Here's an example:

$font-sizes: (
  mobile: 16px,
  tablet: 20px,
  desktop: 24px
);

@each $breakpoint, $size in $font-sizes {
  @media screen and (min-width: map-get($breakpoints, $breakpoint)) {
    font-size: $size;
  }
}

In this example, the $font-sizes map stores the font sizes for different breakpoints. The @each loop iterates over the map, applying the font size defined in each key-value pair within a corresponding media query.

CSS Custom Properties (Variables):

CSS Custom Properties, also known as CSS variables, can be used to create responsive typography. By defining variable values based on media queries, you can achieve responsive font sizes. Here's an example:

:root {
  --font-size-mobile: 16px;
  --font-size-tablet: 20px;
  --font-size-desktop: 24px;
}

h1 {
  font-size: var(--font-size-mobile);

  @media screen and (min-width: 768px) {
    font-size: var(--font-size-tablet);
  }

  @media screen and (min-width: 1024px) {
    font-size: var(--font-size-desktop);
  }
}

In this example, CSS Custom Properties are used to define different font sizes for each breakpoint. The font-size property within the media queries is updated accordingly.

These are just a few alternatives for creating responsive typography in SASS. Each approach offers its own benefits, so choose the one that best fits your project requirements and coding preferences.

Conclusion:

Incorporating the CSS SASS Mixin for responsive typography allows us to create visually appealing and user-friendly websites. By establishing base typography, utilizing media queries, implementing fluid typography, customizing line heights, and considering accessibility, we can ensure consistent and adaptable typography across different screen sizes and devices. By following these best practices, you will be well-equipped to create remarkable user experiences that engage your audience effectively.

Read also: The best ready-made HTML codes | CSS | Javascript on CodePen (Part 7)

Order button animation

Music Player 2.0

An amazing and beautiful music player in phone mockup.

Side Sliding Menu CSS

Tiles with animated : hover

Animated Tab Bar v.2

Codepen Shortcut List

Instagram re-design

CSS Only Playground

Easy Ionic Side Menu Transitions

Last words

This was the 2nd part of the Top Pens and Projects on CodePen series presented by md3bm, which will be followed by other parts that will include Pens codes and awesome and distinctive ready-made projects for inspiration and to be used in developing your web projects.

Best Pens and Projects on CodePen (#1)

MD3BM — Sun, 03 Apr 2022 17:48:51 +0000

Hi everyone...

If you are a web developer or front-end developer, you have certainly heard about Codepen, which is one of the most famous websites that specialized in editing and testing HTML, CSS, and Javascript codes and projects online.
Which contains a huge and distinctive content of codes, templates, ready-made projects for front-ends, and various web elements.

So in my blog on Dev.to, I'll share with you the top and best pens and Projects on CodePen in a series of articles, the first part of which will start from this article, which will include amazing codes and pens that will greatly and amazingly help you in developing your web projects and your websites. And everyone working in the field of web development and programming.

Note: All ownership and reuse rights are reserved for their respective owners.

Let's start .. -->

Top Pens and Projects on CodePen (Part 1)

responsive `` car

Animated Continuous Sections with GSAP Observer

Project Management Dashboard UI

Stranger Things Intro

Confetti Button

SVG Text Outline Animation - GSAP

Expanding flex cards

Scroll Rocket

Rocket Logo -- Loading Animation

An amazing animated icon in CSS

Foolishly Responsive Accordion

A beautiful Foolishly Responsive Accordion style.

MorphSVGPlugin from GreenSock

Card Slider

Full-Screen Vertical Scroll Snap

Layered pinning - ScrollTrigger

Periodic Table of the Elements

Last words

This was the first part of Top Pens and Projects on CodePen presented by md3bm, which will be followed by other parts that will include Pens codes and awesome and distinctive ready-made projects for inspiration and to be used in developing your web projects and websites.

DEV Community: MD3BM

Mastering Responsive Typography: Best Practices of the CSS SASS Mixin

SASS Mixin for Base Typography

SASS Mixin for Responsive Typography

Viewport-Sized Typography and Line-Height with Min and Max Font-sizes (CSS Locking)

Usage

Usage (no line-height)

Other Techniques to Create Responsive Typography in SASS

Conclusion:

Top 5 JavaScript Plugins for Slider Animation

Top 5 JavaScript Plugins for Slider Animation

Slidr.js

SwiperJs

FLICKITY

Sly

Tiny Slider

Best Pens and Projects on CodePen (#2)

Top Pens and Projects on CodePen (Part 2)

auto dark mode with SVG blend modes

Context menu with Feather icons

Dreaming of Jupiter - Three.js

Accordion FAQ Menu By @itsrehanraihan

augmented-ui social media picture-of-code thing

3D Carousel

#Codevember 10 - Musical Particles

Night & Day

Order button animation

Music Player 2.0

Side Sliding Menu CSS

Tiles with animated : hover

Animated Tab Bar v.2

Codepen Shortcut List

Instagram re-design

CSS Only Playground

Easy Ionic Side Menu Transitions

Last words

Best Pens and Projects on CodePen (#1)

Top Pens and Projects on CodePen (Part 1)

responsive  car

Animated Continuous Sections with GSAP Observer

Project Management Dashboard UI

Stranger Things Intro

Confetti Button

SVG Text Outline Animation - GSAP

Expanding flex cards

Scroll Rocket

Rocket Logo -- Loading Animation

Foolishly Responsive Accordion

MorphSVGPlugin from GreenSock

Card Slider

Full-Screen Vertical Scroll Snap

Layered pinning - ScrollTrigger

Periodic Table of the Elements

Last words

responsive `` car