Choosing Default Text Size for Relume & Webflow Projects | Relume Community

Choosing Default Text Size for Relume & Webflow Projects

Hello again Relume! It’s been a while that I’ve had a Relume > Webflow project and boy, did I get rusty. Nevertheless, here’s my issue: I’d like to use 18px as the default text size for the paragraph elements in a Webflow site. Is it better to change the size of all of the Relume text styles so that I end up with the “Text Regular” style at 18px? Or is it better to just use the “Text Medium” style as the default paragraph element style? The second option is definitely much easier but I wonder how that will affect the site in the future when new Relume components are added and styles start to conflict.

7 comments

Matt J.
·
·
Cesar yeah the second option could be easier, but the first option ensures that all components across all pages will be consistent - even new ones that are imported. Which feels like the better way to go in my opinion!
Cesar
·
·
Matt J. Thanks for your help! Is there an automated way to change all the text in Webflow that you can think of? Like Batch Styler for Webflow?
Matt J.
·
·
Oops I meant the first option. Changing the value of an existing class is the correct way - even according to client-first documentation. Second option wouldn’t be easily done, if at all.
Matt J.
·
·
the reason the second option is not possible is because when you import a new component, you are importing it from a pre-made component that we have already built using those classes. So swapping the class is not possible. But since we have class sync, we can sync the values of a class. Hope that makes sense.
Cesar
·
·
I think I’m following Matt J.. What you suggest is that if I want my default text size to be 18px, I need to change the size of Relume’s default text-size-regular style to 18px or 1.125rem (from 16px/1rem). Then go and update all of the other Relume text styles (tiny, small, medium, large, etc.) to new sizes based on proportional variations to the new 18px default text size. Then apply text-size-regular to Webflow’s default All Paragraphs tag.
Matt J.
·
·
Yeah, to me that creates the most consistency throughout the lifecycle of a project - 3 months from now, it won't be a shock to be like "oh what the heck is going on here?". It'll be all relative to the project. The only tweak I would make to what you said is that you're not going to want to add a class to all paragraphs. I would just simply change the font size value of All Paragraphs to be what you want it to be. If thats 18px, great. The reason we went down this path though is that a good majority of paragraphs that are used in components do have a class attached - and it looks like the most common is text-size-medium - so you may want that one to be 18px, and then regular, small, tiny, would be relative to that and so on.
👍1
Cesar
·
·
Ah, that’s very helpful research. If the majority of Relume components use text-size-medium for paragraphs then I’m all set without having to change a thing. Thanks for your help Matt!