Simple solutions to responsive typography

[@technikhil314]

That +1rem is noiceeee I love it. Pinch zoom is issue with viewport units.

[@thecashewtrader3328]

this

[@PaulMcCannWebBuilder]

Yup, now off to add this to every clamp() I've written.

[@bulkywallnut5674]

Can someone further explain this? I don’t understand. Thanks

[@technikhil314]

@@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.

[@badunius_code]

Never considered pinch zoom 🤔 Otoh, why would you want to pinch zoom if font size is appropriate?

[@MilanRegec]

So glad to see Kevin now includes accessibility concerns in every video he makes. This is so important for the community. Thank you!

[@miyalys]

@avfr like derek banas? anyway who hurt you?

[@TuringTested01]

@@miyalys a blind guy with hearing issues took his girlfriend and now he's sad

[@throwbacksfather6625]

@avfr what the hell is a soydevs

[@SolomonOni-d1y]

You have made me I love with CSS and I'm really surprised with the amazing things you can use only CSS to do

[@munaq-jp]

I've been using clamp instead of media queries for a while now. But using both with variables is brilliant. I absolutely love it.

[@fahimsangharriyat495]

clamp(3.5rem, 12vw + 1rem, 12rem) which is amazing. Now I will be use in my all projects

[@cintron3d]

Thanks!

[@KevinPowell]

Thank you so much!

[@sumitwadhwa8823]

As always, great stuff. I think min, max, and clamp are pretty awesome.

[@thecashewtrader3328]

this

[@gregoryolenovich6440]

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.

[@SachinShukla]

“frontend friends.” for months i thought he was saying “friend and friends.”

[@iamkeir]

Mind = blown 😮

[@Atractiondj]

it's nice to see a video with material about which you knew for 6 months already

[@Cowglow]

The Clamp trick is amazing!! Thank you for the tips!

[@henkmeerhof8647]

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.

[@brunovincent1969]

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!

[@517design]

good point about VW and accessibility issues.

[@petarkolev6928]

Kevin, you are my savior! Yet another amazing video ❤️Thank you so so much and I wish you an amazing new year!

[@MeetDaveG]

Thanks for this video Kevin. Just used (clamp) for one of my designs after this. Super helpful.

[@RaveKev]

Danke!

[@KevinPowell]

Thanks so much!

[@RaveKev]

@@KevinPowell We have to thank YOU! I realy love your style, the length of your videos and your content.

[@vasiovasio]

Objective and Useful video! Thank you!

[@CarlosAlgms]

I've never heard about clamp, I loved it, thanks for the video.

[@hassanfayed1427]

This is so helpful. Thank you so much!

[@pwos36]

謝謝！

[@KevinPowell]

Thank you so much!

[@gonzaotc]

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.

[@gonzaotc]

Also finishing your CRL 21 days course

[@KevinPowell]

Thanks so much! So happy that you're enjoying me content 😊

[@chanel310the7]

I am so happy I found this channel 😭

[@ericnjanga3245]

I love your approach. Great job.

[@blacknoire]

Defo my favourite KZbin coder ♥️

[@fran_sar]

Wooooow, you rock!!! Your videos are awesome, clear and to the point.

[@RougeEric]

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!

[@user-yz5hj3zg2x]

I don't know if you already watched this, but if not, take a look: kzbin.info/www/bejne/ppLYpaR6psZoaqs

[@BasilBear]

Thank you, Kevin, that was precisely what I was looking for. I have subscribed for more. :)

[@unizfrhn2803]

Man, why is this guy so awesome with CSS.

[@rconr007]

Awesome as always. You never disappoint!!!

[@anuragsuryawanshi4177]

He has video for my every css doubt

[@zrowork1362]

Great, helpful staff. Love how you explain what I shouldn't use. Made my day. Thank you!!

[@bobbysilver272]

Yet another great video Kevin! Thank you.

[@ViorelMocanu]

Excellent technique with the clamp + calc (implied)! :) Thanks!

[@lakshyachopra_]

Amazing stuff as always, thanks a lot!

[@schism1986]

Neat! I've tried to do this with .less and never was able to, this is really nice!!

[@AniketEdot]

Thank you for this video. Really helpful.

[@AI_Bibliophile]

Wow This is Great Man ❤️

[@ryandornanuk]

Amazing video, thank you so much.

[@MrSteini124]

This is fantastic, thanks so much for these fun vids

[@TomasHradckyComposer]

Wonderful. Understandable. Incredibly useful. Thank you.

[@nitram_nosnibor]

What a great solution!!! I really enjoyed this vid (whilst eating breakfast ha ha). Thanks Kevin 👍🏻

[@ucielsola]

As always, outstanding. Thanks, Kev!

[@crawfordpaul7890]

Really good stuff. I'm learning a ton from your videos. Thanks for putting them together.

[@amankaushik5833]

awesome, exactly what I neeeded

[@asrockriel]

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.

[@kelvindogbe635]

this video is awesome thanks a lot Kevin

[@zachjensz]

People really gotta clamp down on text like this :D

[@wwhill8033]

Great video, thanks Kevin

[@aggelos_kilitis5405]

Amazing work man, you have taught me a lot of things from your videos! Keep it up!!

[@chrisstucker1813]

Killer tutorial !

[@ericdimarzio5756]

Wow this is great! Thank you thank you thank you!!

[@matteozhang7140]

Literally saved my day!!

[@aleksandercross5936]

Really good stuff., thank You!

[@eminm6383]

awesome job dude, thanks.

[@andreibade]

8:08 Why add 12vw + 1rem, when you zoom it won't scale right Why don't you multiple 1rem by some vw instead so it will scale better when zooming?

[@norvusordoseclorum]

I think the fall in love with CSS bit has drastically changed!

[@papluha32]

Great! ♥♥♥ :-) Thank you Kevin. Really helpful.

[@RehctubNomis]

LOVE that t-shirt!

[@metekavruk_Alanya]

Loved the t-shirt... and tutorial of course...

[@kaanozk]

the answer i was searching for.

[@photoinshot1355]

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!

[@benja-min1588]

Thank you Kevin!

[@mathzygote]

Thats awesome🔥🤯

[@AFE-GmdG]

CSS Variables - a great invention!

[@LemonBoy_483]

thank you for help me : )

[@shapelessed]

Ok, honestly I rarely ever say that but today I actually learned something I didn't know about..,

[@MuhamedAlfaifi]

I like your css content

[@RickBeacham]

Thanks for the pro tips.

[@smartdub]

Wow, that ‘clamp()’ 🤯 i didn’t know about it. Merci

[@KevinPowell]

bienvenue!

[@Bluukeson]

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

[@DarkAsylumVideos]

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.

[@anatanhofer3191]

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.

[@ooogabooga5111]

IE what , IE who

[@illyaassowunmi6183]

@@ooogabooga5111 Internet explorer bruh

[@bobrobertsNotUrBob]

damn that is smart, never thought about root on media queries

[@SivakD]

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.

[@roberotful]

percent!

[@Danko_HS]

@@roberotful I 100% agree with what Rob said 😉 Or is it 80%? I don't know anymore.

[@ormuriauga]

Doesn't work for font-sizes though :(@@roberotful

[@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!

[@FawadJaved]

whats with 499 and 599 and 699. almost every time you have you remove 99 to replace it with 00?

[@copyninja_03]

Thank you very much.

[@UndefinedComment]

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.

[@MackaBaer]

pure gold

[@cortarelva]

Pure gold right here.

[@ooogabooga5111]

waoo this just blew my mind

[@philwatts]

What's a "headach"?

[@roberotful]

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!)

[@huseynaliyev3457]

Great solution. And by the way you have exactly 350.000 followers by now.

[@KevinPowell]

🥳🥳

[@mikejackson7230]

Woah, clamp() is native CSS? Awesome!

[@RickBeacham]

I think scss is moving to native css.

[@КостянтинПетля]

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.

[@pahtashow]

ответ нашли на свой вопрос ?

[@permanar_]

Never change your fontsize to 62.5%. That's not a very wise choice.

[@theeemed]

@@permanar_ why shouldn’t you do that?,

[@kevinfredericks2335]

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

[@alexandermushibwe4745]

Another sub for you ❤✌

[@НикитаС-ь3ь]

What about line-heigth? Can we use clamp() with it?

[@DaveEricsson]

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 😄

[@carolmckay5152]

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.

[@monarchgam3r]

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

[@KevinPowell]

This might be what you're after: kzbin.info/www/bejne/q4SbnWePh72Vl9k

[@monarchgam3r]

@@KevinPowell thanks a lot 🙏🏽

[@arjunsharma1300]

KEVIN SIR LOVE FROM INDIA ♥️🤘 KEEP UP THE GUD WORK 🙏🙇

[@MikeNugget]

How to place different length text into the div with fixed width and height?

[@marwanak10]

I use clamps but let's say the max size is 32px, then when viewing on a 4k large monitor the font is small again and we go back to the media query solution...

[@msk7148]

All fonts - make in Rem < and @media maybe change just a ----- Rem?

[@kelvindogbe635]

Kev. can you please do a tutorial on css design system/layout/structure. I will really be looking forward to that. thanks

[@cate01a]

dude the vw is a miracle

[@floraposteschild4184]

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?

[@name_code5092]

Can you explain the before and after and declaring box sizing to border box

[@name_code5092]

Im just a beginner