Menu icon Foundation

My Posts

No Content

My Comments

Chris Aliipule commented on Lee Rowbotham's post over 5 years

I'm not using Rails and I have this issue. My top-bar text is thicker than I want it to be. I was really thrown off because it flies under Chrome Developer Tools' radar. This issue doesn't show up on the Foundation demos. I found the answer on Google.
https://groups.google.com/forum/#!topic/foundation-framework-/ytrW6fC-yAU

It was first noticed on Foundation 4.08. This bit of CSS can fix it:
CSS
body {-webkit-font-smoothing: antialiased;}

The purported settings are:
SASS
$header-text-rendering: optimizeLegibility;
$paragraph-text-rendering: optimizeLegibility;

That bit of SASS above outputs CSS like this:
CSS
p {
text-rendering: optimizeLegibility;
}

This shouldn't affect my top-bar because it's not a paragraph or heading element. I'm enabling antialiased fonts and moving on.

MORE READING
http://foundation.zurb.com/docs/components/typography.html
http://aestheticallyloyal.com/public/optimize-legibility/
https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering
http://css-tricks.com/forums/topic/text-rendering-optimizelegibility/#post-164817
http://stackoverflow.com/questions/7968795/is-it-safe-to-use-the-css-rule-text-rendering-optimizelegibility-on-all-text

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Lee Rowbotham's post over 5 years

I'm not using Rails and I have this issue. My top-bar text is thicker than I want it to be. I was really thrown off because it flies under Chrome Developer Tools' radar. This issue doesn't show up on the Foundation demos. I found the answer on Google.
https://groups.google.com/forum/#!topic/foundation-framework-/ytrW6fC-yAU

It was first noticed on Foundation 4.08. This bit of CSS can fix it:
CSS
body {-webkit-font-smoothing: antialiased;}

The purported settings are:
SASS
$header-text-rendering: optimizeLegibility;
$paragraph-text-rendering: optimizeLegibility;

That bit of SASS above outputs CSS like this:
CSS
p {
text-rendering: optimizeLegibility;
}

This shouldn't affect my top-bar because it's not a paragraph or heading element. I'm enabling antialiased fonts and moving on.

MORE READING
http://foundation.zurb.com/docs/components/typography.html
http://aestheticallyloyal.com/public/optimize-legibility/
https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering
http://css-tricks.com/forums/topic/text-rendering-optimizelegibility/#post-164817
http://stackoverflow.com/questions/7968795/is-it-safe-to-use-the-css-rule-text-rendering-optimizelegibility-on-all-text

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content