: How do I make sure the unicode box drawing characters work properly in my font? Unicode has a set of characters for drawing simple graphics. Here is an example from Wikipedia: ┌─┬┐

Posted in: #FontDesign #Fonts #Typography

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:

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:

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

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

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?