Staff replied Helix Framework

Do font sizes in Helix become a root element

Asked by Karen Dunne 4 years ago Last activity 4 years ago

The font size settings in Helix offer px, em, rem and %. https://monosnap.com/file/IQ0CX5GLCrHQPZytxL7De4efHWf4kw

When the font is set within Helix, does that become the root?

I'm trying to determine the best way to set the size so that I have the least amount of work with adjusting for various screen sizes, e.g. media queries. I need a starting point, which I think should be pixels. Should the tablet and mobile views be in ems? I mean, if Helix settings become the root, than rem, em or % shouldn't be a starting point because they have nothing to relate their size to, right?

What advice can you offer to make the most of the settings in Helix. Most important to know right now is whether the font size set in Helix becomes the root setting.

Thanks,

Karen

3 replies

Paul Frankowski Senior Staff

4 years ago · edited

Hi Karen,

yes, in general for "Body" means for whole site.... but do not forget that Helix uses also Bootstrap 5 framework that also have default font sizes for headers etc.

Few days back I talked about that same topic with different (forum) user and if you define all styles (font-sizes) in template it should work everywhere, but custom CSS also may be needed for Mobile view, example:

@media (max-with: 680px) {
body, p, span, li, strong {font-size: 16px;}
H1 {font-size: 36px;}
}

Easy.

Karen Dunne Asked this

4 years ago · edited

Thanks, Paul.

Now I think I understand what Helix is doing when it offers options to set font sizes in px, em, rem and percentage.

When you said that Helix uses Bootstrap 5, I realized that because Bootstrap 5 uses a default font-size 16px by default, then 16px becomes the root size. So no other size can be the root, such as assigning the H1 desktop size to 48 pixels. Right?

I had been under the impression that if I set a pixel size for an H1 tag in Helix in the desktop view, then that number would become the root number for the H1 tag. That might sound silly but it was how I was looking at settings Helix was offering.

But, what is the parent for an em setting in Helix?

Paul Frankowski Senior Staff

4 years ago · edited

About headers (H1-h6) in your webdeveloper tool check bottom right section "Styles", it should display from where H1 font-size is taken. It will tell you more.

But as I remember in Helix Ultimate 2.0.x, H1-H6 font-sizes by default are taken from Bootstrap 5 css styles where are predefined, for example,

@media (min-width: 1200px) {
.h1, h1 { font-size: 2.5rem;}
.h2, h2 { font-size: 2rem; }
.h3, h3 {font-size: 1.75rem;}
}

that's why they have to be overrriden.