Best way to adjust font sizes?

[mchelen]

Hi, I'd like to increase the font sizes for most of the content. I tried increasing the font-size in the body element, but it seems like many child elements such as <p>, li, <blockquote> and others have their font-size set explicitly in _site.scss.
What would be the recommended way to increase these font sizes? Do I need to adjust each one in _site.scss?
I tried editing $doc-font-size in _variables.scss but the results were not what I expected.
Any tips would be appreciated, thank you.

[mmistakes]

Depends on if you want to change all font sizes globally or not. If you just want to make them all larger or smaller then you can try declaring a font-size on the body element in percentages.

For example to make all type 5% larger you'd do something like body { font-size: 105%; } and to make them all 5% smaller `body { font-size: 95%; }.

If you want to change specific elements then you'll need to change the size on them each. The $doc-font-size variable is really only used to calculate the font-size in rem's as part of a Sass mixin. I'm using that for browsers that support rem's and then a px font-size as a fallback.

[mchelen]

I tried using body { font-size: 105%; } and larger percentages, but it didn't seem to have an affect on the fonts. The only thing that happened was the entry-wrapper div took up more space horizontally. I used Firebug to confirm the font-size style was being applied, and saw no change in the font size itself when toggling the style on and off.
It could be some issue with my system, but I tried in a few different browsers and had the same result. For reference, I tested using font-size: 200%; in the body {} section of _layout.scss.

[mmistakes]

I'd suggest changing each element individually then. The font-size mixin
should make it fairly trivial to update to whatever sizes you want.

On Monday, September 29, 2014, Mike Chelen [email protected] wrote:

I tried using body { font-size: 105%; } and larger percentages, but it
didn't seem to have an affect on the fonts. The only thing that happened
was the entry-wrapper div took up more space horizontally. I used Firebug
to confirm the font-size style was being applied, and saw no change in
the font size itself when toggling the style on and off.
It could be some issue with my system, but I tried in a few different
browsers and had the same result. For reference, I tested using font-size:
200%; in the body {} section of _layout.scss.

—
Reply to this email directly or view it on GitHub
#95 (comment)
.

[mchelen]

Ok thanks, I might try making some variables like $font-small $font-medium $font-large to use in places like p and blockquote instead of hardcoded sizes, if that would be helpful for other users I could submit it as a PR.

[mmistakes]

Personally that's a bit oversimplified for my taste. I don't think I've ever seen typography handled like that. We're really only talking about a handful of elements that have their sizes defined as part of a typographic scale. Replacing them with a few variables really doesn't gain much I don't think.

[mchelen]

Ok, that makes sense. If I think of any better way to handle it, I'll submit a PR.