Responsive text (font-size)

[silveltman]

Recently I heard about larger font-sizes, increasing conversion rates. This got me to renew my text/font-size system (once again 🙃)

What I came up with

@layer utilities {
    .res-text-xs {
        @apply text-xs md:text-sm;
    }

    .res-text-sm {
        @apply text-sm md:text-base;
    }

    .res-text-base {
        @apply text-base md:text-lg;
    }

    .res-text-lg {
        @apply text-lg md:text-xl;
    }

    .res-text-xl {
        @apply text-xl md:text-2xl;
    }

    .res-heading-xs {
        @apply text-base sm:text-lg md:text-xl;
    }

    .res-heading-sm {
        @apply text-lg sm:text-xl md:text-2xl;
    }

    .res-heading-base {
        @apply text-xl sm:text-2xl md:text-3xl;
    }

    .res-heading-lg {
        @apply text-2xl sm:text-3xl md:text-4xl;
    }

    .res-heading-xl {
        @apply text-3xl sm:text-4xl md:text-5xl;
    }

    .res-heading-2xl {
        @apply text-4xl sm:text-5xl md:text-6xl;
    }
}

Why

• I think for headings a system like this is necessary. The difference between desktop and mobile is just too big.
• For the regular text I think it's a 'nice to have'. This article for example, describes benefits encountered after increasing the font-size. Also, I personally feel like 16px is too small on a desktop/laptop.

Do you see improvements?

I started using it and I have not yet found myself in a situation where this does not work, or where it breaks the design.

However, it could probably be improved still, so please let me know if you have any suggestions.

Tailwind / plugin

I personally think this would be of great benefit to many users. Adding it to tailwind might be a bit much, but If someone feels like turning this into a plugin, please do :)

[HasanMothaffar]

I like this way of thinking. Having a single place to define your responsive typography styles is way better than having many text-xl md:text-2xl lg:text-3xl spread in the codebase.