Milligram: isn't bold

Created on 28 Nov 2016 · 23Comments · Source: milligram/milligram

Wow, I just realized that  doesn't get bold by default. In fact it doesn't seem to have any style.

I'm about to give up on Milligram for a "reasonable defaults out of the box" CSS library. I welcome recommendations for something else.

Take for example the following HTML5 file:

<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>Milligram Strong Bug</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/milligram.min.css">
</head>

<body>
    <p>This paragraph should have <strong>strong</strong> text.</p>
    <p>This paragraph should have <b>bold</b> text.</p>
</body>

</html>

Obviously, substitute your own paths for your local Normalize and Milligram copies. (I didn't see any CDN URLs for Milligram or I would have used them in this example.)

Now open it up in Chrome or Firefox (the two browsers I tested this in). You'll see that there is no bold text. There should be.

The cause? This gets interesting. It looks like normalize.css is setting the font-weight to bolder. But it doesn't show up. Changing this to bold makes the bold show up.

The problem seems to be that the Roboto font doesn't support varying degrees of bold.

(At first I said to see http://stackoverflow.com/q/39405766/421049 , but that reference looks unrelated --- although that is a different different issue that presents a problem.)

normalize.css is technically correct in that semantically the value bolder is better in this case. See https://www.w3.org/Bugs/Public/show_bug.cgi?id=12154

However because Milligram _knows_ that it is using a font that doesn't support varying degrees of bolder, I think that you must override normalize.css and use bold unless you have a better idea. Otherwise if the font does not show up in bold this is a Milligram --- even if you claim that it's Roboto's fault (and it may be).

That's my opinion at the moment until presented with a better explanation. 😄

Hacktoberfest awaiting reply help wanted

Source

garretwilson

All 23 comments

Hi @garretwilson

You need to report something so I can analyze this problem that is happening to you. Check the documentation, it can guide you to pass the necessary information.

I'm waiting for you

cjpatoilo on 30 Nov 2016

You need to report something...

Um, I thought I just did.  doesn't have any style by default.

garretwilson on 30 Nov 2016

I'll update the description if it isn't clear. But... I think it is clear.

garretwilson on 30 Nov 2016

@garretwilson Sorry, maybe I was not clear for you. You can use our Issue Template for this.

cjpatoilo on 30 Nov 2016

I've updated the description. You should have everything you need now.

garretwilson on 30 Nov 2016

@garretwilson you dont need a CDN link!! all you need is a link to css file!! So, anyway here it is
https://raw.githubusercontent.com/milligram/milligram/master/dist/milligram.css.

Who said roboto dosent have bold, bolder font-weights?

https://fonts.google.com/specimen/Roboto?selection.family=Roboto:400,400i,500,500i,700,700i,900,900i

And it does work on milligram webpage

screen shot 2016-12-01 at 16 21 55

sudheerDev on 1 Dec 2016

Hey @garretwilson @sudheerDev I fixed this issue. Basically it was a change in the normalize that broke the Milligram. Thank you very much for your attention.

For now I'll close this issue. Feel free to reopen this issue if this doesn't do the trick for you.

cjpatoilo on 1 Dec 2016

Who said roboto dosent have bold, bolder font-weights?
https://fonts.google.com/specimen/Roboto?selection.family=Roboto:400,400i,500,500i,700,700i,900,900i

I was making a best guess about the problem. If Roboto supports varying degrees of bold, that's great. But it looks like @cjpatoilo's solution was to simply overrides  to make it bold instead of bolder.

So @sudheerDev , if Roboto supports bolder, maybe you could explain to us why it isn't working in the example I provided, and what @cjpatoilo can do to make bolder work instead of changing it to bold.

garretwilson on 1 Dec 2016

@garretwilson here is a fiddle with the described scenario.

I commented the lines @cjpatoilo recently added i.e adding bold lines- 528-531. you can still that the font-weight for strong and b is different from the normal text.

problem from what i see is that it is not that bolder and the reason being

  body {
    color: #606c76;
    font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size: 1.6em;
    font-weight: 300;
    letter-spacing: .01em;
    line-height: 1.6;
 }

remove font-weight:300 from body declaration and see. You would notice the difference and see that bolder property working fine. The effect of having font-weight declared on body will be different for different fonts.

sudheerDev on 1 Dec 2016

This is very interesting and I hope to learn something from it. Thanks for the explanation, @sudheerDev . So you're saying that by declaring a font-weight on the <body> (this is part of normalize.css?), somehow it makes bolder stop working for Roboto? That's very good to know, but I'm still not sure _why_.

Should I file a Stack Overflow question to get more details? It seems like the problem goes deeper than Milligram. Wherever the problem lies, the normalize.css and/or Roboto might need/want to know about it.

garretwilson on 1 Dec 2016

@garretwilson Let me see if i can shed more light on this. If its not that clear feel free to post a question on stack overflow.

normal
 Normal font weight. Same as 400.
bold
 Bold font weight. Same as 700.
lighter
 One font weight lighter than the parent element (among the available weights of the font).
bolder
 One font weight darker than the parent element (among the available weights of the font).

If you have font-weight: 300 set on body. Then bolder will be 400 because bolder is relative to the inherited font-weight i.e 300.

Where as bold is absolute to 700 so you have that applied seeing a really bolder version of the font and that is the fix that @cjpatoilo added today commit

Normalize.css adds bolder because it respects your font-weight and adding just 100 weight to it. changing that with milligram is slighly questionable by using bold.

Milligram by default keeps your body font-weight low so if you like having a lighter font-weight use the default or just override in your codebase with

 body {
   font-weight: normal;
 }

sudheerDev on 1 Dec 2016

👍1

If you have font-weight: 300 set on body. Then bolder will be 400 because bolder is relative to the inherited font-weight i.e 300.

Yeah, I got that, and it makes perfect sense. But I guess what is confusing me is: shouldn't it still appear "bolder", because 400 is a higher weight than 300? Is the problem that Roboto doesn't support 400 vs 300, or is the problem that my monitor can't show the difference, or is the problem that my eyes can't see the difference?

garretwilson on 1 Dec 2016

screen shot 2016-12-01 at 23 40 48

check the image above. I do see a difference in weights.

sudheerDev on 1 Dec 2016

milligram-strong-bug

This is very odd. Look at my screen shot in Chrome (even magnified using the Magnifier in Windows 10). I see no difference at all.

Could it be something to do with how you are including the Roboto font? What link are you using, with which URL query parameters?

garretwilson on 1 Dec 2016

Thats odd!. https://jsfiddle.net/1240obpk/4/ updated link for fiddle with all the font-weights.

https://fonts.google.com/specimen/Roboto?selection.family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i

earlier is used - https://fonts.google.com/specimen/Roboto?selection.family=Roboto:400,400i,500,500i,700,700i,900,900i

Yes if you don't have a font-weight 400 i.e bolder font based on body font-weight it will fallback to 300 so u see the same weight as body text

sudheerDev on 1 Dec 2016

That is very odd indeed. I tried the Roboto link you gave and it makes no difference for me. I still have no difference in font weight. I thought maybe the old Roboto was being cached (from the link I used from the Milligram web site instructions), so I brought up @sudheerDev's jsfiddle page above in Microsoft Edge --- but I don't see any difference there either. I'm perplexed.

garretwilson on 1 Dec 2016

OK _now_ we're getting somewhere, and this is starting to make sense.

First of all, @sudheerDev , when I asked for the link you are using, I meant the link to the font's CSS to use in your HTML file, but you gave me the link to the font's _web page_. On that web page you have to generate a link to use as a stylesheet; it gives me https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i and you use it like this:

<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

When I use _that_, then yes, I see the difference between a weight of 300 and 400!! It's not a big difference, but it's exactly what I would expect.

When I encountered the problem, I was following the instruction on the Milligram "Getting Started" page https://milligram.github.io/#getting-started, which says to use this link:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">

@sudheerDev I recommend you try that link and you'll likely see the same results I was seeing. I need to research what the query parameters mean.

But in any case, the real problem seems to be the erroneous link on the Milligram web page. It doesn't bring in sufficient variations of the font to use with Milligram. The normalize.css setting of bolder was more correct.

@cjpatoilo , I _highly_ recommend that you undo your change to font-weight: bold, because turned out to be sort of a kludge covering up the real problem: I was using an incompatible link to the Roboto font. The _real_ fix for this issue is to update the Milligram web site to indicate a compatible link to the Roboto font. Make sense?

garretwilson on 1 Dec 2016

Hey @garretwilson @sudheerDev

If you're thinking of just using Roboto for every project, yes, it makes sense. But there are other projects that do not make use of Roboto as main font family. Other font families does not have the same support that this family provides. Also do not forget perf. It will be slower than currently if we add more font weights.

Anyway, it's a great discussion. It pays to make more tests to make the best decision about this change.

cjpatoilo on 1 Dec 2016

But there are other projects that do not make use of Roboto as main font family.

_Note: I reread your comment and now I understand better what you're saying._

I don't have the data to know if other fonts support bolder. I don't know what "perf" is. But I think it's a shame to force bold and break the elegance of normalize.css.

garretwilson on 2 Dec 2016

First of all, let me begin by saying I love milligram, its simplicity and design, bar some minor flaws, are spot-on.
Great job @cjpatoilo

I don't know what "perf"

Performance.

I think the 'right' solution would be to have body with font-weight: 400, i.e. not overriding the default font-weight.

That will:

Make bolder, lighter font properties function correctly
Provide better typography. Light fonts are an eye strain, and lack readability. (see comparison below)

light
regular

chmln on 14 Dec 2016

Worth consulting this table on MDN - a default font-weight:400 greatly changes the behavior of bolder and lighter:

screen shot 2016-12-14 at 1 52 55 pm

In addition, a font-weight setting of 300 has a very different fallback behavior than font-weight 400 if the user does not have the 300-weight font downloaded/available:

screen shot 2016-12-14 at 1 56 23 pm

In short, for 300 weight, bolder is 400 and lighter is 100. If the font selected does not have 300-weight downloaded/available, the browser will try one step lighter - 200, and so on, until it finds a weight the user has available.

For 400 weight, bolder is 700 and lighter is 100. If the font selected does not have a 400 weight font available (unlikely, because 400 is "normal"), the browser will try weight 500.

As I think has been adequately discussed above, unlike a straight-up font-weight declaration, bolder and lighter will not attempt to fallback to a different weight if the required weight is not available.

Many fonts don't have a 300 weight defined, which means Milligram can interact poorly with those fonts because it may select a very inappropriately thin font if it is available (worst case would be a font with only 100 and 400 weights defined). Of course, this can also be caused by the webpage not downloading all the correct widths of the font (Google Fonts, etc).

I understand that Milligram is trying to make a stylistic choice by making the default font a "thin" weight, but it may be causing more problems than is worth it.