Menu icon Foundation
Custom font sizing

I am relativeley new to foundation. So far, I really like the aproach and the well coded foundation.css. It is easy and fast to get nice results.
As I am a typography maniac, I need to alternate the font sizes to my likes. I am keen about setting up a baseline grid and such. But here, I am running into some difficulties.
I d like to set the html to "font-size: 62.5%;" then i could adjust my following font-sizes easily in rem: font-size: 14px; font-size: 1.4rem;
I am sure you can follow me here, it is easy to have the 62.5% in the html to not deal with complicated rem-sizes like 1.6875rem ....
The thing is, by changing the html font-size it messes up the whole foundation-layout.

What would you suggest? What is the best technique to change font-sizes, and line-heights? I assume to use simple px is not up-to-date?

Thanks for thoughts, and ideas.

Cheers
Stephan

html { font-size: 62.5%; } 

body {
  font-size: 14px; font-size: 1.4rem; /* =14px */
}

h1 {
  font-size: 28px; font-size: 2.8rem; /* =28px */
  line-height: 1.4em;
}

...

font-sizeremcss

I am relativeley new to foundation. So far, I really like the aproach and the well coded foundation.css. It is easy and fast to get nice results.
As I am a typography maniac, I need to alternate the font sizes to my likes. I am keen about setting up a baseline grid and such. But here, I am running into some difficulties.
I d like to set the html to "font-size: 62.5%;" then i could adjust my following font-sizes easily in rem: font-size: 14px; font-size: 1.4rem;
I am sure you can follow me here, it is easy to have the 62.5% in the html to not deal with complicated rem-sizes like 1.6875rem ....
The thing is, by changing the html font-size it messes up the whole foundation-layout.

What would you suggest? What is the best technique to change font-sizes, and line-heights? I assume to use simple px is not up-to-date?

Thanks for thoughts, and ideas.

Cheers
Stephan

html { font-size: 62.5%; } 

body {
  font-size: 14px; font-size: 1.4rem; /* =14px */
}

h1 {
  font-size: 28px; font-size: 2.8rem; /* =28px */
  line-height: 1.4em;
}

...
Brett Flroa over 5 years ago

Yo Stephan,

I am assuming you're making a responsive website. With that in mind, why don't you set the font sizes on mobile and use media queries to adjust sizing?

Check out the code I've got:
SCSS
@media #{$small-up} {
h1 { font-size: $h1-font-size; }
h2 { font-size: $h2-font-size; }
h3 { font-size: $h3-font-size; }
h4 { font-size: $h4-font-size; }
h5 { font-size: $h5-font-size*1.25; }
h6 { font-size: $h6-font-size*1.25; }
p { font-size: $paragraph-font-size; }
label { font-size: $paragraph-font-size*0.9; }
}
@media #{$medium-up} {
h1 { font-size: $h1-font-size*1.25; }
h2 { font-size: $h2-font-size*1.25; }
h3 { font-size: $h3-font-size*1.25; }
h4 { font-size: $h4-font-size*1.25; }
h5 { font-size: $h5-font-size*1.25; }
h6 { font-size: $h6-font-size*1.25; }
}
@media #{$large-up} {
h1 { font-size: $h1-font-size*1.55; }
h2 { font-size: $h2-font-size*1.55; }
h3 { font-size: $h3-font-size*1.55; }
h4 { font-size: $h4-font-size*1.55; }
h5 { font-size: $h5-font-size*1.55; }
h6 { font-size: $h6-font-size*1.55; }
p { font-size: $paragraph-font-size+rem-calc(2); }
label { font-size: $paragraph-font-size; }
}

I use the foundation variables as a font size base and modify with percentages. You could conceivably just add px or em values to the base also for more precision.

Stephan over 5 years ago

Thanks Brett,

well, I am on the (classic) css side. But I get what you mean. Seems very slick to me.

I am just running into weird layout-changes when I am setting:
CSS
html { font-size: 62.5%; }

So, if I am understanding it right - I ll just let html untouched and go for a px-only solution?

I could set my h1, h2 ... with true px ?
CSS
body {
font-size: 14px;
line-height: 20px;
}
h1 {
font-size: 28px;
line-height: 30px;
}

By using my css like this I could not use my beloved rem... Well. As long as it works?

Cheers
Stephan

Brett Flroa over 5 years ago

You can totally use rem!

https://bugsnag.com/blog/responsive-typography-with-rems

This blog post has a cool way of approaching it. Essentially, you define typographic relationships and use the html rem at diff media queries to control sizing.

Since you're using the CSS Foundation, this might be an easy override for your site. Give it a try!

Stephan over 5 years ago

Easy. I can do that. But here is the point: to use the rem sizes more easy and "readable", I d like to set

html { font-size: 62.5%; }.

By doing so, I can use rem in easy to read digits. like font-size: 1.4rem - that would be 14px. <---- super readable!
The problem is, by setting the html to 62.5%, I am making the whole Layout (widths and such) smaller!

Will Barker about 5 years ago

Did you ever get anywhere with this Stephan? I like what you are suggesting. Rem's are cool and everything, but very awkward to fit into a workflow.

  • Design software works in pixels
  • Conversion to rem's is a pain
  • if you use rem-calc it's easy, until the designer looks at the site & requests font size changes in rem's!
  • at that point delete the rem-calc and go full rem.
  • now you effectively have two unit systems in your sass. pixels (via rem-calc) and rem's where changes have occurred.

your method makes that a lot less painful.