Font

Readable and beautiful text is a must have for your project


There are many diffrent kinds of fonts out there.

And not all of them are going to be perfect for your project. The wrong font can make or break the way users view what you've made. The first aspect of font that can change the image of your creation is professionalism.

Professionalism

While the majority of fonts out there are designed to look professional and presentable, not all are created equally in this reguard. Some fonts are far too cartoonish, or decorative to be used as the centerpiece of your user interface. A wonderful example of a font that is too cartoonish to be used in most user interfaces is Comic Sans. (For recovering Comic Sans criminals please visit this website for more info: comicsanscriminal.com).

A wretched image of the cartoonish Comic Sans font

A much more professional and presentable font would be something like SF Pro (my all time favorite font), this font is a sans-serif. I will explain more about the diffrent font family names later in the article.

A beautiful image of the great SF Pro font in different weights

Family and style

Fonts come in a few different families and styles, it is important that you pick a font with a family that matches the context it is being used in. When you pick the right font family, your font will fit right in with the rest of your interface. On the otherhand, if you pick a font family that does not quite match, all of the text in your interface will stick out like a sore thumb. As an example, if you are creating a professinal government website, it may not be the best idea to use a decorative serif font. A more modern and clean sans-serif may be what you are looking for. Take a look at some of the differen font families below.

An image showing examples of serif, sans-serif, monospace, cursive, and fantasy fonts.

Weight and size

The weight of a font describes the thickness of the lettering. When used right varying the weight of your font can help to give your user interface a helpful and beautiful higerarchy, but it is easy to make your font weight too bold or light in certain places.

An image showing examples of font weight and size.

If you have your whole user interface look like this, or this, you are a UI criminal!