7

Fluid Type Scale - Generate responsive font-size variables

 2 years ago
source link: https://www.fluid-type-scale.com/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Fluid Type Scale Calculator

Generate font size variables for a fluid type scale with CSS clamp. Grab the output CSS and drop it into any design system.

Minimum (Mobile)Define the minimum font size and viewport width for your type scale's baseline step. The minimum font size for all other steps is this baseline font size scaled up/down by your chosen type scale ratio.
Base font size (pixels)Screen width (pixels)Type scale ratio
Maximum (Desktop)Define the maximum font size and viewport width for your type scale's baseline step. The max font size for all other steps is this baseline font size scaled up/down by your chosen type scale ratio.
Base font size (pixels)Screen width (pixels)Type scale ratio
Type scaleProvide a comma-separated list of names for each step in your type scale, in ascending order of font size. Use any convention you want. Be sure to also identify the name of your base step.
All stepsBaseline step
Variable prefixUse whatever naming convention you prefer.RoundingThe maximum number of decimal places in the output.Show output in rems
--font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem); --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem); --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem); --font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem); --font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem); --font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem); --font-size-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK