Simple solutions to responsive typography
HTML-код
- Опубликовано: 28 июл 2024
- In this one, I look at two simple ways to make maintaining your site's typography much simpler!
🔗 Links
✅ The codepen: codepen.io/kevinpowell/pen/MW...
✅ More videos on responsive layouts: • Responsive Layouts
✅ My free course on responsive layouts: courses.kevinpowell.co/conque...
⌚ Timestamps
00:00 - Introduction
00:49 - The problem most people run into
02:28 - Using custom properties
05:16 - The issue with viewport units
07:18 - Using clamp()
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
That +1rem is noiceeee I love it. Pinch zoom is issue with viewport units.
this
Yup, now off to add this to every clamp() I've written.
Can someone further explain this? I don’t understand. Thanks
@@bulkywallnut5674 as you zoom in your viewport shrinks hence actual vale of vh and vw also goes down but rem stays same regardless of viewport size.
Never considered pinch zoom 🤔
Otoh, why would you want to pinch zoom if font size is appropriate?
“frontend friends.” for months i thought he was saying “friend and friends.”
Mind = blown 😮
So glad to see Kevin now includes accessibility concerns in every video he makes. This is so important for the community. Thank you!
@avfr like derek banas? anyway who hurt you?
@@miyalys a blind guy with hearing issues took his girlfriend and now he's sad
@avfr what the hell is a soydevs
I've been using clamp instead of media queries for a while now. But using both with variables is brilliant. I absolutely love it.
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, helpful staff. Love how you explain what I shouldn't use. Made my day. Thank you!!
Really good stuff. I'm learning a ton from your videos. Thanks for putting them together.
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!
Kevin, you are my savior! Yet another amazing video ❤️Thank you so so much and I wish you an amazing new year!
Amazing work man, you have taught me a lot of things from your videos! Keep it up!!
As always, great stuff. I think min, max, and clamp are pretty awesome.
this
The Clamp trick is amazing!!
Thank you for the tips!
As always, outstanding. Thanks, Kev!
Thanks for this video Kevin. Just used (clamp) for one of my designs after this. Super helpful.
Thank you, Kevin, that was precisely what I was looking for. I have subscribed for more. :)
Awesome as always. You never disappoint!!!
Amazing stuff as always, thanks a lot!
Excellent technique with the clamp + calc (implied)! :) Thanks!
Yet another great video Kevin! Thank you.
Great Video, Right now, was currently using vw, vh approach never heard of that clamp function seems really interesting, the only issue i see is the support. It's actually less supported than grid-layout, but surelly when browsers keep evolving will be a must use.
I've never heard about clamp, I loved it, thanks for the video.
it's nice to see a video with material about which you knew for 6 months already
I love your approach. Great job.
This is fantastic, thanks so much for these fun vids
Wonderful.
Understandable.
Incredibly useful.
Thank you.
Wooooow, you rock!!!
Your videos are awesome, clear and to the point.
Objective and Useful video! Thank you!
Neat! I've tried to do this with .less and never was able to, this is really nice!!
What a great solution!!! I really enjoyed this vid (whilst eating breakfast ha ha). Thanks Kevin 👍🏻
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!)
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!
I don't know if you already watched this, but if not, take a look: ruclips.net/video/pautqDqa54I/видео.html
Thank you for this video. Really helpful.
exactly what I needed, thank you!
clamp(3.5rem, 12vw + 1rem, 12rem) which is amazing. Now I will be use in my all projects
This is something I've been trying to figure out how to do via SCSS. Any chance you make a follow up with how to do this?
Keep up the great work.
I am so happy I found this channel 😭
Amazing video, thank you so much.
awesome, exactly what I neeeded
Great video, thanks Kevin
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 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
this video is awesome thanks a lot Kevin
Really good stuff., thank You!
Wow this is great! Thank you thank you thank you!!
Thank you Kevin!
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.
Literally saved my day!!
awesome job dude, thanks.
Defo my favourite RUclips coder ♥️
Wow This is Great Man ❤️
Great! ♥♥♥ :-) Thank you Kevin. Really helpful.
Man, why is this guy so awesome with CSS.
Killer tutorial !
He has video for my every css doubt
Thats awesome🔥🤯
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.
Also finishing your CRL 21 days course
Thanks so much! So happy that you're enjoying me content 😊
People really gotta clamp down on text like this :D
Thanks Kevin!
Thanks for the pro tips.
Pure gold right here.
Thank you very much.
pure gold
LOVE that t-shirt!
damn that is smart, never thought about root on media queries
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.
IE what , IE who
@@ooogabooga5111 Internet explorer bruh
CSS Variables - a great invention!
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
Wow, that ‘clamp()’ 🤯 i didn’t know about it. Merci
bienvenue!
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 😄
I like your css content
Loved the t-shirt... and tutorial of course...
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.
waoo this just blew my mind
I think the fall in love with CSS bit has drastically changed!
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?
thank you for help me : )
Kev. can you please do a tutorial on css design system/layout/structure. I will really be looking forward to that. thanks
Awesome 👏
amazing!
thanks!
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.
Woah, clamp() is native CSS? Awesome!
I think scss is moving to native css.
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.
percent!
@@roberotful I 100% agree with what Rob said 😉 Or is it 80%? I don't know anymore.
Doesn't work for font-sizes though :(@@roberotful
@@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!
Thanks
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.
Thanks!
Thanks Mark!
Another sub for you ❤✌
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.
What clamp generator tool do you use?
Ok, honestly I rarely ever say that but today I actually learned something I didn't know about..,
KEVIN SIR LOVE FROM INDIA ♥️🤘
KEEP UP THE GUD WORK 🙏🙇
thanks
Genious!
Je n'ai jamais réussi à trouver facilement les équivalences entre les viewport width and rem units.. Super astuces en tout cas..
Great solution. And by the way you have exactly 350.000 followers by now.
🥳🥳
All fonts - make in Rem < and @media maybe change just a ----- Rem?
How to place different length text into the div with fixed width and height?
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
dude the vw is a miracle
Thanks Jon Stewart !
whats with 499 and 599 and 699. almost every time you have you remove 99 to replace it with 00?