Fonts are too bold

[cole....@gmail.com]

The MathJax fonts seem to be quite bold next to regular text.  It also seems to be more bold in Firefox and IE than in Chrome (see attached image of Firefox vs. Chrome rendering).  I am using HTML-CSS output with the TeX web font.

Does anyone happen to know if there is a way of fixing this issue?  The way it appears in Chrome is acceptable to me, but the Firefox/IE rendering is just too heavy.

Thanks,
Cole

[Frédéric WANG]

When the size of the math does not match the size of the surrounding
text, MathJax tries to rescale the size of the math. This may lead to
math looking too bold. We plan to add an option in MathJax 2.3 to
disable that feature, but then the size of the math might look too small
with respect to the surrounding text. The result may depend on browsers,
default font etc

The ideal solution would be too use a text font with similar size as the
math font. For example in native MathML you can just do

math { font-family: inherit; }

The HTML-CSS / SVG can't handle arbitrary fonts but we plan to add more
choices in MathJax 2.3.

Le 17/10/2013 06:14, cole....@gmail.com a �crit :

> --
> You received this message because you are subscribed to the Google
> Groups "MathJax Users" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to mathjax-user...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.


--
Fr�d�ric Wang
maths-informatique-jeux.com/blog/frederic

[droo...@gmail.com]

I just started using MathJax (Thank you! It's great!) on my self-hosted WordPress blog. I am having the same problem, using the latest MathJax I assume.

See http://davidroodman.com/blog/2014/09/03/the-domestic-economic-impacts-of-immigration/, especially twoard the bottom. In-line equations do not quite look great. Perhaps the culprit is the attempt to match surrounding text size, as Frederic suggests. But I haven't figured out what to do about it.

I tried adding "styles: {"font-weight": 100}" to my MathJax.Hub.Config() call, but that did not make a difference. Nor did modifying the same attribute on the fly with Chrome's Inspect Element feature. 

Reducing the scale attribute in MathJax.Hub.Config() just makes the equations smaller, but no less bold-y. 

Is there anything else I can do? Thanks.

--David

[droo...@gmail.com]

Update: setting "matchFontHeight: false" in the HTML-CSS configuration has the same effect as changing the scale option: smaller but still bold-y.

[David Carlisle]

Your default sans font is quite light, you could use


mtextFontInherit: true


so that at least the mtext parts use the body font rather than the
mathjax default roman font.

[droo...@gmail.com]

Thank you, DavidC. Good point. I've just implemented that. Of course, it doesn't solve the main problem.

--David

[Peter Krautzberger]

Hi David,

Since you are using webfonts for your main text, you might want to try the MatchWebFonts extension, see http://docs.mathjax.org/en/latest/options/MatchWebFonts.html. However, as David Carlisle pointed out, if the fonts (opensans vs MathJax fonts / STIX fonts) are simply very different in design, then matching the em height will have negative effects. In that case, you can either change fonts for MathJax or scale all math (see the output processor documentation pages, e.g., this one) 

Regards,

Peter.

--

You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[David Roodman]

Thank you Peter.

 

Using the Simple Mathjax WordPress plug-in, I now have:

MathJax.Hub.Config({

  extensions: ["MatchWebFonts.js"],

  MatchWebFonts: {

    matchFor: {

      "HTML-CSS": true,

      NativeMML: false,

      SVG: false

    },

    fontCheckDelay: 20000,

    fontCheckTimeout: 300 * 1000

  },

  tex2jax: {

    inlineMath: [['\\(','\\)']]

  },

  "HTML-CSS": {

    linebreaks: {

      automatic: true

    },

    scale: 85,

    preferredFont: "TeX",

    mtextFontInherit: true,

    matchFontHeight: true

  }

});

 

I multiplied the defaults for fontCheckDelay and fontCheckTimeout by 10 for testing. And I scaled to 85%.

 

I also changed for the moment to 16px Lato, just like on http://docs.mathjax.org/.

 

At http://davidroodman.com/blog/2010/09/05/t/ you can see some samples. A few equations are in triplicate: first in MathML using MathJax, then in LaTeX using MathJax, then in LaTeX using the WP LaTeX plugin by Automattic. You’ll see the MathJax ones are still noticeably heavy. (Arguably the WP LaTeX are too light, and that may illustrate software design the difficulties…)

 

But naïve user that I am, Mathjax doesn’t quite seem to be doing what I want it to do…

--David

[Peter Krautzberger]

Hi David,

I don't think I see the problem you're seeing. But either way my typographic knowledge is miles away from David Carlisle and Davide Cervone so I would refer to their comments.

FWIW, I've attached two screenshots (using Chrome 38 beta on Linux); setting MathJax scaling to 100% looks better to me. (The input does not matter to MathJax output by the way.)

Peter.

[David Roodman]

Thank you, Peter.

I find that in Chrome if I zoom to about 125% to match the scale of your screenshots (at least as they appear on my screen), things do look less imbalanced in my browser too.

 

Here is a screenshot of Chrome, IE, and Firefox on my Windows 7 laptop all at 100% zoom. Also shown is some of the same equations rendered into pdf with MiKTex.

 

(I have now switched back to Open Sans as my main text font, and have switched the Mathjax scale factor back to 100.)

 

For me the MiKTeX output still seems to represent the ideal with respect to font weight while the Mathjax output looks too heavy..

 

 

+1-202-670-0467

davidroodman.com

da...@davidroodman.com

Twitter & Skype: davidroodman

[Davide P. Cervone]

I also can't reproduce the problem.  For example, here is a section of the page you initially linked to:

For me, the weight of the math matches that of the text reasonably well (compare the in-line equations in particular).  I did look at the page the first day you posted, and the sans-serif font that you use for the main text seemed thinner to be me, so I think the change to Laxo helped.  David Carlisle is correct that against a thin sans-serif font, the STIX fonts (which you have requested in your configuration) can be a bit heavy.  The TeX fonts might a better fit (and since you haven't change the webFont setting, that is what people without locally installed STIX fonts will get anyway).

Because this is a matter of the difference between font weights for the two fonts in use (the main text font and the math font), changing the scaling probably won't help.  The scaling appears to be correct, and changing that to affect the weight will just cause the math to look too small and become harder to read.  MathJax scales the math in order to match the ex-height of the math to the ex-height of the surrounding text.  You can see that this has worked (compare the height of the lower-case k to the surrounding text, for example).  But the ratio between the total height of the font and the ex-height does vary from font to font, and in some fonts, the ex-height is quite high compared to the total height (that is, a capital letter is not much taller than a lower-case one) where other fonts have the ratio closer to .5 (lower-case letters are close to have the height of upper-case ones).  So when MathJax matches the ex-height of the surrounding font, that makes the lower-case letters work well, but upper-case letters might be too tall (or too short, but that usually isn't the case).  That can make the fonts appear poorly matched.

But your issue of weight is not the same as that of height, and I wouldn't use scaling to try to fix it.  As you have found, fonts of the same size have different weights, and the STIX fonts that you have asked for are heavier than whatever font you used to use.  That is going to be apparent no matter what size you make the math, and there is not much that can be done about that other than using a different font for the math.

This is complicated by the fact that different browsers and different operating systems use different font-rendering technology, so what other people see will vary from what you see.  For example, MacOS tends to produce darker results than Windows (in my opinion).  So the same font will look different depending on where you are viewing it, and it is not really possible for MathJax to provide a font that will match every surrounding font on every OS in every browser.  While I understand that you are not completely satisfied with the results, the change in page font that you have made is, I would say, a good compromise.

Again, I would not recommend the 85% scaling that is part of your test page.  Peter's results correspond to what I see as well.  The 85 size does not match the surrounding text well, and doesn't help the weight issue.

Davide

<roodman-85percent.png><roodman-100percent.png>

[David Roodman]

Switching to Latin Modern has brought it closer to what I want, which I guess makes sense since my expectations are shaped by my LaTeX/pdf experience.

 

Unless the issue of most of the fonts looking heavy is specific to my machine(v.s. Windows in general), it’s possible that other users will be also thrown off by most of the Mathjax fonts looking significantly heavier than the LaTeX font they’re used to.

 

Thanks to all for the help.

--David