Skip to content

Instantly share code, notes, and snippets.

@asyarb
Last active September 8, 2023 18:07
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save asyarb/162bf0a8b5d238de01bd2832094727ad to your computer and use it in GitHub Desktop.
Save asyarb/162bf0a8b5d238de01bd2832094727ad to your computer and use it in GitHub Desktop.
:root {
--root-font-size: 16;
--root-line-height: 1.2;
font-size: var(--root-font-size);
line-height: var(--root-line-height);
}
.font-inter {
--cap-height: 2048;
--ascent: 2728;
--descent: -680;
--line-gap: 0;
--units-per-em: 2816;
--x-height: 1536;
font-family: 'Inter var', system-ui;
}
.text {
--min-font-size: 24;
--min-screen-size: 360;
--max-font-size: 36;
--max-screen-size: 1440;
font-size: clamp(
var(--min-font-size) / var(--root-font-size) * 1rem,
(var(--v) * 1vw) + ((var(--r) / var(--root-font-size)) * 1rem),
var(--max-font-size) / var(--root-font-size) * 1rem
);
--line-height: 1.25;
line-height: var(--line-height);
}
.fluid-capsize {
--font-size: var(--min-font-size);
--line-height-numeric: calc(
var(--font-size) * var(--line-height, var(--root-line-height))
);
--absolute-descent: max(var(--descent), -1 * var(--descent));
--cap-height-scale: calc(var(--cap-height) / var(--units-per-em));
--descent-scale: calc(var(--absolute-descent) / var(--units-per-em));
--ascent-scale: calc(var(--ascent) / var(--units-per-em));
--line-gap-scale: calc(var(--line-gap) / var(--units-per-em));
--content-area: calc(
var(--ascent) + var(--line-gap) + var(--absolute-descent)
);
--line-height-scale: calc(var(--content-area) / var(--units-per-em));
--line-height-normal: calc(var(--line-height-scale) * var(--font-size));
--specified-line-height-offset: calc(
(var(--line-height-normal) - var(--line-height-numeric)) / 2
);
--cap-height-trim-param: calc(
var(--ascent-scale) - var(--cap-height-scale) + var(--line-gap-scale) / 2
);
--cap-height-trim: calc(
var(--cap-height-trim-param) - var(--specified-line-height-offset) /
var(--font-size)
);
--baseline-trim-param: calc(var(--descent-scale) + var(--line-gap-scale) / 2);
--baseline-trim: calc(
var(--baseline-trim-param) - var(--specified-line-height-offset) /
var(--font-size)
);
--v-numerator: calc(100 * (var(--max-font-size) - var(--min-font-size)));
--v-denominator: calc(var(--max-screen-size) - var(--min-screen-size));
--v: calc(var(--v-numerator) / var(--v-denominator));
--r-numerator: calc(
(var(--min-screen-size) * var(--max-font-size)) -
(var(--max-screen-size) * var(--min-font-size))
);
--r-denominator: calc(var(--min-screen-size) - var(--max-screen-size));
--r: calc(var(--r-numerator) / var(--r-denominator));
}
.fluid-capsize::before {
content: '';
display: table;
margin-bottom: calc(var(--cap-height-trim) * -1em);
}
.fluid-capsize::after {
content: '';
display: table;
margin-top: calc(var(--baseline-trim) * -1em);
}
.no-capsize::before,
.no-capsize::after {
content: none;
}
@mturoci
Copy link

mturoci commented Sep 8, 2023

Nice bro. Just what I needed :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment