Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Bricks Fluid Typography Framework – adaptable to GP?

  • Hello,

    Can the following Bricks: Build-Your-Own Fluid Typography Framework be adapted to/customized for GP?

    Bricks: Build-Your-Own Fluid Typography Framework

    :root {
    
        /* TEXT SIZE SCALE */
    
        /* https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=320&minRatio=1.125&maxFontSize=18&maxWidth=1280&maxRatio=1.2&steps=xs,s,m,l,xl&baseStep=m&prefix=text&decimals=2&useRems=on&remValue=16&previewFont=Inter&previewText=Preview&previewWidth=900 */
    
        --text-xs: clamp(0.79rem, -0.01vw + 0.79rem, 0.78rem);
        --text-s: clamp(0.89rem, 0.08vw + 0.87rem, 0.94rem);
        --text-m: clamp(1rem, 0.21vw + 0.96rem, 1.13rem);
        --text-l: clamp(1.13rem, 0.37vw + 1.05rem, 1.35rem);
        --text-xl: clamp(1.27rem, 0.59vw + 1.15rem, 1.62rem);
    
        /* HEADING SIZE SCALE */
        
        /* https://www.fluid-type-scale.com/calculate?minFontSize=20&minWidth=320&minRatio=1.25&maxFontSize=22&maxWidth=1280&maxRatio=1.333&steps=6,5,4,3,2,1,title&baseStep=4&prefix=h&decimals=2&useRems=on&remValue=16&previewFont=Inter&previewText=Preview&previewWidth=900 */
    
        --h6: clamp(0.8rem, -0.04vw + 0.81rem, 0.77rem);
        --h5: clamp(1rem, 0.05vw + 0.99rem, 1.03rem);
        --h4: clamp(1.25rem, 0.21vw + 1.21rem, 1.38rem);
        --h3: clamp(1.56rem, 0.45vw + 1.47rem, 1.83rem);
        --h2: clamp(1.95rem, 0.82vw + 1.79rem, 2.44rem);
        --h1: clamp(2.44rem, 1.36vw + 2.17rem, 3.26rem);
        --h-title: clamp(3.05rem, 2.15vw + 2.62rem, 4.34rem);
    }
    
    /* TEXT SIZE UTILITY CLASSES */
    
    /* You now don't need to set ANY typography in Theme Styles - not even body copy. The below code handles it all from here in one place. REMOVE any font sizes or line heights set for body copy in Bricks Theme Style typography settings. */
    
    .text-xl {
        font-size: var(--text-xl);
        line-height: 1.4;
    }
    .text-l {
        font-size: var(--text-l);
        line-height: 1.5;
    }
    body, .text-m {
        font-size: var(--text-m);
        line-height: 1.5;
    }
    .text-s {
        font-size: var(--text-s);
        line-height: 1.6;
    }
    .text-xs {
        font-size: var(--text-xs);
        line-height: 1.7;
    }
    
    /* HEADING SIZE UTILITY CLASSES */
    
    /*  REMOVE any font sizes or line heights set for all heading levels in Bricks Theme Style typography settings. */
    
    .h-title {
        font-size: var(--h-title);
        line-height: 1.05;
    }
    h1, .h1 {
        font-size: var(--h1);
        line-height: 1.1;
    }
    h2, .h2 {
        font-size: var(--h2);
        line-height: 1.2;
    }
    h3, .h3 {
        font-size: var(--h3);
        line-height: 1.3;
    }
    h4, .h4 {
        font-size: var(--h4);
        line-height: 1.4;
    }
    h5, .h5 {
        font-size: var(--h5);
        line-height: 1.5;
    }
    h6, .h6 {
        font-size: var(--h6);
        line-height: 1.6;
    }
    

    Thanks

  • Hi there,

    Have you tried it? It should work because it’s just regular CSS. You may not see the fluid typography in action in the editor, but it will definitely work on the frontend.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.