New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Jekyll's default font-weight of 300 causes bold/strong text to be indistinguishable from regular text on IE11 and Firefox #4042
Comments
Maybe we should use normalize.css which does do that. /cc @jekyll/core |
Not a huge fan of the idea of further bloating this site template with something like normalize.css if we can get around it. If we can't, then ok. How much does it weigh? |
If a One approach for this would be introducing Sass variables like |
Could we use the relative values, like Browsers are the worst, aren't they? 😉 |
The issue here is that we would be doing some unnecessary guesswork then. We could use So it's possible, but it's not as straightforward as with numeric values. |
There is no guesswork to bolder, as long as there is a gap the spec states that bolder is relative to the inherited font-weight. If you set the default font-weight to 900 and leave no gap, that's not guesswork, that's bad design on your part (this is theory -- not fact.) That said, we aren't doing that so there is no problem. We should be using |
So after doing a bit of reading, it seems to me that there isn't a solution using |
@alfredxing I guess you are right, I just read the I also just double checked that some how I got the spec wrong but in Chrome if I set the |
Well... I guess that is unless somehow there is some information missing, like that's how it treats some system fonts which might not have that many weights so it's still working like that. Then it's understandable but should (if it already hasn't?) change. |
The best solution at this point (if we aren't considering using a webfont—see #3921) might be to just use 400 as the default font weight. |
@alfredxing Have time for a PR? |
Is there a workaround for people using Jekyll <3.x ? |
@stragu A late reply, but I recently came across this very annoying bug myself and this is how I fixed it. |
thank you, @alexconst ! |
Specs:
By "default", I mean the CSS used by the site when you run
jekyll new
The issue is that the default browser stylesheet in IE11, Firefox 41, Palemoon 25 (probably other versions too but these are the ones I have) defines the
font-weight
property ofb
andstrong
asbolder
. So if the inherited font-weight is 300, that meansb
andstrong
will have a font-weight of 400. (c.f. "Meaning of relative weights"). Fonts like Arial doesn't show any visual difference between font-weights 300 and 400.If inherited font-weight is 400, then
bolder
would be 700.Chrome is unaffected because its default stylesheet defines
b
andstrong
withfont-weight: bold
.I think there are 2 approaches to resolve this issue
font-weight: bold
forb
andstrong
in _base.scssThe text was updated successfully, but these errors were encountered: