Top Tips for Typography: Tools & strategies to improve responsiveness, balance, and accessibility!

Поділитися
Вставка
  • Опубліковано 29 січ 2025

КОМЕНТАРІ • 52

  • @JupitersLuck
    @JupitersLuck 2 місяці тому +1

    Amazing content! I never paid attention to typography but now I am going to!

  • @kateq1223
    @kateq1223 4 місяці тому +1

    All this information is new to me, and I can see the purpose. Would really like to see the longer video you spoke of.

  • @JohanSkandevall
    @JohanSkandevall 7 місяців тому +17

    I would like a more in-depth video on how you set this up in your child theme. Thanks! And great video!

  • @spencerneal6476
    @spencerneal6476 7 місяців тому +4

    Nice work Kyle! CH will be used from now on. Looking forward to the longer typography video 😉

  • @invisible-ink
    @invisible-ink 7 місяців тому +3

    The in-depth video sounds great!

  • @toddchaney
    @toddchaney 7 місяців тому +1

    Sign me up too on the Advanced video. Your content is always helpful and to the point.

  • @marktenney4294
    @marktenney4294 7 місяців тому

    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!

    • @TheAdminBar
      @TheAdminBar  7 місяців тому

      Sounds super interesting!

  • @sundellsolutions
    @sundellsolutions 7 місяців тому

    Thanks for the very informative video - I did not know about clamp or ch units

  • @LizPaprikaCreative
    @LizPaprikaCreative 7 місяців тому

    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.

  • @marktenney4294
    @marktenney4294 7 місяців тому

    CH units! I’ve never explored those but now I really need to take a closer look at them. Thank you, Kyle!

  • @comartse
    @comartse 7 місяців тому

    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!

  • @EdHallPhotoFL
    @EdHallPhotoFL 7 місяців тому

    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.

  • @rubruiz
    @rubruiz 7 місяців тому

    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.

  • @upstagecrm
    @upstagecrm 6 місяців тому

    This really is a great post. But can't you use the newer asset manager to create a style for handling lookalike classes?

  • @danielstrongin8525
    @danielstrongin8525 2 місяці тому

    Hey Kyle! Great vid! Do you have a video on how you set up your typography in your child theme or an article on it, or just a screenshot of your css file?

  • @anchordotmedia
    @anchordotmedia 7 місяців тому

    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.

  • @bjoernzosel
    @bjoernzosel 7 місяців тому

    typescale is ❤‍🔥❤‍🔥❤‍🔥 many thanks!

  • @hclyrics
    @hclyrics 7 місяців тому

    Thanks for these invaluable tools and tips! I'll be using the type scale tools and better-formulated clamp functions because of this!

    • @TheAdminBar
      @TheAdminBar  7 місяців тому

      Very nice! Glad it was helpful 🙌

  • @Alan.T
    @Alan.T 7 місяців тому

    +1 for the deep dive video. And thanks for the latest release :)

  • @AnilAgrawal
    @AnilAgrawal 7 місяців тому

    Awesome tips! Loved them. Thank you.

  • @web-atelier
    @web-atelier 7 місяців тому

    Hello, these kinds of videos are very useful! Thanks. 👌

  • @curefilms
    @curefilms 7 місяців тому

    I think ...ch can be individually used on heading blocks and paragraph blocks...I found this approach useful in GB section intros, cta etc

  • @LohithAmruthappa
    @LohithAmruthappa 7 місяців тому

    Thanks for amazing tips.I was always wondering what coding deployment is needed to achieve this. Helpful for non tech folks

    • @TheAdminBar
      @TheAdminBar  7 місяців тому

      So glad you enjoyed it 🙌 Thanks for leaving a comment!

  • @TPOID
    @TPOID 7 місяців тому

    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?

    • @TheAdminBar
      @TheAdminBar  7 місяців тому

      Check out Jonathan Jernigan's channel - he's got a great modal video.

    • @TPOID
      @TPOID 7 місяців тому

      @@TheAdminBar Brilliant! Thank you very much. :D

  • @AndreasGading
    @AndreasGading 7 місяців тому

    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!

  • @aranchin-yo6wy
    @aranchin-yo6wy 7 місяців тому +1

    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.

  • @rajshome3579
    @rajshome3579 7 місяців тому

    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!

  • @OdisBurger
    @OdisBurger 6 місяців тому

    What about button texts? Should we create a new step for buttons? For example: button... lol. Appreciate you brother!

  • @joseluiso77
    @joseluiso77 6 місяців тому

    6:35 The Core Framework plugin, works for me.

  • @AJ-vy4yu
    @AJ-vy4yu 7 місяців тому

    Do advanced topics too, please😊

  • @donnyaw
    @donnyaw 7 місяців тому +1

    Why not using acss or coreframework to do this

  • @jeanelizedenys
    @jeanelizedenys 7 місяців тому

    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?

    • @TheAdminBar
      @TheAdminBar  7 місяців тому

      Hummm. You might wanna send in a support request on that one - I'm not sure!

  • @attilakatona2137
    @attilakatona2137 7 місяців тому

    please make the advanced video, thanks

  • @wohfab
    @wohfab 7 місяців тому

    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.

  • @Rowafaedits194
    @Rowafaedits194 7 місяців тому

    Can I edit your UA-cam video?

    • @TheAdminBar
      @TheAdminBar  7 місяців тому

      Sure, you pay me $100/video and the job is yours!

  • @markatgraf1x
    @markatgraf1x 7 місяців тому

    Sign me up for the advanced video please 😊

  • @PicSta
    @PicSta 7 місяців тому

    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.

    • @Line49Design
      @Line49Design 7 місяців тому

      Just stop staring at his lips 💋

    • @TheAdminBar
      @TheAdminBar  7 місяців тому

      Then don't watch 🤷

    • @PicSta
      @PicSta 7 місяців тому

      @@Line49Design good idea

    • @PicSta
      @PicSta 7 місяців тому

      @@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.