Comments (17)
@solution-loisir Thanks! I actually agree—while I've found clamping to be nice for font sizing, it's a little awkward for other properties. I used to clamp my spacing variables at one point, but now I maintain a separate set of pixel measurements that I use for margins/padding/borders/etc.
Using ems like that is clever! Generally, though, it's not recommended to use em
s for font sizing because it can lead to compounding effects if you apply it to deeply nested components whose parents also use em
-based font sizes. (More on that here: https://www.aleksandrhovhannisyan.com/blog/use-rems-for-font-size/#a-first-attempt-with-em). This wouldn't be an issue in the code you shared because you'd never nest headings.
Personally, I also don't like the idea of tying down the font sizes to heading levels because it may lead to misuse of headings for font sizing. In my opinion, the ideal approach is to have a set of reusable font size variables and use them to style your headings by default, but then also have a separate set of font size utility classes (like .fs-sm
, .fs-base
, .fs-md
, etc.) that can be used as needed. I do this on my site. For example, in some cases, I want to use a certain heading level for semantics but change its font size to be larger or smaller than the default.
from aleksandrhovhannisyan.com.
Thanks for the quick reply! As I read, I realized that my knowledge on em
and rem
was incomplete and went on a reading to clarify things up. It made me realized that I could use the same idea but with rem
s instead. Something like this:
$base-size: 1rem;
// Variable names and overall scaling system borrowed from Andy Bell's Gorko tool.
// https://github.com/hankchizljaw/gorko
$size-300: $base-size * 0.8;
$size-400: $base-size * 1;
$size-500: $base-size * 1.2;
$size-600: $base-size * 1.7;
$size-700: $base-size * 2;
$size-800: $base-size * 2.4;
// Fonts
$font-base-size: clamp(#{$size-500} * 0.9, 0.46vw + 0.91rem, #{$size-500});
The base font size as to be declared on the root element though.
html {
font-size: $font-base-size;
}
h1 {
font-size: tokens.$size-700;
}
h2 {
font-size: tokens.$size-600;
}
h3 {
font-size: tokens.$size-500;
}
Now every sizes are relative to font-base-size
and can be used without the 'limitations' of em
s. I don't think it is a new idea. More of a fluid version of:
html {
font-size: 1.08rem;
@media(min-width: $md) {
font-size: 1.2rem;
}
}
Anyhow, this is just me tinkering on my side project. Thank again for all your input!
from aleksandrhovhannisyan.com.
Edit: Nope, this doesn't work like I thought it would since it increases the ratio at a hard breakpoint.
@solution-loisir I thought about this a bit more, and I think something like this would also work:
--type-scale: <pick a ratio>;
--fs-xs: calc(var(--fs-sm) / var(--type-scale));
--fs-sm: calc(var(--fs-base) / var(--type-scale));
--fs-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
--fs-md: calc(var(--fs-base) * var(--type-scale));
--fs-lg: calc(var(--fs-md) * var(--type-scale));
--fs-xl: calc(var(--fs-lg) * var(--type-scale));
--fs-2xl: calc(var(--fs-xl) * var(--type-scale));
--fs-3xl: calc(var(--fs-2xl) * var(--type-scale));
--fs-4xl: calc(var(--fs-3xl) * var(--type-scale));
--fs-5xl: calc(var(--fs-4xl) * var(--type-scale));
@media screen and (min-width: desktop) {
--type-scale: <pick a ratio>;
}
You could also use CSS variables to derive the base clamp so it's not hard-coded. Going to play around with this, and if it works well, I might update the post and/or https://fluid-type-scale.com/ to make this an option for the output.
from aleksandrhovhannisyan.com.
@bearoxo Correct. My tool doesn't currently warn you if you accidentally go past that intersection; I'm not sure what the level of effort would be for that. Also, as a general rule of thumb, you don't want to add too many negative steps to your type scale since the font sizes will be illegibly small (in this case, ~8px, while the minimum recommended for the web is usually 12px).
from aleksandrhovhannisyan.com.
First of all, thanks for such a detailed and overall high quality write up. I've been experimenting lately with fluid types and fluid design in general. Funny enough, the following idea yield some pretty good results and is less complex than what I've seen in the wild and in tutorials.
$font-h1: 2em;
$font-h2: 1.7em;
$font-h3: 1.2em;
$font-base: clamp(1.08rem , 0.46vw + 0.9rem, 1.2rem);
body {
font-size: $font-base;
}
h1 {
font-size: $font-h1;
}
h2 {
font-size: $font-h2;
}
h3 {
font-size: $font-h3;
}
Now the headings are relative to the font base which is fluid with a very slight variation. I'd like to engage discussion over such concept versus clamping everything. Have a good day!
from aleksandrhovhannisyan.com.
Hi, Alexandr, thank you for the great article. It became very useful for me.
It's seems there is an misprint. It should be written --font-size-sm: clamped(13.33px, 16px);...
instead of --font-size-sm: clamp(13.33px, 16px);...
in "Native Approach..." section.
All the best to you!
from aleksandrhovhannisyan.com.
@yababay Good catch, thanks! I'll push up a fix later today.
from aleksandrhovhannisyan.com.
Sorry if this a dumbass question but I have been trying to implement this into my project for days now without success.
I am no web genius at all so after reading multiple articels on fluid typography and its formulas, I am left with only one question:
Is it even possible to dynamically calculate the preffered value in regular css ?
I tried calculating all values without units and then multiplying the slope with 100vw and the intercept with 0.1rem because I am using a Rem-value of 10px. I need an explanation or my head is going to explode :(
from aleksandrhovhannisyan.com.
@NiklasGameDev Andy Bell wrote this a few years ago. It uses unitless values to ensure CSS calc works correctly for the interpolation: https://archive.hankchizljaw.com/wrote/custom-property-controlled-fluid-type-sizing/. I bet you could do something similar for clamp
's min, preferred, and max values.
from aleksandrhovhannisyan.com.
Hi, NiklasGameDev, you can see working example here.
from aleksandrhovhannisyan.com.
I have seen this formula before in a few articles but it never worked. This one actually did work so thanks for linking it.
from aleksandrhovhannisyan.com.
Inverted min max value.
https://www.desmos.com/calculator/afxjle1b3d
from aleksandrhovhannisyan.com.
@bearoxo It might be worth moving that discussion to the project's repo as an issue: https://github.com/AleksandrHovhannisyan/fluid-type-scale-calculator/
That said, this is technically working as expected from a math standpoint. For example, on your graph, notice how the red curve is above the blue curve at x = -3
(corresponding to the xxs
step in your screenshot above):
However, I also see that comparable tools like Utopia just flip the min and max values: https://utopia.fyi/type/calculator/?c=400,16,1.25,1280,19,1.333,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12. I could do the same, but it technically wouldn't be correct, as it would mean that the minimum would be using the 1.333 type scale rather than 1.25 at that step.
from aleksandrhovhannisyan.com.
It's 2AM now and my brain is potato. But I think I get it now, that intersection point is where the fluid scaling starts working its magic, before that point it'll shrink the font size but will still max at the red curve.
from aleksandrhovhannisyan.com.
Related Issues (20)
- Writing Better CSS HOT 7
- HTML Input Validation Without a Form HOT 1
- copyCode.js error in line: const code = codeBlocks[index].innerText; HOT 1
- Comments are getting truncated after 30 HOT 2
- Design Mode in 11ty HOT 2
- Image attribution not displaying HOT 1
- Feature Request: Front Matter Format For Local Image HOT 1
- Creating an Accessible Image Carousel HOT 10
- Feature Request: Order comments from older to newer HOT 1
- Lamp icon use? HOT 2
- figure.html params
- postImage.html params
- postImage.html params HOT 2
- RSS feed issue HOT 6
- After endless search I found this article. A lifesaver! Thanks
- Sprite Blinking Not Working HOT 2
- Works but how do I tweak it for 2D Platforming?
- are there any advantages to using cqi instead of vw HOT 1
- The Perfect Theme Switch Component
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from aleksandrhovhannisyan.com.