Skip to content

Instantly share code, notes, and snippets.

@hihayk
Created July 7, 2020 17:05
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save hihayk/056bdb2b2964fab8a73420572ee991cd to your computer and use it in GitHub Desktop.
Save hihayk/056bdb2b2964fab8a73420572ee991cd to your computer and use it in GitHub Desktop.
Dynamically decrease line-height as the font-size grows.
:root {
--lineHeightFixedAmount: 0.25rem;
--lineHeightRelativeAmount: 1em;
--sizesIncrement: 1.4;
--fontSize-0: 1rem;
--fontSize-1: calc(var(--fontSize-0) * var(--sizesIncrement));
--fontSize-2: calc(var(--fontSize-1) * var(--sizesIncrement));
--globalLineHeight: calc(var(--lineHeightFixedAmount) + var(--lineHeightRelativeAmount));
--globalFontSize: var(--fontSize-0);
}
* {
line-height: var(--globalLineHeight);
}
html {
font-size: 100%;
}
body {
font-size: var(--globalFontSize);
}
.textSize-2 {
font-size: var(--fontSize-2);
}
.textSize-1 {
font-size: var(--fontSize-1);
}
.textSize-0 {
font-size: var(--fontSize-0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment