- commit
- bb879447a6c860c59ccd6402d31a20fba1c03e01
- parent
- 04f52ecf37a1c59c308c618a69fbd94255d8cb9f
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2024-03-16 14:01
fixup fluid typo
Diffstat
| M | _content/posts/2024-03-15-fluid-typography/demo/style.css | 8 | +++++++- |
| M | _content/posts/2024-03-15-fluid-typography/index.md | 64 | +++++++++++++++++++++++++++++++++++++------------------------ |
| A | _content/posts/2024-03-15-fluid-typography/preview.png | 0 |
3 files changed, 46 insertions, 26 deletions
diff --git a/_content/posts/2024-03-15-fluid-typography/demo/style.css b/_content/posts/2024-03-15-fluid-typography/demo/style.css
@@ -7,7 +7,7 @@ 7 7 --min-scale: 1; 8 8 --max-scale: 1.6; 9 910 -1 --screen-size: calc(100vi / 1rem);-1 10 --screen-size: var(--max-inline-size); 11 11 --factor: min(var(--screen-size) / var(--max-inline-size) / var(--max-font-size), 1); 12 12 --font-size: 1; 13 13 @@ -15,6 +15,12 @@ 15 15 --base-font-size: calc(var(--min-font-size) + (var(--max-font-size) - var(--min-font-size)) * var(--factor)); 16 16 } 17 17 -1 18 @supports (opacity: calc(100vi / 1rem)) { -1 19 :root { -1 20 --screen-size: calc(100vi / 1rem); -1 21 } -1 22 } -1 23 18 24 body { 19 25 max-inline-size: calc(var(--max-inline-size) * 1em); 20 26 margin: 2.5em auto;
diff --git a/_content/posts/2024-03-15-fluid-typography/index.md b/_content/posts/2024-03-15-fluid-typography/index.md
@@ -4,13 +4,15 @@ date: 2024-03-15 4 4 tags: [design, css] 5 5 --- 6 6 -1 7  -1 8 7 9 The basics of typography are quickly explained: Body text should have 60-80 8 10 characters per line, and line-height should be bigger if there are more 9 11 characters on a line. 10 12 11 13 Usually in web design, font and font size is defined by user preferences (and12 -1 we should respect that!), so we are left with picking a line width and line13 -1 height, for example like this:-1 14 we should respect that!). We as designers are left with picking a line width -1 15 and line height, for example like this: 14 16 15 17 ```css 16 18 body { @@ -53,9 +55,10 @@ there are no guarantees that the font actually needs resizing. Maybe the users 53 55 already configured their font settings to match the screen, so we make it worse 54 56 for them instead of better. 55 5756 -1 Imagine we had a custom property `--factor` that told us how much space we57 -1 have, going from `0` for no space at all to `1` for when we hit58 -1 `max-inline-size`. That would allow us to only scale the font size if needed:-1 58 So here is what I propose: Imagine we had a custom property `--factor` that -1 59 told us how much space we have, going from `0` for no space at all to `1` for -1 60 when we hit `max-inline-size`. That would give us a simple way to only scale -1 61 the font size if needed: 59 62 60 63 ```css 61 64 body { @@ -67,12 +70,13 @@ body { 67 70 68 71 Long lines are hard to read because it is easy to jump to the previous line by 69 72 accident, reading the same text again and again. Increasing the line height can70 -1 help in those cases. [Tim Brown][molten-leading] already wrote about this idea71 -1 in 2012, but CSS has come a long way since:-1 73 help in those cases. [Tim Brown][molten-leading] already wrote about ways to -1 74 automatically adjust line-height in 2012. We can again use `--factor` for a -1 75 simple solution: 72 76 73 77 ```css 74 78 body {75 -1 line-height: calc(1 + var(--factor) * 0.6);-1 79 line-height: calc(1 + 0.6 * var(--factor)); 76 80 } 77 81 ``` 78 82 @@ -83,7 +87,7 @@ mix: 83 87 84 88 ```css 85 89 body {86 -1 line-height: calc(1 + var(--factor) / 1em * 0.6);-1 90 line-height: calc(1 + 0.6 * var(--factor) / 1em); 87 91 } 88 92 ``` 89 93 @@ -99,7 +103,7 @@ yet another custom property: 99 103 } 100 104 :root * { 101 105 font-size: calc(var(--font-size) * 1rem);102 -1 line-height: calc(1 + var(--factor) / var(--font-size) * 0.6);-1 106 line-height: calc(1 + 0.6 * var(--factor) / var(--font-size)); 103 107 } 104 108 h1 { 105 109 --font-size: 2; @@ -129,11 +133,12 @@ h1 { 129 133 130 134 Comig back to fluid typography, the people at [utopia][utopia] propose to also 131 135 adapt that base scale (they say this is what they do, but actually the do132 -1 linear interpolation between the powers):-1 136 linear interpolation between the powers). Again, this can easily be done using -1 137 `--factor`: 133 138 134 139 ```css 135 140 :root {136 -1 --scale: calc(1 + var(--factor) * 0.5);-1 141 --scale: calc(1 + 0.5 * var(--factor)); 137 142 } 138 143 ``` 139 144 @@ -153,10 +158,10 @@ Ideally, we want something like this: 153 158 } 154 159 ``` 155 160156 -1 As I mentioned before, [CSS Values and Units Module Level 3][css-values-3] does157 -1 not allow to multiply or divide by values with units. [Level 4][css-values-4]158 -1 will change that, but it is not yet implemented anywhere ([Firefox159 -1 ticket][bugzilla]).-1 161 As I mentioned before, [CSS Values and Units Module Level 3][css-values-3], the -1 162 current version of the relevant standard, does not allow to multiply or divide -1 163 by values with units. [Level 4][css-values-4] will change that, but it is not -1 164 yet implemented anywhere ([Firefox ticket][bugzilla]). 160 165 161 166 In the meantime, we can use JavaScript: 162 167 @@ -178,21 +183,30 @@ which depends on the maximum line width. So there is a circular dependency. 178 183 In practice, this circle can be broken because there is an absolute maximum 179 184 font size. In our case, that is `1.2 * 40 * 1rem`, were `rem` refers to the 180 185 user defined font size. In case you had wondered: That is why I never set181 -1 `font-size` on `:root`, because then it would have no longer been possible to182 -1 get that value.-1 186 `font-size` on `:root`. If I had done that, it would be impossible to get to -1 187 the original, user-defined value. 183 188 184 189 The rest is left as an exercise to the reader. If you are interested, I have 185 190 prepared a [complete demo](./demo/). 186 191 187 192 ## Conclusion 188 193189 -1 Fluid typography is an old idea, but still surprisingly hard to do. [CSS Values190 -1 and Units Level 4][css-values-4] will provide many improvements in this area,191 -1 some of which are already widely available (`min()`/`max()`/`clamp()`).-1 194 The ideas and the reasoning I laid out in this article are hopefully a useful -1 195 overview. There are many more ways to approach this topic, but these ideas are -1 196 what felt most clear and succinct to me. Still, the specific techniques are not -1 197 really suitable for production just yet. Most importantly, the requirement on -1 198 JavaScript is a clear no-go for me. -1 199 -1 200 But there is hope on the horizon. Before getting into this topic, I wasn't -1 201 really aware of [CSS Values and Units Level 4][css-values-4]. It already gave -1 202 us widespread support for `min()`, `max()`, and `clamp()`, which is awesome. -1 203 Division with units could be the final puzzle piece we need to get real fluid -1 204 typography. 192 205193 -1 Still, for everyday use these techniques are still too out-there. Using194 -1 JavaScript to tweak typography is a clear no-go for me. And the risk of having195 -1 weird cyclic dependencies is just too high.-1 206 Once the specification has settled and we get real-world implementations, we -1 207 can start refining these ideas and come up with robust, reusable solutions. But -1 208 before that can happen, browsers need to work out all the complex circular -1 209 dependencies. And I am not yet sure this will happen anytime soon. 196 210 197 211 ## Bonus: some more ideas 198 212 @@ -220,7 +234,7 @@ weird cyclic dependencies is just too high. 220 234 [modular-scale]: https://www.modularscale.com/ 221 235 [utopia]: https://utopia.fyi/blog/css-modular-scales/ 222 236 [css-values-3]: https://www.w3.org/TR/css-values-3/#calc-type-checking223 -1 [css-values-4]: https://www.w3.org/TR/css-values-3/#calc-type-checking-1 237 [css-values-4]: https://www.w3.org/TR/css-values-4/#calc-type-checking 224 238 [bugzilla]: https://bugzilla.mozilla.org/show_bug.cgi?id=1827404 225 239 [container-queries]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries 226 240 [static-interpolation]: https://youtu.be/I_fBM1cEc_8?t=1383