Unicode has a set of characters for drawing simple graphics. Here is an example from Wikipedia:

┌─┬┐  ╔═╦╗  ╓─╥╖  ╒═╤╕
│ ││  ║ ║║  ║ ║║  │ ││
├─┼┤  ╠═╬╣  ╟─╫╢  ╞═╪╡
└─┴┘  ╚═╩╝  ╙─╨╜  ╘═╧╛

There there is U+2588, FULL BLOCK:


Whether or not the above rendered properly depends on which font your browser used to render it. With some fonts these graphics render correctly, and with others you will see gaps between the rows or columns or both. With other fonts the rows might not line up correctly, especially with very long rows.

When creating a truetype font, what do I need to do to make sure characters like this work correctly?

I encountered this problem while trying to make a truetype font containing Mode 7 block glyphs. I converted a PCF bitmap font to truetype using fontforge and a script. You can see an example here. (You can also download the font, because it's a webfont.)

On Firefox/Linux this page renders correctly until you zoom in/out (ctrl-shift-+). On Chrome it looks awful at any zoom. In both cases, thin lines are visible both horizontally and vertically.

Here is a screenshot of what I see:

enter image description here

I have also used this font in various Linux terminal emulators when developing the software which creates the web pages, and there the same thing always happens.

For reference here is what my post looks like in Firefox:

enter image description here

But in the edit box it looks much better (at any zoom):

enter image description here

Chrome manages to get the box glyphs right, but only in the edit box, and the full block is wrong:

enter image description here

I understand that this is most likely due to a combination of hinting, character substitution, and the different font renderers, but is there anything I can do about it when creating the font?

  • 2
    Horizontally ought not be a problem - just fill your design box. Vertically, you are at the mercy of how the "suggested line spacing" gets interpreted. Can you add images for these troublesome fonts you mention? – Jongware Feb 7 '16 at 0:31
  • I think one secret to getting rid of the inter-line gaps is setting CSS property line-height: 1; – David G. Apr 26 '20 at 1:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.