Lumos Typography | Webflow Framework

Get the Lumos Cloneable (affiliate link)
webflow.grsm.io/tricks?path=l...
Lumos Docs
lumos.timothyricks.com/
Join my Webflow Wizards Community
/ timothyricks
00:00 - Uploading Fonts
00:06 - Setting Font Families & Weights
01:17 - Letter Spacing & Line Height
02:15 - Setting Core Font Styles
03:06 - Styling All Headings
03:40 - Setting Individual Heading Styles
04:38 - Setting u-weight- utilities
05:43 - Unstyled Heading Tags
07:55 - u-rich-text
08:46 - Overriding Text Transform & Weight
09:34 - Adjusting Font Size Across Breakpoints

[@jessehebert8082]

The updated docs are 👌 superb

[@timothyricks]

So glad to hear that! Thank you!

[@anenglishmanyoutube]

Im learning Lumos and would love a video on how you setup components like the Section / Example / Split. How you make and attach properties. Great work by the way. Lumos is how Im building my new website!

[@timothyricks]

Thank you! Great suggestion. An updated components video would definitely be helpful. Now that Webflow allows us to duplicate components, we don’t have to setup the fields from scratch each time. For that specific component though, this video might help. It explains how the class attribute works with components. kzbin.info/www/bejne/foKlZ2CInc58otEsi=TC34YDvB1AzAag9M

[@anenglishmanyoutube]

Perfect, I will look over the video link. I will let you know when my site is done 😊

[@Itslogicee]

Hey Timothy! Really appreciate your work, it's incredible as always! Just a quick question in regards to heading tags within the rich text component. I see H2 is that standard tag, do we adjust these tags throughout our builds based on the order of use for SEO or not worry about changing the tags? For example in our hero would we change this to an H1? Thank you in advance!

[@timothyricks]

Thank you so much! Yes, H2 is the default heading, but we can change that tag per instance without unlinking the component. We just need to open the component rich text, select over the text, and then all the tag options appear in the rich text block. Usually we would use H1 for the first heading on the page.

[@Itslogicee]

@@timothyricks amazing, thank you. I will be subbing to your Patreon over the next couple of weeks - your content is gold.

[@timothyricks]

​@@Itslogicee Glad to help! Oh, thank you! I hope to see you in the Discord chats

[@divonci-world]

Hi Tim, if i've used the fluid builder then make individual changes in WF will the font maintain scalability? (ANSWERED AT 9:38)

[@timothyricks]

Hi, to make an individual change to something like the display heading’s font size while still keeping it fluid, that change would need to be made inside the fluid builder. It could handled like the --padding-horizontal--main variable is handled in the builder where we apply a custom desktop and mobile size.

[@divonci-world]

@@timothyricks good morning and thanks. Making changes now :)