Strengthening Typography with Responsive Techniques and Typetura

[@timv1656]

haha I finally got it! "font-end friends!" I kept on thinking you were saying "Friend and friends", even the youtube caption says that :)

[@markmckenzie5343]

Few things ive noticed binge watching your content over the last week. * While there are css properties you cannot animate, you can use a custom variable and animate that instead. * Get a web browser extension (may be built in) for VCode so you can open the design reference and your html file into tabs / split panes inside the editor. Wouldn't have to wrangle all those windows and tabs and downsizing things to make it fit. You could also set up something to capture the design ref window fullscreen and embed it like you do your webcam somewhere on the screen for us viewers. You could keep the window on a different monitor for yourself to see. Loving everything though. Been doing css/frontend for 15+ years. You've taught me a lot of things I didnt know.

[@seanklar5760]

Hey man, i just wanted to leave a BIG THANK YOU here. Your videos are so cool and so helpful. I am not joking - I was watching your videos, and maybe 1 or 2 weeks later I came up with problems or ideas, and I was just like "hmm, wait a minute, I think Kevin did something similar" .. and tada .. I had a solution for my problems or a way to reach my layout html / css goals. Thanks a lot for that! Keep up the very good work!

[@WTFAnyNameWorks]

Man, your channel is a GOLDMINE 🔥🔥

[@LeifNelandDk]

In Danish we use compound nouns like in German, so we can have fairly long words. Like "børnehaveinspektør" So we get some headlines that break in funny places on small screens. There ought to be a way to make a trigger on forced breaks to call an API to insert ­ at appropriate places. Or the CMS should simply pass all header/titles through a function to add ­

[@michaelschutz4619]

Hello Kevin. I love your tutorials and tips and tricks. I have a question: Do you think you could do in the future a tutorial video about HTML/CSS Newsletter Emails. It is a hard struggle as developer to create a responsive e-mail with html/css that works for every mail-client. Its like a impossible challenge every time.

[@pioleonardo]

I'll wait for that.

[@floriankleiner6475]

+ how to handle the dark mode of email clients. Its such a pain

[@gregorwassmann9779]

maybe try mjml

[@josvelema2362]

That's nice , it works smooth but I do find a bit hacky with using keyframes to do this , but also I like hacky , it's very clever that's 4 sure. Also ; another framework ? I personally am getting tired of all these frameworks that we nowadays 'have to have' in our headers but I do find it interesting in terms of how it's working under the hood .

[@KevinPowell]

I mean, you could roll your own with this with some resize observers and probably get it working, but it's so lightweight, I don't really see the point in reinventing the wheel if you want something like this :)

[@devoinregress]

@@KevinPowell that’s pretty much all Typetura’s JS is. A few resize observers.

[@archiem6323]

Kevin, how I enjoyed every video you make. 👍🙋🏻‍♀️😊

[@hovhadovah]

Hopefully, we'll one day get a container width (cw) unit so this isn't needed. For the time being, imo, clamp and vw are still the way to go. Not a fan of having to use JS for a CSS concern. It's an interesting library nonetheless, though!

[@schizoidman9459]

Hey Kevin! Great material, as usual! Really good job! I discovered you were also in another platform (I will also create a profile there, very good idea) and I was quite surprised to see you are in Montreal. I lived there almost 3 years teaching at the university. I am now in the south of Ontario. Man! This video is perfect to show why front-end web programming using HTML+CSS+JavaScript, especially when using typography, is so lousy (not WYSIWYG) and why we definitely need something else to do that. Obviously I knew this before but you explain the problem extremely well in this video. I tried to talk a little bit with you about that some time ago in another video (I think it was about WebAssembly). I did research in Computer Graphics and I am currently proposing vector graphics WYSYWYG graphics user interfaces for Java and other languages. But I believe we can do that also on the web using WebAssembly. I was told one can access pixels on the screen in the browser and that is the way games have been offered on the web. I also have a GitHub account. I can send you an email with details (this account I am using to write here is anonymous but I am checking it often). Please let me know if it is appropriate. I have been using typography from fonts that I read directly from font files using OpenType.js. I currently generate a Java class containing the glyphs, widths and kerning pairs with which I display strings on the screen. I use my own software to justify the text (I explain that in my GitHub) and I extended it to PDFBox to generate PDF documents that are perfect copies of what can be shown on the screen. In PDF I don't need to apply kerning, since PDF does it automatically, I only need to calculate the spaces between the words. The appearance is identical because PDF uses the same kerning information I extract from the font files. I would like to use this material (this video) to illustrate why we need real WYSIWYG material on the web. I hope you don't mind. Please advise. Cheers.

[@schizoidman9459]

Done! I pointed to your video in my GitHub first page, citing your name as the author and putting an image with a frame of you appearing in it. If you have any problems with that, please contact me via Discord where I tried several times to communicate with you without any success. Thanks again for the video. It is even more instructive than you think.

[@0-Will-0]

Video idea Kevin: If this type of thing would be possible via clamp with the container polyfill, that would be very interesting to watch!

[@panzerswineflu]

And just spent yesterday figuring out and designing with the wizardry system with some clamp

[@dziwnykamil]

Thanks Kevin! It'll make my life some much easier

[@anony-mousex]

Video should be titled "Make mountain out of molehill"

[@Stoney_Eagle]

I want a font size property that sets the font size to fit all the text in the box, so short text is bigger than long text. I'm doing this myself with a complex string length calculation but it's very annoying to get right and it only works for that particular box size. I use this in my video player if a show or movie doesn't have official logos like Netflix displays them in the pause menu. Works great as fallback but annoying 😉

[@justsample9185]

seriously adding javascript for font size

[@thewebart]

Thank you Kevin!

[@romanperera]

Okay, how would you solve a multiline breakpoint issue? Imagine you have a card with Name, Description, and More button. So you need to limit the Decsription to 2 rows of text. May be add dots (...) at the end if its longer than the said rows. How would you solve this issue? Thanks in advance, i learn a lot from you 😊

[@lovekeshpal204]

Will you be ever moving to FrontEnd Library like ReactJS

[@riddixdan5572]

I doubt it. unless he starts doing javascript videos, plain html and css will do fine for this type of content.

[@GnomePuntTrainerYT]

Kevin Powell does his viewers a massive favour by sticking with the basics (HTML + CSS) so they can follow his videos without needing to setup projects they might not know how to yet!

[@KevinPowell]

No plans to, no. I try to stay as tech agnostic as possible, so my content can be used in any tech stack really, and since I focus on CSS, I figure it makes the most sense. That said, if ever I do a bigger project (which I have planned), I would go a bit further than just vanilla HTML/CSS, but I'd still want to keep it pretty open. And if I ever do use a JS framework on my channel, it would be Svelte :D

[@jodorgu8640]

@@KevinPowell Svelte? them's fighting words! Lol!

[@horaciocuenca1046]

Se puede usar css por ejemplo font-size: 1.5vw; relacionando el font con el ancho de la pagina)

[@StefanH]

It's a useful little feature but i dont know if it's worth adding yet another dependency for such a small addition barely anyone will notice

[@anony-mousex]

Exactly, therefore its not a feasible solution - rather a weird hacky fix

[@StefanH]

@@anony-mousex I think everyone has to determime themselves whether they need this or not. Some might find it useful

[@anony-mousex]

@@StefanH sure, in some rare outlying cases

[@jmhpt]

It's a neat solution - but downloading 25 libraries à 1MB when visiting a website for a few gimmicks isn't the way to go.

[@BigBadTubaDudeCRA]

Thanks!

[@KevinPowell]

Thank you so much!

[@Skyflyer]

Verry nice, typography with super power. In case of a designer request to have a specific font-size at a specific page width. It is possible to set it ?

[@KevinPowell]

You could do some math on the cross-over of that specific size to figure it out, I think. Sort of defeats the purpose of using something like this though, since it's about placing things in specific contexts regardless of the page size (like, the page might be 1000px but the parent is only 600, so it's based on that 600)

[@nicksmith5306]

Hey Kevin, Thank you so much for all your content. It really is inspiring me and I'm sure 1000s more to code more. I have a question! Are you about to create a video about responsive design mobile first theory? I see a lot of videos on mobile first / responsive design, but they never really go into the theory tbh and thats the part I'm struggling to understand the most. I mean things like do you use width / min-width / max-width and what changes on them at different view popints etc. As you can imagine this video on responsive typography has me excited :D Thanks again for all your hard work. Nick

[@KevinPowell]

I'm all about mobile-first! I have a few videos where I talk about it, with this one probably being the one I focus on the most: kzbin.info/www/bejne/mJ-QdYR5nsuYh7M I also have a free course on the topic as well - kevinpowell.co/responsive

[@nicksmith5306]

@@KevinPowell Ha, I completely forgot about your free course on it lol I'll jump on it now actually. Thanks again Kevin.

[@GGdevelopment]

Kevin, i have question, what's the best why to approach this in mobile applications? Certain tools don't register certain css methods of styling...

[@ellisj98]

Interesting idea but if you have to use this for your design I would suggest looking at alternative routes to make your design more mobile friendly.

[@alakhdar100]

This is an interesting lilbrary, it makes responsive typography less of a pain in the as$, yet, i find the last property "--tt-ease" a bit useless since the end-vistor won't start playing with the view port and each visitor will stick only to the default size of its device which means won't see the effect of color or font being transitioned so why would i add unnecessary code to my page and increase loading time?? please correct me if i'm wrong.

[@dowelg1071]

hello my question is out of the topic, but is there a way to make a container thicker when flipped 90deg? So the side of the container won't be gone when fillped.

[@keviincosmos]

I love you man 👏😎

[@anandca4096]

I've a grid with 2 grid item, 1 item on the left should be scrollable and the other shoud be fixed on right. Can it be achieved without giving fixed height to the container or grid items

[@diegognoatto8706]

never used this minmax into autofill grid before,cool, doesnt it generate future waste because we gotta account to load bigger images that we really need?

[@KevinPowell]

You'd account of the biggest the image would have to be, or you could use srcset and provide it multiple versions so it loads in the best one for the situation on it's own.

[@diegognoatto8706]

@@KevinPowell thats the dilema i thought, if i account for the biggest image would have to be it would be a loading waste on mobile, media queries also would be weard cause who is controling the size of my container is grid min max, for the same reason src set wouldnt let me to guess the correct size to setup it. am i missing something?

[@MrMairu555]

I'm a little disappointed at the lack of smooshing in this episode! 😃

[@frankdrolet9439]

It looks kinda cool, but it would have been way faster to just change the font size on the biggest card. This is not time-saving at all and makes more stuff to add in the header.

[@treenopie]

...must...watch...Kevin...

[@chetankhulage]

Kevin is awesome 😎 like this comment for much respect and love❤️

[@raman1444]

Morning, whi Input tags got disable after making body position relative

[@saqlainalvi5485]

I am sorry but I zoned out after the key frames part. Don't know why though 😅

[@Luggruff]

Bothers me that there is still no way natively to just say "the left part of my text should touch the left side of my div and the last part of the text should touch the right side".. and maybe even define how many rows we want. By adjusting the text size and not the spacing of letters (justification)

[@TokyoXtreme]

display: inline-block ?

Hmm. This was a bit confusing video for me. It would have maybe helped if you explained some basics about how typetura works before using it.

[@KevinPowell]

Sorry about the confusion. I figured it would be easier to understand actually seeing it in action instead of talking about it in the abstract. I guess I was wrong :\

@@KevinPowell No problem. I love your work. Keep it up.

[@crooker2]

Container queries will solve everything. :)

[@RasmusSchultz]

So this is cool, but I honestly don't like the way it mixes CSS and JS declarations. Those custom properties are the "API" you use to configure the script - seems kind of fragmented, like, you're reading the CSS and just have to know about this script to understand what the custom properties are doing and why that works. I guess there's no CSS feature yet that lets you calculate something based on current width? It seems like that's what we need to do this cleanly. 🤔

[@n_mckean]

Has anyone found a way to adjust text size with CSS based on the length of the text string itself (without JS)? So if I wrote a short heading the text would be bigger than a long heading. I'm not holding my breath :)

[@groovebird812]

What is with the performance? Using animations sounds like a hack

[@KevinPowell]

It is, but it's fine for performance. It's not animating unless your resizing, the rest of the time it just has a set font-size.

[@vnm_8945]

nobody is having fun with this.

[@Spytie1]

looks cool but also quite expensive :( 20$ a month per domain name is a critical strike

[@TrostCodes]

The JS library Typetura is completely open source and free to use. If you want their specific typography styles that you can drop into any site and have the type styled, that's where you pay. Most people are going to use it totally free. It's like Tailwind and TailwindUI.

[@Spytie1]

@@TrostCodes oh! thank you for clarifying, i visited their website and immediately saw pricing without really digging my bad

[@outpost31737]

I don't like clamp anymore, why we have to apply a middle value is beyond me. Very annoying.

[@i007c]

tell us about win 11 😂😂

[@KevinPowell]

I'm enjoying it so far 😁

[@anony-mousex]

Tedious hacky fix AND yet another JS framework? Ill pass. I can do this using a basic css media query :)

[@workout.trending]

bro can you please speak slowly in your tutorials ty.

[@jodorgu8640]

You can change the playback speed in ths settings to slow it down

[@KevinPowell]

This is me slowing it down 😂. In all seriousness, I realize I talk fast, and I really do make an effort but I often fall back to my natural cadence as I go, and I have to keep catching myself. You could slowdown the video in the speed settings though in YT, which I realize isn't ideal, but it could help :)

[@workout.trending]

yeah i will slow the video lol that's the only solution 😅🤣