Using Clamp() Function in Projects

Note: This post is part of leaning efforts to understand and use fluid typography for responsive webdesign for multiple user devices. This learning post is still in active development and updated regularly.

In a previous article Fluid Typography and Use of CSS Clamp() Function, I discussed about fluid typography in general. In this post, I am further deep diving into clamp() function and highlighting how I used in my recent projects.

Using clamp() in a CSS-Tricks Project

While preparing Frontity theme project for a CSS-tricks article demo, I applied clam() function for managing container width and typography, which I am describing below mostly from the article.

CSS-Tricks has extensively covered fluid typography and use of CSS clamp() function, I wanted apply those rules in my Frontity project too. Following CSS-Tricks posts and from this picalilli posts, I created following two wide-container and normal-container wrapper variables at :root element of globalStyles.js component.

// container wrap variables with clamp()
  --wide-container: clamp(16rem, 90vw, 70rem);
  --normal-container: clamp(16rem, 90vw, 58rem);

The wide-container wrapper is used for header and footer components where as the normal-container will be used for displaying posts and pages.

For fluid typography, I added following rules with clamp() function under elementBase in globalStyles.js component.

// src/components/styles/globalStyles.js

// ...
// ...
 const elementBase = (colors) => css`
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 1rem 0;
        font-weight: 600;
        font-family: var(--header-family);
        line-height: 1.25;
        letter-spacing: -0.0415625em;
        color: var(--header-color);
    }
    h1 {
        font-size: clamp(1.5rem, 1.5rem + 3vw, 4rem);
        font-weight: 800;
        line-height: 1.1; }
    h2 {
        font-size: clamp(1.5rem, 1.5rem + 2.5vw, 3rem); }
    h3 {
        font-size: clamp(1.5rem, 1.5rem + 1vw, 2.75rem); }
    h4 {
       font-size: clamp(1.5rem, 1.5rem + .75vw, 2rem); }
    H5 {
        font-size: clamp(1.5rem, 1.5rem + .33vw, 1.5rem); }
    h6 {
        font-size: clamp(1.25rem, 1.25rem + .125vw, 1.125rem);
        letter-spacing: 0.03125em;
        text-transform: uppercase; }
 `;

 // ...
 // ...

It was a fun to achieve responsive layout with clamp() function only without using media queries, which I am used to for so long.

Using clamp() in a Block Theme Project

I have started Exploring Block Based Experimental Themes as one of my learning projects. In that project too, I am using clamp() function  for styling typography and font sizes, in the same way I used in the CSS-Tricks project.

Useful Resource Links

The following is list of references link that I gathered during my brief research. While preparing this post, I have also referred some of the following references extensively. Please to refer original posts for more detailed information.

Filed Under CSS