Damn your responsive layout tutorials are so helpful and I'm a fairly experienced dev. I love the clamp thing. I have been using min to get something similar but I like clamp even more.
Great that you explain we should not base font size on the view port size. It is not how typography works. Typography works on view distance (and you eye sight) so unless our devices get a sensor to measure how far our eyes are away from the screen we are reading, we have to work by the experience we have. Here we are in luck as we already use type for centuries, so we have some experience. An experience that is supported by some science of the last century where reading over distance became a real thing, like how large should type be on a road sign... The other great thing I would implement as soon as possible is to gather as much typographic parameters and behavior in one place, somewhere at the beginning of (css) files.
Interesting! I tend to use em (not rem) in all instances while making sure to always keep things very simple: End-points (so , , tags and the like) get an EM value, all padding, margins, etc. use em values, image sizes use em values (with srcset so the image can be much larger but display properly based on the actual display needs) or vector art. Then I will have "containers" like a or , or even a which can be designed to "mod" the size (say you want "big quotes", then that tag gets a font-size of 1.4em for example). Anything drastic or that could have many exceptions will be set using a class instead of a tag so that I don't have to override these em values constantly. Then I just use my body's font-size as a responsive breaking point. That clamp trick would work wonders there, since it would affect the entire site's content within controllable bounds!
Man , that's absolute genius, been fighting with this for years! I'm saving this video with my legacy firefox youtube downloader, that vid going in my library!
Great tutorial very helpful and demonstrates responsive text methods very well, thanks. I am not very experienced with css so this is a great introduction to responsive text. I am very interested to learn more about the overall layout design with this newspaper - magazine type layout which is great and makes the whole page more interesting to look at and more inviting to read. Do you have another video explaining the concepts behind this layout design? I can work out quite a lot from the code you kindly supplied in the codepen (thanks!) but some of the code I don’t understand. Thanks again!
Clamp is a good one. Thanks. I kinda wish they had something where you could set a size based on the parent container's width instead of the whole viewport.
@@ormuriauga I think setting font-size as percentage goes by percentage of the element-level font size, similar to em (I could be totally wrong, just my present understanding). I think percentage is a bit unintuitive for font sizes though, I usually use rem!
I have another method that works quite well for me. First, on root, I add a base font size with viewport width units, and then media queries that change that base font size. For example, for large screens "font-size: 1vw", but for smartphones "font-size: 3.5vw". Then I set everything using clamp usually, just to make sure that everything is in line and doesn't get oversized. Example "font-size: clamp(16px, 1rem, 22px);" It works great for me, and everything scales almost fluidly when resizing the window. I also use this root font size for margins and padding as well in some cases.
Kevin, you are the fucking best, you know, right?. This week I learned A LOT from you. Your content is incredible. Everything I have to do and find out how to on my projects, I search and you explained it better than anyone.
Great content as always! :) I really appreciate that you talk about pros and cons for every decision. I have only one question, if I read correctly clamps() is not supported by Internet Explorer... so how the page behaves when you open it in IE? I am not sure how many people still uses the IE but I think it is still in use in business segment.
I have been using a root vw font-size that is based to the Adobe XD artboard size. I'm using scss functions to aid me with this but it can be done with calc. this would look something like this: html{font-size: calc(20 / 1280 * 100vw)}. This will make it so that 1rem is 20px at a viewport width of 1280px. As you resize the viewport this relation will stay the same. Then you can use a different relation for a mobile width using media queries. This allows not just my text but other elements with rem/em values to scale perfectly with the viewport width. As a nice bonus I can use the same px values used on the XD artboard. I just have to convert them to em/rem. I use scss functions for this again to keep things neat but you can use calc for this as well. With a container width of 500px it would look like this: width: calc(500 / 20 * 1em); 20 being the base font-size that is also defined in the root font-size. This certainly brings a lot of advantages. My designer has a print background so a lot of his layouts heavily rely on the right ratio between text and other elements like images. But of course there a downsites as well. Aside from running into some unexpected bugs from time to time the two major issues are: 1. zoom accessibility 2. some layouts don't work very nice on larger screen sizes because you end up with very litte content being visible at a time. this might all be a bit much for a youtub comment but oh well xD
Clamp creates an s-curve for mapping font size to screen size. You can also achieve this with calc(#vw -#vw) but setting bounds with clamp() is much more Design Driven. Anything that helps detangle the mental exhaustion of mapping design goals to math is a big win
I've been sacrificing accessibility a bit on some of my projects by using viewport measurements, love the clamp idea. To solve the problem of vw getting super big/super small I had swapped to vh which I actually find to be a pretty good scalable solution - works well on both desktop and mobile once you find the sweet spot - if you don't mind it always being the same size regardless of zoom (which I think you obviously should mind now that I know clamp exists!)
This is a great approach thanks Kevin, the vars, I have been struggling to get my clamps just so with this last project I am working on and am thinking I will drop it for the custom variables approach for future projects and give the IE browser a fallback. One thing I'd like to add, the mobile body text needs to be 1.3 times bigger than desktop because people tend to hold the mobile screen further from their face.
What do you think about using an alphabet like the phonetic alphabet --fs-alpha: 10rem; --fs-bravo: 5rem; --fs-charlie: 4rem; --fs-delta: 3.5rem; do you think this is silly 😅
@@DarKcS2 IE11 was the last IE version and isn't even receiving security patches any longer... non-chomium edge on the other hand is the new problem child... other than people that insist on their custom browser flavor of some weird webkit clone.
I have watched a few of your videos. Good work! But I have a question about your approach to the rem. For example, we can see 14px as a base font size in our mockups. There are several approaches: 1) to use 62.5% for HTML font size and 1.4rem for body, etc. 2) to use 100% for HTML and 0.875rem for body, etc. 3) to use 87.5% for HTML and 1rem for body, etc. 4) others? Wiche one do you prefer and why? The Bootstrap 4 sets $font-size-base: 1rem to the body and nothing to HTML. The Foundation sets $global-font-size: 100% to HTML and nothing to the body. Both of them think in the base font size categories (1rem). I had experience with fluid typography by changing the HTML font size with a formula with vw (14px on mobile to 18px on desktop). It works well until we don't have mockups for several screen sizes. You can't use fluid rem in Foundation if the gutter is the same on mobile/tablet/desktop mockups. Long story short: I'm looking for the best approach with rem/rem-calc()/sizes/typography.
That is great when you have only one css file, but I use quite a few css files, one for images one for navigation etc, all my media queries are in one css file, easy to find what you are looking for indeed. EDIT: all my roots are also within one css file.
Seems like your clamp scaling will behave differently depending on the zoom level. The lower & upper limits grow faster than the target (because zoom only affects rem not vw), so I would expect >100% zoom to min-out/max-out at a proportionally wider screens, and
I built a logo name slogan hero in svg and to approve the relations always stay the same gave the svg a relative unit. Works fine for all screen sizes and is super fluid, but is definately no work case for paragraphs 😄
Those two :roots...yet another "oh, that's smart" moment in your videos. Thanks! If I understand correctly, that 1rem of the 12vw + 1rem is just a token amount, so you can pinch the screen -- is that right? If so, is there any reason NOT to put similar measurements throughout your CSS? e.g. for the --fs-400, could you put .5vw + .5rem, or whatever the size equivalent would be?
there should be a one css line for responsiveness that will remove the stress of most people (but i know its very hard for one line for responsiveness automatically)
Something that I don't really understand is: Do I have to adjust the font-size for every element? Because if I change the font-size of , every rem unit will adjust as well, which I don't want. It seems, as if I should define all font-sizes via classes, which I think is unnecessary for all regular text. I just want to overwrite the font-sizes at each breakpoint, like I do with h1-h6 and so on.
Please make a video about Z-index and how it works especially when working with ::before & ::after and how parent’s position might change things I’m currently working on some things and it involves a lot of layering of stuff, and trying to use pseudo elements things don’t seem to work the way I thought they did
I'm almost sad that I work almost exclusively with 3rd party frameworks now... I'm going to see if I can sneak in some of these tricks into the custom elements.
