Dawn Theme - change font size without code?

Solved
RC7
Excursionist
18 1 2

Ok, thanks a lot

0 Likes
made4Uo
Trailblazer
269 10 62

Hi @optostar,

You can change the font-size in the base.css. This is at the Asset folder, under the base.css. Find the code .h1, h1 { } or .h2, h2 {} or what ever code you want to edit with a font-size. You can reduce size of the font by reducing the rem.

NOTE: Dawn Theme uses rem, instead of pixels. It means it relies to the root font size, which is in the theme.liquid file, under the Layout folder. The main root of the font sizes came from html, which has a font size in percentage.

Code in the html look like this. 


html {
box-sizing: border-box;
font-size: 62.5%;
height: 100%;
}

The font-size: 62.5% is equal to 10px. Therefore, the 1rem is equal to 10px. Let me know if that helps

 

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
RC7
Excursionist
18 1 2

This is an accepted solution.

Hi @made4Uo 

Do you think it's better to change the rem instead of the overall percentage of the font size and make it higher than 62.5%?

Another thing I notice with dawn is that even with the same size and font family the font appears to be lighter. Do you know where I could change the font weight? 

0 Likes
made4Uo
Trailblazer
269 10 62

Yes. I would recommend changing the rem instead the percentage. The percentage is the root font size. If the root changes all of the elements that relies on to will change too. What I mean is all the element that uses rem will get adjusted. Targeting the specific element would be a best thing to do.

If you go to your layout folder and open the theme.lquid, you will see the code below. I believed currently, Dawn only have one font-weight, and that is bold. Unless you end up downloading your own fonts. To change your font-weight, you just have to target them and add font-weight: bold

{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
RC7
Excursionist
18 1 2

Thanks a lot. 

Makes sense about the rem/root font size.

About the font weight, I can actually pick between regular, semi-bold, bold etc directly in the customizer, but what I mean is that Dawn's regular version of Muli (the font I'm using) for example is way thinner than on the Debut theme, so I assumed there must be some kind of code there defining in a number how thin a regular font will be or something like that. 


Are you aware of anything like that?

0 Likes
made4Uo
Trailblazer
269 10 62

@RC7 sorry. I am not aware about that. Do you think it is because most of the elements in Dawn are much bigger than the other theme? Or Debut theme perhaps?

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
RC7
Excursionist
18 1 2

No worries and thanks for trying to help.

No no, it's really just the font itself. It's not an optical illusion based on the other elements.

0 Likes
husainm
New Member
1 0 0

it worked! amazing thank you 

0 Likes
gracefuldz
New Member
3 0 0

Hello, 

Hope it's okay to tack on another question. 

How can I increase the body <p> font size in base.liquid?

This is what I see... but no body reference:

 

}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.06rem;
  color: rgb(var(--color-foreground));
  line-height: 1.3;
}
0 Likes
made4Uo
Trailblazer
269 10 62

@gracefuldz HI,

I do not think the <p> uses header sizes. 

Can you see if you have a code below?

p {

font-size: ####

}

 

What theme are you using?

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes