Top Tips for Typography: Tools & strategies to improve responsiveness, balance, and accessibility!
Вставка
- Опубліковано 11 жов 2024
- When it comes to website design, we tend to spend a lot of time talking about things like color, spacing, layouts, and interactive features.
But it’s impossible to make any of those things look good if you start off with bad typography.
In today’s video, we’re going to focus on 5 impactful tips and tools that will instantly elevate your typography game; making your websites more responsive, balanced, accessible, and easier-to-read.
---
References from this video:
Typescale: typescale.com
Clamp Calculator: chrisburnell.c...
Fluid Type Scale: www.fluid-type...
💻 Visit Our Website: theadmin.bar/y...
🗨 Join Our Free Community: theadmin.bar/y...
📨 Get the Best of The Admin Bar Delivered: theadmin.bar/y...
🔁 Sell More Care Plans: theadmin.bar/y...
🧮 Use My Website Price Calculator: theadmin.bar/y...
📜 Get My Proposal Template: theadmin.bar/y...
☑️ Get More Done with My Checklists: theadmin.bar/y...
🔴 Live Event Schedule: theadmin.bar/y...
🔧 The Tools I Use: theadmin.bar/y...
⚡ My Agency, OGAL Web Design: theadmin.bar/y...
![Website Setup Process: Design, Specs, Child Theme Configuration & More! [full site build w/@instawp]](/img/n.gif)
I would like a more in-depth video on how you set this up in your child theme. Thanks! And great video!
Yes, please.
All this information is new to me, and I can see the purpose. Would really like to see the longer video you spoke of.
Nice work Kyle! CH will be used from now on. Looking forward to the longer typography video 😉
The in-depth video sounds great!
Sign me up too on the Advanced video. Your content is always helpful and to the point.
Great Video Kyle! Yes would love a more in-depth look at how you set up your typography in your child theme! Also has the new way of working changed how you set up your started site enough to warrent a new video? your old one realy helped me set up elements and global styles at the time.
Thanks for showing the Fluid type Scale Calculator site, I had looked at when I first was diving into fluid typography but quickly went to one of the "simplier" ones Now I'm going to explore that site deeper.
Another amazing video! I did not know about CH units or the clamp metrics. Much appreciated! I would be interested in a more in-depth video on type settings. I would be very helpful to grasp some of the metrics systems and the thought behind them for a better workflow.
Great stuff Kyle! I have been building my own design system settings API and decided that there was a much simpler way to do clamp than most of the calculators approach it. Instead of hitting the min value at a specific breakpoint, I just set mine to stop whenever it hits the min value that I want based on a minimum typescale. (It’s really hard to explain, but it ends up working without complex math.)
Great tools!
Sounds super interesting!
Seeing how you switch out the typography from site to site sounds very interesting. Thank you for this great info and good resources for creating CSS!
CH units! I’ve never explored those but now I really need to take a closer look at them. Thank you, Kyle!
Thanks for the very informative video - I did not know about clamp or ch units
Thanks for another great video. I would love to if you did a more in depth video of how you set up typography in your child theme.
Thanks for these invaluable tools and tips! I'll be using the type scale tools and better-formulated clamp functions because of this!
Very nice! Glad it was helpful 🙌
Awesome tips! Loved them. Thank you.
+1 for the deep dive video. And thanks for the latest release :)
The timing on this couldnt be any better! Thank you so so much for all these videos, they help a ton! I would love a dedicated video about your typography settings.
Also, do you happen to know a good, lightweight way to implement a modal popup on button click?
Check out Jonathan Jernigan's channel - he's got a great modal video.
@@TheAdminBar Brilliant! Thank you very much. :D
Breakdance builder uses typography presets that you can apply to heading tags or use as a "look a like" system. Plus, you can use clamp, calc, and ratio etc.
This really is a great post. But can't you use the newer asset manager to create a style for handling lookalike classes?
Hello, these kinds of videos are very useful! Thanks. 👌
I think ...ch can be individually used on heading blocks and paragraph blocks...I found this approach useful in GB section intros, cta etc
typescale is ❤🔥❤🔥❤🔥 many thanks!
I believe elementor enables you to change the heading with a clamp with h number included, then let’s you choose how to present it for the website that way their their is a hierarchy between heading levels and allows you to have better accessibility.
HI. I love your videos.Also, can you do a tutorial on taxonomy filter for generatepress? It will be very helpful for filtering blog posts based on category.Thank You!
Thanks for amazing tips.I was always wondering what coding deployment is needed to achieve this. Helpful for non tech folks
So glad you enjoyed it 🙌 Thanks for leaving a comment!
What about button texts? Should we create a new step for buttons? For example: button... lol. Appreciate you brother!
Hello, I want to thank you for your amazing tutorials on WP, GP, and GB. Could you please do a tutorial on how to create multiple off-canvas panels? For example, having the left one for the main menu, the right one for misc (table of contents, related posts, etc.), and placing the buttons in the header so that on mobile it looks like:
Menu - Site Title - Misc
Thank You!
Do advanced topics too, please😊
6:35 The Core Framework plugin, works for me.
I would strongly suggest, avoiding look-alike classes. If you "need" those in a design, that's a sign, your typography setup isn't working as intended. On the point of accessibility, the HTML structure should always follow the visual appearance and also be consistent throughout. If you make an H2 look like an H3 in one place, it should look like that in all places. Then what is an H3 looking like? This should be avoided.
Why not using acss or coreframework to do this
Not my jam.
Thanks for the video. I'm trying to set this up but i'm having trouble loading the font. I loaded the custom font but when i try to reference it, it doesn't seem to exist(i turned off load google fonts and if i use a system font it works) i even tried to do it directly with a selector in the element css. the only way i seem to be able to apply the custom font is by using elementors interface and picking it from the drop-down under custom fonts, which breaks the whole idea using custom properties.. anyone have experience with this please?
Hummm. You might wanna send in a support request on that one - I'm not sure!
please make the advanced video, thanks
Sign me up for the advanced video please 😊
Can I edit your UA-cam video?
Sure, you pay me $100/video and the job is yours!
You need a different microphone option. Lips not in sync with voice. Watch it yourself. It feels unnatural and not very pleasant to watch because of this. Although your content is great.
Just stop staring at his lips 💋
Then don't watch 🤷
@@Line49Design good idea
@@TheAdminBar Best answer, seriously. You should be happy to get these types of feedbacks. Watch other videos, and it feels not as disconnected as your videos. I'm sorry when truth and constructive criticism is not what you want to hear. True face revealed, buddy.