Webflow Typography 2024 Guide

[@DANNYFIGDESIGNS]

Thank you Timothy. This video helped me to get a better understanding. ✌(◕‿-)✌

[@timothyricks]

Oh, awesome! So glad this helped

[@FloNocode]

Thank for your insane content in 2024 ! you make so much for the webflow community :D

[@designbus]

Thanks Tim. Webflow is really upping their game, and your content is inspiring me to apply this awesomeness!

[@timothyricks]

I’m really glad to hear that! Thank you!

[@jayreambonanza1991]

I'm doing this now that this has an option to move the folders to the top and we no longer need to add a period. Could it be that Webflow's team watched this video? Anyway, thank you Tim!!

[@lamouralice4533]

This is always something I want ✨🙏🏻 Thank you

[@MohamedReda-vx3nw]

I have benefited very much from you.. but I have a question.. Can I adjust these sizes within webflow without the need for code? You can adjust 7 rods in the large size and 3 rods in the small size What is the difference between code and inside web flow.. please reply my regards

[@jo69123]

I'm trying really hard to use this framework again but I'm finding it a bit hard to understand, the first steps to take your figma design into Lumos

[@Binyamin1444]

I want to try it on my next build, need a solid tutorial

[@jo69123]

@@Binyamin1444 luckily he has made a few videos on it since this comment, and it's a lot clearer now, if you have any questions along the way just reach out.

[@jo69123]

I see that you made an update, using utility classes for styling H1 to H6 headings, could you explain why, or how do we use these? I see no styles applied to H1 headings, but rather to the "u-h1" css class

[@timothyricks]

Sure thing! If we rely on defaults styles of heading tags instead of applying a class, we can't rename the utility to globally adjust that heading's style across multiple instances of layout. Also changing the tag from h1 to h2 could also cause unintended style changes if a class isn’t applied. Removing the styles from h1 through h6 tags helps us remember to always apply a class and allows the headings to receive styles from their parent’s class if needed. This is useful when dealing with components or unique layouts.

[@delaro32]

Is fluid typography in the pipeline for Lumos? It's currently the only thing preventing me from using it :(

[@timothyricks]

Thank you for the suggestion! Any fluid code can be used currently with Lumos to scale the html font size. I'm considering building a custom fluid generator for the framework based on container query width, but personally, I like to use fluid sizes only for larger headings instead of a scaling the entire website.

[@wisssse]

@@timothyricks could you make an tutorial on this? I would like to know how this will work with Lumos. I've tried to use clamp, but not sure how to set it up correctly in combination with Lumos.

[@MustafaNadeem-o3i]

That's it. I am switching to Lumos and going to start learn it now.

[@timothyricks]

You got this!

[@sam-vogel]

Hey Tim! Why don't you include bottom margin in your typography variables?

[@timothyricks]

Hi Sam, Lumos has extra-small, small, medium, & large spacing variables that can be used to space apart elements. The space between a heading and a paragraph should be smaller than the space between a heading and a button, or the even larger space between a heading and an image. Using flex gap instead of margin allows us to make components more reusable with conditionally hidden elements without the spacing falling apart.

[@Fray-bentos-george]

Thanks for all your work Tim. I’m gonna give lumos a go on my next webflow project. How do you deal with video in webflow. I feel like that’s an area of webflow that could be massively improved

[@timothyricks]

So glad this helps! I usually use the custom element to create a video tag and host the video url through Vimeo Pro. It can also be hosted for free through jsDelivr. I have a tutorial here on how to setup the video tag. kzbin.info/www/bejne/fqiZapqridCdiposi=UurkqiSOeOPSsb8t

[@taunado]

@@timothyricks KZbin API doesn't offer simple functionality right? Vimeo Video Player api is super simple to work with.

[@matthiaspanopau]

Just out of curiosity, I noticed that you use a kind of linear interpolation of scaling in landscape and a kind of irregular interpolation (where the factors are the same for the lowest and highest values but vary in between) for tablet in the custom responsive code in Lumos v2.0.1, can you share your thoughts on this decision? Thanks again for the detailed explanation in the Video. I have the feeling i am slowly getting it! :)

[@timothyricks]

Great question! These don’t follow a precise scale factor because the end result would be a really long number behind the decimal point. Instead sizes are set in increments of 0.25rem. Larger sizes are divided by a bigger number so that less size is lost for our smaller variables. Example 2.5rem / 1.25 = 2rem 7rem / 1.75 = 4rem 14rem / 2 = 7rem

[@matthiaspanopau]

@@timothyricks Ah, that makes sense to me. Two thoughts on this. 1. in general, could the numbers not be rounded to two decimal places to make the scaling factor more uniform? 2. on the tablet: here the lowest and highest values have the same scaling ratio (1.75/2rem=0.875 and 14rem/16rem=0.875), but it gets really wild in between :D I wonder if these are more mathematical decisions or decisions based on experience with different screen sizes, or a combination of both.

[@timothyricks]

That’s a good point! Most of this is caused by forcing everything to fit within 0.25rem increments. I’ll work on an update with just rounding to two decimal places instead with the scale ratio always ascending.

[@matthiaspanopau]

@@timothyricks I tried something with 'calc': '--size--2rem: calc(2rem * 0.875)'. Maybe this could work? You can find a link to the code sandbox in my channel info. :)

[@timothyricks]

Thank you! Lumos V1 was built that way. In V2, I prefer for people to see the end value though instead of a calc. I just updated the tablet spacing so the scale factor starts with a larger number (* 0.875) and decreases as the sizes get larger (* 0.75)

[@renieljustincole5615]

Do you have an academy where i can learn more about this things?

[@timothyricks]

Hi, this is the typography lesson of my course. I have lessons on layout, color management, spacing, and then putting it all together by designing a site in Figma and then building it in Webflow. The full course is in this KZbin playlist kzbin.info/aero/PLoXSZEwtbyStInsfWsEO5ouJ7HTfMMLeA

[@crsmoore]

@@timothyricks- Do you have a training where you build a few standard landing pages using Lumos v2? What I mean by “standard” is landing pages with simple layouts, nothing super advanced and complex.

[@jaga22dl]

Is this achievable without the custom code?

[@timothyricks]

Not currently. Webflow would need to support font weight, text transform, and adaptive sizes in variables natively

[@crsmoore]

@@timothyricks - Do you know if Webflow is working on this and committed to it? Thanks! 🙌

[@timothyricks]

@@crsmoore I don't have anything confirmed from them on these. The only thing I know is they announced at Webflow Conf that they're working on native color mode switching.

[@cameliafilip]

I've put this into a code embed after creating another code embed for the root file: /* tablet */ @media screen and (max-width: 1200px) { :root { --size--7-5rem: 5rem; } } /* landscape */ @media screen and (max-width: 767px) { :root { --size--7-5rem: 4rem; } } /* mobile */ @media screen and (max-width: 480px) { :root { --size--7-5rem: 2.5rem; } } So I have a huge font size of 7.5rem for my H1 but after adding this pasted code embed for the media queries, nothing happens on tablet or mobile. I have no idea why since everything worked up until the responsiveness.

[@ludiloizsenke11]

wow