On the placeholder page for drasty.com the text of the main header is somehow doubled — but only on Mobile Safari. If you visit the page with any other browser, you won’t see this effect.
I’m not employing any CSS trickery or otherwise deliberately doubling the text. Thoughts?
I think what you’re seeing is the bold weight being synthesized by the browser. The problem goes away if you add a "font-weight: normal;" rule. Does this font come with a bold weigth? Did you add it to your kit on TypeKit?
Wow. Thanks, Thijs! font-weight: normal; did the trick.
Herb does have a bold weight, but I had excluded it from the kit. The effect is pretty wacky here. I might reproduce it using :after at some point, but it’ll be nice to have control over the effect.
5 Responses
Pro
Erik Vorhes
On the placeholder page for drasty.com the text of the main header is somehow doubled — but only on Mobile Safari. If you visit the page with any other browser, you won’t see this effect.
I’m not employing any CSS trickery or otherwise deliberately doubling the text. Thoughts?
about 1 year ago
Pro
Thijs van der Vossen
I think what you’re seeing is the bold weight being synthesized by the browser. The problem goes away if you add a "font-weight: normal;" rule. Does this font come with a bold weigth? Did you add it to your kit on TypeKit?
about 1 year ago
Pro
Tim Brown
Awesome debugging, Thijs. I think you're right.
about 1 year ago
Pro
Thijs van der Vossen
Thanks Tim. :)
about 1 year ago
Pro
Erik Vorhes
Wow. Thanks, Thijs!
font-weight: normal;did the trick.Herb does have a bold weight, but I had excluded it from the kit. The effect is pretty wacky here. I might reproduce it using
:afterat some point, but it’ll be nice to have control over the effect.about 1 year ago