Article on CodyHouse: https://codyhouse.co/nuggets/responsive-typography
A Pen by Matt Daniel Brown on CodePen.
Created
December 10, 2020 15:56
-
-
Save matt-daniel-brown/afac05f67fa1a2aeccfd1148b3382af0 to your computer and use it in GitHub Desktop.
CSS Nugget: Responsive Typography
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <h1>Responsive Typography</h1> | |
| <p>A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets. It always does one good.</p> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 💡 CSS Nugget: Responsive Typography - 3 methods | |
| // 🔗 https://codyhouse.co/nuggets/responsive-typography | |
| // -------------------------------- | |
| // Method 1 👇 - old school | |
| // -------------------------------- | |
| // h1 { | |
| // font-size: 2em; | |
| // } | |
| // p { | |
| // font-size: 1em; | |
| // } | |
| // @media (min-width: 48rem) { | |
| // h1 { | |
| // font-size: 3em; | |
| // } | |
| // p { | |
| // font-size: 1.25em; | |
| // } | |
| // } | |
| // -------------------------------- | |
| // Method 2 👇 - clamp() | |
| // -------------------------------- | |
| h1, p { | |
| font-size: clamp(var(--min), var(--val), var(--max)); | |
| } | |
| h1 { | |
| --min: 2em; // minimum value | |
| --val: 5vw; // preferred value = 5% viewport width | |
| --max: 3em; // maximum value | |
| } | |
| p { | |
| --min: 1em; | |
| --val: 2.5vw; | |
| --max: 1.5em; | |
| } | |
| // -------------------------------- | |
| // Method 3 👇 - multiplier | |
| // -------------------------------- | |
| // h1 { | |
| // font-size: calc(2em * var(--text-multiplier, 1)); | |
| // } | |
| // p { | |
| // font-size: calc(1em * var(--text-multiplier, 1)); | |
| // } | |
| // @media (min-width: 48rem) { | |
| // :root { | |
| // --text-multiplier: 1.25; | |
| // } | |
| // } | |
| // demo | |
| body { | |
| font-family: system-ui, sans-serif; | |
| } | |
| .container { | |
| padding: 2em; | |
| max-width: 720px; | |
| margin: 0 auto; | |
| } | |
| h1 { | |
| font-weight: 600; | |
| line-height: 1.2; | |
| margin-bottom: 0.25em; | |
| } | |
| p { | |
| line-height: 1.4; | |
| color: grey; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment