This. Is. Perfection. You're a master, Dave.

I never did like the way font sizes jumped between breakpoints. This was a very satisfying tutorial. I feel very organized. Thank you sir.

Thank you!

This tutorial along with Kevin Geary’s tut on fluid typography are the best I’ve watched here on YT and upped my game tremendously. Thank you, Dave! I love Bricks and this actually gave me a good idea on how to implement it in Elementor through their global fonts settings.

Proud to be your channel subscriber. One of the most important videos for me on the YT

Prefect tutorial and explanation. This saves so much time and frustration. Thanks 🙏

You have no idea how much time you just saved me! Thank you so much. In a nutshell my "DEDICATED DAYS" of text updates are over! Thank you Dave!

This must be one of the most useful tutorials I've listened to. Cheers to you!!

Not really your target audience, Dave, but your videos are a work of art.

Really good video Dave, wasn't looking for this subject but watched it all!

Perfect. Now fluid spacing :)

Superbly explained… love it

Absolutely phenomenal tutorial, Dave! One of the best I've ever seen on any topic. Just implemented this and it's working like a charm. Thanks very much for posting this!

Woooooooow! Thank you very much for making this video. I've been smiling throughout the tutorial. Nice sense of humour, and awesome presentation. The approach to fluid typography is new to me. What a time-saver!

Great video Dave, the first time I've watched your channel but it definitely wont be the last.

Very cool! Thank you so much! Just watched Kevins video a couple of days ago and together with this one it all comes to life now. Maybe could have managed somehow without, but will be saving me so much time and brainpower. And the calculator is absolutely amazing...

Awesome, thank you!!!

Well done 👍🏻 I am an ACSS user, but will adapt this method for EL 🙈 sites I have created in the past. I know other tutorials on fluid typography, but yours is very descriptive - and the calculator is one of the best I've seen so far.

I had this going in Oxygen but when I started using Bricks I thought should at least give the default workflow a chance. But typography in themes is a no go! Thank you so much for this!

Thanks a lot for this detailed explanation.

Hudge thanks Dave, a nice gift!

Very nice indeed. Love your style of instruction, and how you know your stuff. Your videos are very well organized, making them easy to understand, and adding your touches of humor make them fun as well as educational. I know that takes a lot of extra effort to produce such quality, so thanks for your hard work. Side note: Although I know it's a very popular thing to do, I don't understand why Thomas made the default for html font size 62.5%. in Bricks. I've read that even though it is convenient for pixel to rem conversions in your head, it can mess up accessibility for people who change their default font size. There are other reasons as well. As you say, people can choose to change it if they wish, but I think it's better if a page builder is set to the default web standard; then the choice to move away form that standard is up to the user of that builder.

Great Job, you nailed it. Thanks for sharing, liked and subscribed.

You are seriously one of the greatest teachers ever. Your pace is perfect, pronunciation super sharp, upbeat and nice. Just smooth and wonderful to listen to. Easy to learn. And what an amazing production quality. Congrtatulations! *Subscribe and like... I'm using Elementor, bought Bricks but are "terrefied" to switch, and don't know how. And are currently using H1,H2,H3 etc. in wordpress visual editor. It's a nightmare. Do you have a video on switching from Elementor to Bricks? And how can woocommerce be edited within bricks? I'll tell you it's hard to be an amateur haha. But you make it easy. Thank you thank you thank you.

This video tutorial is very best... danke....Dave.

Great one as always Dave!!! Thanks a lot!

Get your free PDF cheatsheet, visual reference, and extra code here: davefoy.link/bricks-typography -- The extra code also includes line heights AND means you don't have to set ANY typography up in Bricks Theme Style at all. Take my FREE Bricks masterclass-learn the real key to faster builds, effortless future maintenance, and more profitable projects: www.davefoy.com/l/bwb-mc01-reg/

Pretty cool introductory course on fluid typography. I watched till the end. You've got talent. I'd say, though, that there are still quite a few accessibility issues with fluid typography, despite being around for many years now. (I remember Chris Coyier experimenting with it back in 2012). People can't zoom, the user loses control, all of which goes against basic accessibility principles. Google does not like that, either. It also does a terrible job with complex designs - simply because a website can't be 100% fluid , unless you keep it super simple. It requires a fairly good knowledge of css to find fixes. The irony being that you end up writing specific queries applied to elements in your design - container queries - with custom properties and odd units like cqi and cqw to tame the beast. To cope with font size interpolation, the calculator becomes your best friend. It is so tedious. Font pairing can also turn into an ugly mess. Hence the reason why pros still stick to responsive typography 99,99% of the time. Great for experimentation and simple websites, though. But you're right, it is probably the best way to work with typography in Bricks, with proper scales, as it is much faster to write media queries by hand than to set them up with Bricks. I do have some reservations about Bricks, I must say. The concept is nice, definitely deserves a try, the developers are quite smart and rigorous, but overall it is alas still buggy. I would not trust it yet for a production website. It should work for simple projects, though. I don't quite get its reputation for being a developper oriented tool. Despite being open to advanced concepts, it is pretty straightforward to use and must be quite rewarding for first-timers looking for a hands-on experience. As a matter of fact, the community seems to be one of hobbyists building their first websites. I've checked quite a few from the showcase category in the Bricks forums, oh my ... There's nothing wrong with being a complete beginner, quite the contrary, but still... a collection of "Don't", all the way. Most get a terrible PageSpeed Insights score - not Bricks' fault, for certain. One thing is sure, they certainly need you and Bricks, thanks to its rigorous approach, could be a fantastic learning tool. I wish you the best with this new series of tutorials.

I am trying to shift from elementor, and the way they built the global fonts and typography gives you more room (in my noob understanding of Bricks) to create more customized options for selecting which font to load on each element. for example, i create a font called page title, select the family, size, etc, and whenever you want to insert a page title go to element style and select the font you created from global fonts and it will popup directly; same goes for product. and whenever you want to change the font styling you just edit the Global fonts and they will change everywhere on the website. Again, i am new to Bricks and trying to figure out how to migrate an existing built from elementor. Thank you for the great explanation.

Especially handy now that bricks supports variables natively.

Thanks a lot Mr.Dave. You are the best tutorial maker I've seen so far. Still thinking about buying your course, and I will soon. You're the only one tutor that I can watch all day long full focus. Everything is perfect on your videos. KEEP POSTING!

Absolutely nailed it with this one sir!!! You need to do something similar for the spacing scale.

Dave love the bleep on the dev tools I want that 🙂

this thing is good for font size... in bricks we can't add global font style like we can do with elementor. we have to go there and select line height and font-weight. etc.

oh i didnt know you did a video on this, nice! i'm trying to get this working in gutenberg as well (dont ask )

Bricks has it's own custom CSS tab under "Settings" > "Custom Code". Why add extra bloat to your installation when you can use that? Other than that, great tutorial!

Hi Dave, thank you for the video, very useful and implemented in my site. I have a question related to space between components. As we are using different Scale ratio for Headings and base text. What scale ratio should I use to separate my website components and being consistent? I mean, we are using Major Second/Minor Third for text size and Major Third/Perfect Fourth for Headers. This leads my to build two separated typgraphy sets in Core Framework. Which scale ratio should be using for Margins, Padding & Gaps between components in my site? As both sets have different font size, which font size (text/headers) should I take as reference of my scale ratio for spacing? Thank you for your time and attention

Thank you for your video, it's extremely helpful. A quick question: at 13:00, you mentioned that the Max screen width should match the Container width in Bricks, can you explain that in more detail? I don't see a clear connection between them. Because if I'm not mistaken, Max Screen Width is the width of the entire device screen (from one edge to the other). Whereas, Container Width in Bricks is simply limiting the width of the content on the website.

Wow, the math comment made us comment. What an analogy!

Thanks for your grate tutorial ❤

Nice job

Excellent! Very clear and easy to understand. I'm actually going to apply the code to Breakdance, not Bricks. How does line height come into the equation here? Or maybe it doesn't!? Thanks.

Incredible useful. Thank you very much 👍

Watching on KZfaq is really convenient for people with poor English like me. I want to buy your full course but I don't know if it will also be offered via KZfaq or not? Because I need a video with subtitles (automatic translation from english to my native language like youtube did)

How I wish this features become native in bricks at some point

Thanks, Dave. A great, concise solution. Nobody has covered it as easily and comprehensively as this. A query on a detail: In text-xs and h6, you end up with the Min greater than the Max. For example, text-xs Min is 12.64px, Max is 12.5px, so the text won't ever scale down to 12.5px, let alone hit 12.5 as a max. Similar for h6 (which you say you don't use). Does this suggest an adjustment of some kind? A larger range or a smaller scaling factor?

When i watch stuff like that i feel like we are in the very begining of webdesign. So strange that no wordpress builder thought of that claiming beeing responsive. Strange.

Liking this, no more blip, blip, blip. Im currently using ACSS w Frames, I wonder how it will play with this. Cheers Erik Z

Quick question, what do you recommend for spacing, between elements, has anyone covered this? using root vars? ty

what camera are you using? you look more clearer than when i look at myself in the mirror wtf

Thanks for the cheat sheet. I was able to create the variable and use in the theme styles but utility classes were not created. Please can you help to understand that how can we create utility classes from your code. The utility classes is not working.

Works beautifully. One question though: Your headingy & text elements all have a margin/padding below to create distance to the next element. Where did you set that?

Haven't watched yet - was curious if your process works for Elementor as well before I invest the time, as I currently only use Elementor. Thanks!

Dave - if I currently have an h1 with a 1rem gutter, and as I scale the screen size down, the text never wraps but always just scales down to fit, would you still use CALC?

Any real-world feedback on how fluid typography affects accessibility?

Hi dave what is worng if i use for examle this css code? Because your procedure doesn't work for me when I start with mobile first and this code works perfectly { font-size: clamp(2rem, 5vw, 5rem); } Thanks mate😊

Or you can use Bulma the modern CSS framework. 😀

39:55 - Can you tell me why, despite adding utility classes as you show .text-m + .text-l etc., they do not load when editing the page in bricks builder? --var work perfectly, but the utility classes do not load (I type text-m and there is no such utility class). I thought that if you add all the values via code snippet, utility classes such as .text-m will be automatically available in bricks builder when creating the website. Thank you in advance for your help!

Hey Dave, why cant I have a 100vw type on Bricks? It doesn't work. Any workarounds?

Wow, Bob's your uncle 😁

Does anyone have a discount code for Bricks unlimited package? 😅

I wonder if this is similar to divi presets

This will be work with English language, but not with else...

Hello, I love your videos, I recently came across a new page builder called DROIP. Please can you have a look at it make review video for us or a tutorial on onboarding this new builder. Thanks