Italic and bold


Is it just me or is it really hard to see emphasis here?
Italic and bold and even both are very subtle.


I don’t find a problem with it when viewing via desktop, but I agree with you when viewing it via mobile.

What platform are you using?


I have the same problem, particularly with italics. This is on firefox/NixOS/laptop.


I wonder if this is related to the font format issues @iko was dealing with a while back? IIRC the outcome was something like, “If it’s good enough, wait for an upstream fix.”


@sandra.snan it’s not just you. I agree that it’s overly subtle. I find it super subtle even on desktop.

@smichel17 I don’t think this is related to font format issues, as bold and italic definitely are showing, they are just extra subtle.


I adjusted the fonts and they look better to me. We had bold as “semibold” and italic just normal. I changed to using light-italic for italic and regular-strength bold for bold and bold-italic.

Clearly better to me. Good enough?

Although it would require uploading more font-files, we could easily move even to extra-light-italic and to extra-bold for the bold-italic combo (or other uses of extra- to maximize clarity). Other than those options, we’d need to change fonts for stronger contrast.


Bold looks good to me. Italic is still a bit subtle; it might be worth switching to extra-light, depending on how much work it is. I would not make bold any stronger, except to preserve the current strength for bold-italic, If extra-light-italic makes the bold too subtle.


There’s no interaction between italic and bold-italic, they are separate font files, each with different strength options.

I think all that’s needed to get the extra- options are to download the font files (tt, woff, woff2), upload them to Discourse, and then use them… all in the admin UI.


Got’cha. I think bold-italic is sufficiently bold, but could stand to be slightly more differentiated from regular bold (same feeling as regular italic vs regular).


Where can I look at the CSS? Italic is clearly using the wrong weight.


@mray Can you view this page? It’s not all of the css (just our custom css), but I think it has the font-related bits. If not, I can give you admin access to view it.


Sorry for the confusion. The initial complaint here didn’t have a screenshot. It was posted about italic being too subtle when it was the same weight as regular text.

What you see now is the lighter-italic that we changed specifically to address this problem. While it’s not ideal, the problem is solved in terms of the difference being visible.

So, if we reverted the italic to the default weight with no other changes, the problem would return. But of course, the solution of lightening the italic (which is what you see now) is a workaround. If you want to do a different solution, it’s up to you. But if you are okay with it as is, the core problem is solved enough with the workaround, and this can be considered solved/closed.


Oh, wow! It seems like you didn’t restrict this to the < em > element but applied that change to all italics in normal weight - how did you do that? Did you replace the font-file itself? o_0

I’m not at all in favor of this particular workaround and would like to change it. em Italics are supposed to put emphasis on text without changing the weight. That is what bold is for.


OK I noticed that the mixins that applied the lighter weight to the normal italics.
To fix the issue I added some extra skewing to the em elements like that:



Thanks! First I’ve heard of that CSS skew option. Glad you could fix this better. So, I marked your update the new “solution”, should we “close” this issue (that blocks further discussion and marks it “closed”)?



The skew option, as currently applied, seems to have a side-effect where it also applies to the entire paragraph if a paragraph is italicized, causing text to get cut off at line breaks, like this:



Reverted the change. Skewing can’t be applied to lines separately as far as I know. :confused:


I suppose the real solution is to modify the font files themselves so the italics are more noticeable. For now, just stick with the lighter font?