Typesetting may seem like a mundane aspect of designing an app, but it is one of the most important parts of establishing good typography. Not knowing how to properly use the awesome font(s) you picked for your next project could mean design disaster.
Let’s start exploring typesetting by first looking at what usually goes wrong by default.
Regardless if you are using a design program or implementing your words in HTML things will usually be terrible by default. Let’s improve this paragraph step by step.
The first and most obvious thing you can do to improve the paragraph is differentiating the title from the body copy. I did this by changing the size from 14px to 26px (above).
To further separate the title from the body copy I changed the title’s font style from regular to Semibold and changed the body copy’s color from black to dark grey (above).
The next change I made was to alter the body copy’s line length and height. The optimal line length is usually between 50 and 75 characters. I chose to stay on the lower end of this spectrum because there are only two paragraphs to read (above).
The optimal line height is typically 1.5X of the font size. Since the font size of the body copy is 14px I increased the line length to 21px. When you highlight the text there should by spaces between each lines highlighting color (above).
I then cut the space between the two paragraphs in half so that it feels more connected when reading. I also changed the body copy’s size from regular to light and made the first sentence a semibold italic to add further differentiation and visual hierarchy. I also slightly increased the title’s size and added a marker above it to direct a readers eye to the starting point. This is more of a stylistic flare and isn’t necessary.
I hope this article helps you take a closer look of the typographic subtleties that make a well set paragraph and that you can implement things like line height, line length, font size, font style, etc. in a meaningful way.