Font Choice and Hebrew Rendering

Question

When this site finally makes it out of beta and gets its own design, I'd like to request that the font be serif rather than sans-serif (or at least when rendering Hebrew). Compare these screenshots of BH.SE and MY.SE, showing the exact same Hebrew (and Greek) text.

BH.SE (sans-serif)

MY.SE (serif font)

The Greek text is still fairly legible in both places, although I still think it looks sharper in a serif font (but that is very subjective).

Here is another Hebrew comparison:

BH.SE (sans-serif)

MY.SE (serif font)

The Hebrew is much easier to read in a serif font. Also, it would be nice if the Hebrew letters were a little bigger.

Answer 1

I don't care whether it's serif or sans-serif. I would like it to be BIGGER. :) Here's what I see:

In the comment to that question, I added:

I'd settle for any CSS font stack that yielded a larger point size for Hebrew; Ezra SIL is the "largest"; the Taamey Culmus fonts are roughly the same x-height as SBL Hebrew. I guess the problem is targetting the unicode range, otherwise SE would need to allow language ... type tags, and I doubt they would like that. Is there a Meta discussion about this?

There is at least this Meta discussion. I note, also, that the Taamey fonts are open-source friendly (not that this is necessarily an issue in this use case), using the same "engine" as SBL Hebrew, but without any license restrictions.

I found these SO Q&As on CSS, font size, and Unicode: (SEE UPDATE 2, BELOW)

• Font face different size for specific unicode range (css 3 attribute) on different languages (asked Mar 13 '12)
• Assigining different font-size per each font in one font-family (asked Apr 14 '12)
• Change Font Size Based on Language (asked Mar 7 '13)

I get the sense from reading around Meta.SO that this isn't the sort of thing that SE is very interested in (I would like to be wrong about that!). It should be technically possible to up the point size on the Arial Hebrew we get as default -- or is it? And can we? (...get bigger Hebrew as default, that is.)

(There might be a reason for this, I think related to the tradition that Hebrew in older printed books was roughly the x-height of the context font. Checking on that, though.)

---

Update 1

I just noticed on the Wikipedia "Psalms" article that it used SBL Hebrew at a nicely legible size at the top of the page, although further down it reverted to plain old Arial Hebrew. A little poking, and it transpires that they (now?) have this wiki markup available:

{{hebrew|תְּהִלִּים}} or {{hebrew|תהילים}}; 

which is rendered into this HMTL:

 <span class="script-hebrew" style="font-size:125%; font-family: Alef, 'SBL Hebrew', David" dir="rtl">תְּהִלִּים</span> or <span class="script-hebrew" style="font-size:125%; font-family: Alef, 'SBL Hebrew', David" dir="rtl">תהילים</span>;

I checked it out with some of the on-page Hebrew, and here's the comparison:

Compare mizmor מזמור - the middle Hebrew word. The "span" version is so much more legible -- and the payoff would be even greater if vowels and accents (niqqudot and te'amim) were involved.

Given that SO/SE uses the [tag:yourtagname] syntax "to indicate (and link to) an existing tag of your choosing", how great would it be to have [hebrew:מזמור] to render an inline span like Wikipedia's? I think it would be VERY great. :)

---

Update 2

It seems it is possible to target Unicode ranges with CSS using @font-face, only at the moment it remains browser specific: webkit browsers support it (Chrome, Safari), and so does latest IE, but Firefox (!) does not support it.

See Drew McLellan's article for "24 Ways 2011", "Creating Custom Font Stacks with Unicode-Range".

I have set up a demo at JSFiddle, so have a look (in different browsers!) and play around. It works quite well, so long as you're not using Firefox ... but surely it must catch up soon? ¶ 20160919 : Although I'm not sure when it did, FF now recognizes unicode-range-based CSS. A good idea whose time has come?? :)

Answer 2

Serif fonts are easier for advanced readers

The sort of people we hope to attract to our site (in particular) love to read. We care deeply about our texts. So our site should be as easy to read as possible.

In my opinion, sans serif letters (such as the default on this site) are easier to decipher. Therefore they are perfect where being able to distinguish between one character and another can be critical. New readers, in particular, read one letter at a time. Display text (such as question titles, logos, signage, etc.) works best in sans serif fonts since it's designed to be read from a distance and/or catch the eye.

It turns out that advanced readers do not read words one letter at a time. Rather they read entire words and phrases at once. Expert readers will scan the page at a regular pace and stop momentarily to decipher words three or four times on each line. They are looking at the shape of the words more than the individual letters. First and last letters (which outline the shape of a word) are particularly important. (You might have seen experiments where letters are jumbled except for the first and last of a word. For experienced readers, the paragraph is perfectly understandable.)

Whether or not serif fonts are easier to read (the studies are inconclusive at best), readers expect large blocks of text to be presented with serif fonts. What is true of English text is doubly true of Greek and Hebrew text: blocky, unadorned, simple lettering looks childish or basic. San serif fonts communicate the wrong thing about our site.

Answer 3

A Simple Suggestion

StackExchange could improve the Hebrew font rendering quickly simply and (IMO) signficantly by using this "font-stack". This is the body CSS for BH.SE:

body {
  line-height:1;
  text-align:center;
  color:#444;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:13px;
  background-color:#fdfdfd;
  line-height:1.3;
  min-width:1010px
}

My suggestion is to tweak the font-family line thus:

  font-family:'Noto Sans Hebrew','Helvetica Neue',Arial,sans-serif;

And that's it. Noto Sans Hebrew (see also the Noto page) is a Google development of the Droid family, this particular version licensed under Apache v.2.0. It has scaled the Hebrew to a larger x-height, and the whole family renders with exemplary clarity on screen. Here's a comparison (or see a single shot of the Noto Sans Hebrew version):

Those who don't have Noto Sans Hebrew won't know any different. Those who do, will enjoy an enhanced reading experience. It costs only 19 extra characters in the CSS.

Well, I think it's a good idea!

Answer 4

The solution is to make the font serif (rather than sans-serif) when the site gets a custom design.

Answer 5

Bible Hermeneutics and Bible Hermeneutics Meta now use our standard serif font stack that we use across the network. From We are switching to system fonts on May 10, 2021, the font families are now:

Georgia, Cambria, "Times New Roman", Times, serif;