search

thoughtbot / bitters

Add a dash of pre-defined style to your Bourbon.
https://thoughtbot.com
MIT License
1.39k stars 142 forks source link

Small numbers with font-feature-settings #130

Closed microcipcip closed 9 years ago

microcipcip commented 9 years ago

This mixin is making numbers very small (about half of the regular font size): @include font-feature-settings("kern", "liga", "frac", "pnum"); After that I removed that line, they were looking fine again. What's the purpose of that mixin?

elomatreb commented 9 years ago

There is an excellent reference page for font-feature-settings in the MDN. Basically, you tell the type renderer of your browser to enable (or disable) certain optional features of the font you are using.

The property causing your problem is probably either frac (Display fractions like 3/4 as a single glyph) or pnum (Make all numbers appear tabular). Normally, these should not cause problems, so this seems to be a problem of the font you are using. Try removing these one by one and see if it will go away.

whmii commented 9 years ago

Actually pnum makes numbers proportional, so the horizontal space they take up varies depending on the number (so a 1 is thinner than a 8). This is the default 99.9% of the time anyways. Since it really only effecting the width of the letters, It's unlikely that this is the culprit.

I agree with @elomatreb that it is probably an issue with the frac opentype settings in the typeface you are using. Just to try it out, I would try switching typefaces to see if the issue continues. Using the following configuration will deactivate the liga settings:

@include font-feature-settings("kern", "liga", "frac" 0, "pnum");
microcipcip commented 9 years ago

I tried Arial and it kept the numbers small. If I am the only one experiencing this issue, I suppose it may be a conflict with something else in my SASS setup. Next week I'll try to disable most of my SASS includes and see if the issue goes away.

microcipcip commented 9 years ago

I can confirm I can fix the issue with @include font-feature-settings("kern", "liga", "frac" 0, "pnum"), however, I see the small numbers (even from a different PC) with the standard values and a standard font (Arial). I use Win8 and the issue is visible in any modern browser.

abartlett57 commented 9 years ago

I ran across this issue on a project this week. It is related to "frac" and affects all numbers in all fonts (that support it)....BUT, it's only Windows8 specific. All browsers on any other system work fine, but all browsers on Win8 are affected. Just an FYI.

tysongach commented 9 years ago

We removed frac from font-feature-settings in Bitters 1.0.0. You can carry over this small change to your project to fix this issue.