Responsive saved typography

Ask us anything How do I?
1

I’m setting up my typography elements to use throughout my site to be consistent. How do I set my H1 (for example) to have different settings at different breakpoints and save it? I’m only able to figure out to save it for 1 breakpoint. But then I can’t use the saved element because it won’t look good at all sizes. Not a big deal for body copy. But I def need to step down the size for an h1 at different breakpoints.

2

Hi,
for the moment typography is just a way to save a bunch of properties under a reusable name.
For the moment they do not support different breakpoint, so you should have different typo, and apply same on the different breakpoint on a element.
I think you have a point, and i have send this to the product team.
In the meantime, what i could advice you is to create component in your UIKit, so that you do not have to redo all of this often.

Example:

  • Drag and drop a text
  • Put the correct typography for each point
  • Add them to the UI Kit with name “Title” (for example)
    image
  • Next time you need a title, drag and drop it from your project UI Kit, and not from Weweb UiKit
    image
    image1028×1156 45.9 KB
1 Like
3

Thanks for clarifying that I can’t yet set the responsive details and save them.

I don’t want to set up all my elements to be wrong from the beginning so I won’t use components yet. I’ll keep an eye out though for when these saved components do have responsive options.