Office: +65 8756 2812  |  Email: info@accessdesires.com
  • Request FREE Quotation
Site logo
Sticky header logo
Mobile logo
  • Portfolio
  • Expertise
    • Web Development
    • Web Maintenance
    • WooCommerce
    • Domain & Hosting
    • Digital Marketing
    • SEO
    • Landing Page Design
    • PSD to XHTML
    • Microsite Design
  • Packages
    • Web Design Premium Packages
    • Web Design Value Package
    • Web Maintenance
    • SEO Package
  • Learning
    • Quiz
    • Success Stories
    • WordPress Tips and Tricks
    • Read Articles
    • Download E-Book
  • FAQ
  • Testimonials
  • About
  • Contact
PrevExplicit Choice Web Design27 July 2015NextThe 3 Key Elements of Effective Web Design: Why Your Website is Actually Repelling Users30 July 2015

Use of Sass Maps for Responsive Typography

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.

3 Likes
wordpress-tips-and-tricks
Ways B2B Companies Can Automate Sales Outreach
Ways B2B Companies Can Automate Sales Outreach
Avada Theme Review
Avada Theme Review
15 Outstanding Website Designs: What Made Them Stand Out?
15 Outstanding Website Designs: What Made Them Stand Out?
The Right Time for Redesigning Your Website
The Right Time for Redesigning Your Website
Features of a Good Business Website
Features of a Good Business Website

Follow us

Novage Web Design Company in Singapore

Novage has been in the web design industry since 2010. We design and build world class responsive websites of all sizes for Singaporean businesses.

Know more about us
WRITE FOR US
Image module
Image module
Latest Posts
Marketing Ways B2B Companies Can Automate Sales Outreach

Ways B2B Companies Can Automate Sales Outreach

28 October 2020in Marketing
Corporate Avada Theme Review

Avada Theme Review

5 September 2020in Corporate
Web Design Articles 15 Outstanding Website Designs: What Made Them Stand Out?

15 Outstanding Website Designs: What Made Them Stand Out?

18 May 2020in Web Design Articles
Contact

Singapore

Email: info@accessdesires.com
Phone: +65 8756 2812
Address: The Commerze @ Irving 1 Irving Place,
#09-01 Singapore 369546

Digital Agency in Singapore specializing in web design, web development, WordPress development, user experience and more, ©2018 Novage Communications Pte Ltd (201320240K)

Privacy Policy | Sitemap | Bookkeeping by Timcole