----- isHidden: false menupriority: 1 kind: article created_at: 2012-02-02T11:53:00+02:00 title: Typography and the Web author_name: Yann Esposito author_uri: yannesposito.com tags: - web - design - typography macros: latex: 'L^aT_eX' xelatex: 'X_ƎL^aT_eX' css: css ----- blogimage("first_sc_screenshot.png", "Screenshot of first in small caps with and without ligatures."); begindiv(intro) <%= tldr %> Web typography sucks and we'll have to wait forever before it will be fixed. enddiv I stumbled upon [open typography](http://opentypography.org/). Their main message is: > «There is no reason to wait for browser development to catch up. > We can all create better web typography ourselves, today.» As somebody who tried to make my website using some nice typography features and in particular _ligatures_, I believe this is wrong. I already made an automatic system which will detect and replace text by their ligatures in my blog. But this I never published this on the web and this is why. First, what is a ligatures? blogimage("ligatures.png", "A ligature example"); What is the problem between the Web and ligatures? The first one is: you cannot search them. For example, try to search the word "first": - first ← No ligature, no problem - ﬁrﬆ ← ligature nice but unsearchable The second one is the rendering, for example, try to use a ligature character with small caps: - first - ﬁrﬆ Here is a screenshot of what I see: blogimage("first_sc_screenshot.png", "Screenshot of first in small caps with and without ligatures."); The browser isn't able to understand that the ligature character "ﬁ" should render as fi when rendered in small caps. And one part of the problem is you should choose to display a character in small caps using %css. This way, how could you use a ligature Unicode character on a site on which you could change the %css? Let's compare to %latex. blogimage("first_latex_screenshot.png", "LaTeX screenshot"); If you take attention to detail, you'll see the first "first" contains a ligature. Of course the second render nicely. The code I used were:


\item first
\item {\sc first}

%latex was intelligent enough to create himself the ligatures when needed. The "ﬆ" ligature is rare and not rendered in %latex by default. But if you want you could also render rare ligature using %xelatex: blogimage("xelatex_ligatures.jpg","XeLaTeX ligatures"); I took this image from the excellent article of [Dario Taraborelli](http://nitens.org/taraborelli/latex#rare). Clearly fix the rendering of ligature in a browser is a difficult task. Simply imagine the number of strange little exceptions: - The text is rendered in small caps, I cannot use ligature. - The current word contains a ligature unicode character, I should search for ligature in this one. - The current font does not defined the ligature unicode character, we shouldn't use it, etc - A javascript command changed the CSS, I should verify if I had to revert the insertion of ligatures characters - etc... Nonetheless if someone has a solution, I would be happy to hear about it.