From c6a699501ad3c94fd854e34bd2bf7a2a1de9960f Mon Sep 17 00:00:00 2001
From: Chalarangelo <chalarangelo@gmail.com>
Date: Sun, 16 May 2021 11:23:05 +0300
Subject: [PATCH] Add fluid typography

---
 snippets/fluid-typography.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 snippets/fluid-typography.md

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
+<p class="fluid-type">Hello World!</p>
+```
+
+```css
+.fluid-type {
+  font-size: clamp(1rem, 8vw - 2rem, 3rem);
+}
+```