GUI/UI Fonts: What variables put them apart from other fonts?

fontana's picture

"I have questions about GUI/UI fonts and this is about what are their font design specifications? What are differences between those fonts that are GUI/UI and those that are not? Please tell me all the variables that कeep GUI/UI fonts apart from those fonts that are not them? Are there any tools and experiences required for constructing GUI/UI fonts? Could you refer me to some websites, GUI/UI fonts, any free GUI/UI fonts etc? What are the GUI/UI font criterias? Can you looक at a font and say it will translate to a good GUI/UI font?

Would be grateful for some answers to these questions."

Joe Pemberton's picture

Foremost, like any good typeface, they are designed for the specific use and application where they will be deployed. In other words, good screen-based UI fonts were not originally designed for wood, metal or for a linotype machine decades ago.

Second is that they are designed by designers. How many fonts in use in the handheld device industry were designed by engineers? I've been very encouraged by how much custom type is being commissioned by device manufacturers, game companies, console makers, etc. I'm sure Sii could comment here.

Step magazine approached us last year about this topic for an article. Jared Benson shared some insights specific to mobile devices that may be worth reviewing. The irony with this link is that the article looked much better in print.

fontana's picture

Joe Pemberton Thanकs for taकing some minutes from your worक to respond.

Would Bitmap / device independent Bitmap file extensions for a GUI/UI font be perhaps one variable?

Then also would not a sans serif font also be perhaps another variable for a GUI/UI font?


BBT Font now available at

ebensorkin's picture

What do you mean "one variable"?

eeblet's picture

Um... what sort of UI? Are there really any generalizations one can make besides "not too large a file" and "legible"? Or am I just out of my element, with my lack of type-nerd cred? ;)


ebensorkin's picture

You can't look at a printed font and know it will be a good UI font - but in some cases you can know it won't be! The goodness of a UI font has to do with it's ability - often with the help of programmed "hints" to render cleanly from 6 7 or 8 pixels to maybe 18-30 pts. Sometimes the range is more narrow like 8-18 pt. You do need special tools and you need to learn about different operating systems and how they render fonts. If you are working on the Ui for one device then you just need to know about it's rendering model.

Um... what sort of UI?

Exactly. A good UI font is often tied closely to it's device/OS.

Thomas Phinney's picture

Also to what rendering engine is being used on it.

Christian Robertson's picture

Thomas hit on the most important consideration. Ultimately a UI font get crunched down to a bitmap that shows up on screen. How the outlines get rasterized vary significantly from platform to platform. Some of the common rendering engines are: ClearType (Windows), Freetype (lots of stuff uses this, including Linux and FontLab), Quartz (OS X), iType (Monotype) and Adobe uses custom engines for may of their apps. Different Adobe apps use different renderers; Photoshop, Fireworks and Flash even allow users to tweak with the parameters of the renderer.

There is a hearty debate about type rendering engines here:

Some other points that come to mind:

  • UI fonts rarely use italic, or even bold for that matter.
  • UI fonts really need to get out of the way. If they are too much they can distract from the task at hand. (Obviously there are exceptions here: if we are talking about a UI font for a Barbie fashion game, the considerations are completely different, of course.) For a good example of a UI font that has some unique character check out the XBox UI font by Steve Matteson of Ascender Corp.
  • UI fonts are almost always sans serif (for now).
  • UI fonts often use extensive hinting tuned to the specific rendering engine, or even the specific display device.
  • May devices don't support outline (TrueType or Postscript) types. There are probably thousands of bitmap type rendering engines, as may app and device manufacturers create their own engines. They all work pretty much the same way, though.
Syndicate content Syndicate content