TYPOGRAPHY

Text is shown on a variety of different mediums and whether it is shown on a screen or in print there are some key aspects that should always be present. You want each letter that is written to be legible (style), you want the entire text as a whole to be readable (arrangement), and you want the composition of what is written to be aesthetically pleasing (appearance). The decisions you make in regards to these three aspects is the art of typography.  

Principles of Typography

Below I will cover the details that pertain to the specifics of a chosen font to display text but in this section I want to speak about these principles broadly, especially since you are probably asking yourself what is the difference between legibility and readability. 

The ease in which each character, a letter or number, can be differentiated from other characters is its legibility. For instance how clear is it to tell the difference between a "h" and a "b". Legibility is actually being able to physically see or perceive the different characters in a text. The size of the text being used is a simple example of legibility.

While legibility pertains to individual characters, readability pertains the text as a whole. So things like the spacing between lines of text and the size of margins effect readability. Readability is the ease at which the text allows for comprehension.  Ultimately the font the text is written in has a large baring on readability. 

The final principle is aesthetics, which is a combination of both legibility and readability. It can be a personal preference but these factors and how the text looks on the page are the aesthetics of the typographic aspects that can be adjusted and chosen for a specific purpose. 

Properties of Typography

A chosen font or typeface is just a way to represent characters stylistically. There are aspects of each font that are shared across all the characters you can produce within it and this commonality is what differentiates fonts from each other. Even though that is the case there are still shared properties across fonts that are measurable and allow for each font to engage the principles of typography of legibility, readability, and aesthetics.   

Baseline

The baseline is the line where the base of the text lays upon. It is also used as the measuring line off which other property lines are tied to. 

Median

The top line where most aspects of a lower case letter will end.  

Ascender & Descender Lines 

An ascender is the part of a lowercase letter that goes above the median line up to the ascender line. A descender is the part of a lowercase letter that goes below the baseline down to the descender line. 

Cap Height

Cap Height is where the flat capital letters ( ie. T, M, E) encompass from the baseline. The other capital letters that are curved and pointed (ie. C, A, S) go slightly above the cap height line to optically appear the same height. 

x - Height

X- Height is the height between the baseline and the top of where a lowercase x will hit, as well as most lower case letters that don't have an ascender or descender.

Stroke & Weight

The stroke of a font is the actual path of the "pen" writing the text and how thick or thin the character is is its weight. 

When selecting a font to use all of these properties will effect the three principles of legibility, readability and aesthetics. For instance if you want to use a small font size then you may want to consider choosing a font with a tall x- height because each letter will be more legible. There are also a few other things that you can normally adjust when using a font that will effect the readability of you text. 

Letter spacing, the space between each character, is adjustable. When using a larger font size for applications like a header or title, a tighter letter spacing helps readability. The opposite is true when using a smaller font size, with a bigger letter spacing readability will increase. Line Height, is another aspect that effects readability. Line height is the space measured between baselines of text. If your line height is too small then you run the risk of the ascenders and descenders running into the lines of text above and below it.

Font Families

There are five basic font types or families and they are broken up by characteristics that differentiate these fonts from each other. They can be easily distinguished between but there is some overlap and some fonts can seem to fall into multiple families. The font family of Handwriting is sometimes called Cursive but there are other fonts than cursive types that fall into this category so I prefer using Handwriting. The Display font family is sometimes called Fantasy but I also feel that Display is a better descriptor since these fonts are intended for displaying text on a display and not just bringing the ring to Mordor. 


Serif

Serif fonts all have a small protrusion or shape at the start or end of a stroke. 


Sans Serif

Sans is French for without so a Sans Serif font is a font without a serif. 


Handwriting

Handwriting fonts look like they could have been written by hand. 


Monospace

All characters in monospace fonts are the same width. 


Display

A catchall category of fonts that you would generally use in large format and not great for readability.