Skip to main content
Question

Typography variables: Component based

ignacio.turon

I am trying to wrap my head around on how to add typography variables to different breakpoints so that components are linked to a screen-size variable.

I have only seen videos of one size fits all typography variables, ie:

  • Headline will always be used as 46px for Desktop and 12px for Mobile.

But, what happens if there are different values for XL, L, M and S breakpoints and it depends in each and every component? ie: a blog page can have Headline 46px on XL but an embedded inline banner can have a Headline 12px for the same XL breakpoint.

Thank you for your time!

This topic has been closed for comments

Pavel_Kiselev

Each variable can have multiple values, they are called “modes”. So you have your basic scale, like small, medium, large etc. You can add another dimension with modes, like Desktop, Mobile and so on. This way you can say, on the desktop small=10px and for mobile you can set small=12px. Once you link those variables to text styles you will be able to switch the typography scale in your designs

ignacio.turon

Thank you for your reply, but I am still quite confused.

I can wrap my head around colours and desktop sizes but typography variables for each component is challenging.

So just to make it clear, if I have the text style Heading (H1) of the following sizes:

  • 12 px
  • 16 px
  • 20 px
  • 24 px
  • 32 px
  • 40 px
  • 48 px
  • 64 px

For component “Blog” the Heading would be for each breakpoint:

  • XL Breakpoint: H1 64px
  • L Breakpoint: H1 48px
  • M Breakpoint: H1 32px
  • S Breakpoint: H1 12px

For another component “Inline Banner”, the Heading size would be different for each breakpoint:

  • XL Breakpoint: H1 20px
  • L Breakpoint: H1 20px
  • M Breakpoint: H1 12px
  • S Breakpoint: H1 12px

What would be the best practice for responsive typography variables for each component? Since I cannot state that XL H1 will always be a certain size… And then, how should I apply those variables to the Font Styles without creating new Font Styles for each component? Maybe it is not possible…

Thanks again for your help!!

Pavel_Kiselev

Oh, you got me puzzled mate. You have a single H1 that varying in size a lot. I’d use some sort of the system with multiple different styles, something like

  • Large Title
  • Title 1
  • Title 2
  • Title 3
  • Headline
  • Body
  • Call-out
  • Subhead
  • Footnote
  • Caption 1
  • Caption 2

And have multiple modes for each set, like compact, medium, large etc. This way you can say that this frame uses compact type scale because it’s inline banner. This frame to use medium because this is mobile, and that frame use large as it comes in desktop

Apple Developer Documentation

It feels like you are over complicating your typography system, is it a system at all?

ignacio.turon
1 person likes this
  • ignacio.turon
    ignacio.turon
ignacio.turon

😅 Yes it is, I will review the typography styles first then… Thank you for the help!

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings