May 12, 2022

The artwork, Saved by the Whale's Tail, was erected in 2002 by the De Akkers station in Spijkenisse on the outskirts of Rotterdam, in the Dutch province of South Holland. It is made of reinforced polyester.

A Reference Guide For Typography In Mobile Web Design

1-Know your typefaces

The importance of typography

Let’s ask ourselves a simple question: What is the purpose of a website or app? Isn’t it to convey certain information? Isn’t it all just a frame to put a bunch of information in? The purpose of UI designers is just to arrange those pieces of information in a way that makes sense. Most information in any website or application is text. Take a look at how Slack’s website would look like without Text.

We don’t have too many layers to play with when it comes to typography. For pictures, it’s much easier because you have a whole lot of parameters you can play with: Brightness, contrast, saturation, color, exposure and each one of those had endless possibilities. With type, there isn’t a lot to mess with. So it’s both easier and harder. Here are the settings that are at our disposal to format text.

2-Weights

Knowing which weights to choose for your composition is the first step of making the best of your typeface choice. Here are a few rules

The importance of typography

Helvetica Neue and Segoe are perfectly fine. But If you’re the kind of person who’s always using Open sans, Roboto, Raleway, Lato, and the rest of the Google fonts gang, you are really missing out. Google Fonts is greatly contributing to this notion that free fonts are just as good as premium fonts with tricky licenses. They’re not. Not by a long shot. Here’s my premium font cheat sheet

Typeface choice
- Sub-item 1
- Sub-item 2
  - Sub-sub-item 1
  - Sub-sub-item 2
Weight
Tracking (letter spacing)
Leading (Line spacing)

I’m sure that many wouldn’t think much of these settings. Heck, I know UI designers and front-end developers who have never used any of these parameters (apart from choosing a typeface of course). And yes, you’re right, you don’t absolutely have to. But it gives you an extra layer of refinement that makes your work stand out and look more “professional”. I’m going to go into the details of how each of these can help you make better designs.

Sans Serif (Circular) | Serif (Caslon pro)

3-Weights

Tracking refers to the space between the glyphs (characters) of a word. It is often confused with Kerning which is the spacing between two individual glyphs, which is something built into the font file itself. If you ask me, this is the most underused parameter of all.

The first rule of design is: It’s all about the type (typography). The second rule of design is: It’s all about the type.

— Dianne Russell

Sans Serif (Circular) | Serif (Caslon pro)

Most of the famous Google fonts are not bad at all. But that’s about the extent of it. Just not bad. A typeface introduces you to a vast dimension of expression that is inaccessible by any other tool or technique. To waste that space by using a standard font when there’s so much that could be said with a beautiful well-crafted one is a true shame. Here’s Spotify’s landing page in its original font and in 3 of the closest Google fonts in my opinion: Open Sans, Work Sans, and Rubik. Could you guess which one is the original?

This one is perhaps the most subtle of the parameters, but it can definitely be a lifesaver sometimes. Line spacing comes-in very handy if you’re designing landing pages, blogs, newsfeeds, and any other text-rich design. Before thinking about the nitty-gritty details I’m about to go into, always consider the main point of separating lines: legibility. Hence, the leading shouldn’t necessarily be directly proportional to the text size. The rule of thumb when it comes to leading is that you decrease it for headers and increase it for small text. This is because if your font size is 72pt, the space between the lines is more than necessary to tell them apart, so you can afford to reduce it.

Column name 1	Column name 2	Column name 3	Column name 4	Column name 5	Column name 6	Column name 7	Column name 8	Column name 9	Column name 10	Column name 11
Row name 1	Content	Content	Content	Content	Content	Content	Content	Content	Content	Content
Row name 2	Content	Content	Content	Content	Content	Content	Content	Content	Content	Content
Row name 3	Content	Content	Content	Content	Content	Content	Content	Content	Content	Content

lines: legibility. Hence, the leading shouldn’t necessarily be directly proportional to the text size. The rule of thumb when it comes to leading is that you decrease it for headers and increase it for small text. This is because if your font size is 72pt, the space between the lines is more than necessary to tell them apart, so you can afford to reduce it.

film-2