search

markboulton / specimen-builder

Apache License 2.0
88 stars 14 forks source link

Faux bold in all headings (Firefox) #31

Open charakterziffer opened 3 years ago

charakterziffer commented 3 years ago

At least on the demopage https://typespecimens.xyz/builder/demo/ some text examples are bolded by the Firefox browser. For all headlines at least this browser automatically chooses the bold weight of a font – or renders them bolder. As the font name on top and also the second text example are formatted as h2/h1 the Firefox browser makes the regular font artificially bold. This could be prevented when these headlines have font-weight: normal in CSS.

RoelN commented 3 years ago

Good catch, thanks for reporting!

This is indeed caused by the default style being bold for h1 and h2, while the fonts are all mapped to font-weight: normal. I think the quickest and cleanest fix is doing a short reset on all elements, e.g.

* {
    font-weight: normal;
}

@markboulton I will have time next week, or the week after, to implement this in Specimen Skeleton. If you want to quick-fix it yourself you can try if the suggestion above works?

charakterziffer commented 3 years ago

Hej Roel, to keep the option for bold text on the site you could limit the normal weight to all sub elements of the specimen font, e.g. .stix-two-text, .stix-two-text > * { font-weight: normal; font-style: normal; } (I also added the font-style to prevent faux italics).