What am I missing if I have a font created from SVGs using some online application?

Question

I have love for fonts, especially in web and print typography, though my background is not in this regards. Recently I came to know that, I can make SVG images in Illustrator, and can upload them to web applications to convert them into web fonts, and they did it wonderfully. I already am using such fonts in one of my websites.

I also installed the TTF file contained in the package, opened MS Word, entered the keyboard key associated with my characters and they started appearing – wow! As they’re made of SVGs (instead of pixels), they are simply awesome and taking larger sizes without any hustle.

My question now: I heard that, making a font is no fun; especially there’s something called hinting involved there that is painful. However, I don’t know anything about font making.

Can you please shed some light on the differences between the scenario I presented and how a font should be developed – what actually is the difference in between and what are the issues my automated font can create of which I‘m not aware?

Answer 1

First of all, how is a font more than the sum of its glyphs?

• Kerning is the adjustment of the spacing between letters depending on the letters. For example, in a standard roman typeface, there is too much space between V and A without individual adjustment:

  

  Nowadays, kerning dose not have to be done individually for each glyph pair, but can be done more intelligently by grouping glyphs that behave identically in one direction for the purposes of kerning such as I and L to the left in the above example. Moreover, most font-creation softwares come with some automatisation of finding such groups and kerning them, which you can least use as a basis for kerning. Depending on the quality you want to achieve, you can spend a lot of time on kerning, but a few minutes may already yield big improvements.

  Finally note that not all fonts need kerning, e.g., monospace fonts or fonts for some non-roman scripts do not.

• Hinting information is useful for the font-rendering software so it can better translate the vector data of the glyphs to pixels. It is particularly important for small text sizes such as in this very text.

  Depending on how good you want your results to be, you can put up to 1000 hours of work into hinting (when you manually correct bitmaps for each glyph and each font size), but spending one hour to tweak an automatic hinter (such as TTFAutohint can already yield big improvements.

  Finally, the quality of automated hinting and thus the amount of work you have to add depends strongly on the typeface itself. For example, if your typeface consists only of thin strokes with uniform width, automatic hinting should work very well. However, in another example from my own experience, you have to do something yourself for blackletter fonts:

  The example text reads Luftfeuchtigkeit.
  Left: As it would be rendered, assuming that you are viewing the image at its original size.
  Right: 400 % zoom for illustration.

  

  Without any hinting, the rendering seems grainy and distorted, e.g., look at the L or the first e. Also, the counter of the u can hardly be seen. The automatic hinting is better but the letters are not well aligned anymore, e.g., both u are hovering above the baseline. The hinting in the bottom line is still semi-automatic and has its flaws, but obtaining better results would be a lot of work.

• Intelligent font features, such as those provided by OpenType allow you to perform automated changes to the glyphs depending on the actual text. These features can be switched on and off by the user. Some examples:

  • Ligatures combine two adjacent glyphs into one. This may be just used for regarded as obligatory by the users of some language, avoid ugly collisions (such as that of f and l in the left example) or just make the font look more fancy.

    

  • Language-specific features – for example, the italic variants of certain letters of the Cyrillic alphabet look different in Serbian and Macedonian typesetting than otherwise (see here). Using intelligent font features you can instruct your italic font to use another glyph for these characters, if the text’s language is set to Serbian or Macedonian.

  • Alternate glyphs. Sometimes, you want to offer your user the option to switch between two or more glyphs for a certain character. Intelligent font features allow the user or the program that uses the font to make this switch in a unified way. Also, the alternative to this – using separate font files – becomes unfeasible if you have a lot of disjunct options, as the number of combinations becomes very high very quickly.

    The most frequent uses of such features are small caps or lowercase numbers.

So, using your method, you will probably miss all of the above. Even if you want to continue to use Illustrator for drawing glyphs, it should be easy to use some font-creation software instead of your online tool. I have no experience with illustrator, but I can paste shapes from Inkscape directly to FontForge. Finally, even for drawing glyphs, a software specialised on fonts may be worthwile, as it has features tailored to this particular application.