-
GrantCharge
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
-
Alvind
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.