diff --git a/snippets/fluid-typography.md b/snippets/fluid-typography.md new file mode 100644 index 000000000..3f3c1fcc8 --- /dev/null +++ b/snippets/fluid-typography.md @@ -0,0 +1,19 @@ +--- +title: Fluid typography +tags: visual,intermediate +--- + +Creates text that scales according to the viewport width. + +- Use the `clamp()` CSS function to clamp the value of `font-size` between `1rem` and `3rem`. +- Use the formula `8vw - 2rem` to calculate a responsive value for `font-size` (`1rem` at `600px`, `3rem` at `1000px`). + +```html +

Hello World!

+``` + +```css +.fluid-type { + font-size: clamp(1rem, 8vw - 2rem, 3rem); +} +```