Typography, Serif and Sans Serif and Hierarchy


Typography is the study of type and fonts. It is the art or procedure of arranging, presenting text for printing. It involves selecting typefaces, size, line length, and spacing. Typography is the visual component of the written word. The two primary functions of typography are the presentation of the text in a manner that is not only easy to read but also visually engaging.

Typeface and Font

A typeface is a design style that comprises a myriad of characters of varying sizes and weights, whereas a font is a graphical representation of text character. Put simply, a typeface is a family of related fonts, while fonts refer to the weights, widths, and styles that constitute a typeface. Typography is so much more than just choosing beautiful fonts: it’s a vital component of user interface design. Good typography will establish a strong visual hierarchy, provide a graphic balance to the website, and set the product’s overall tone.

Serif and Sans Serif

Serif means ‘foot’ in Latin. Serif fonts have “feet” on each of their strokes. Serif font is mostly used in the printing of large babies of text as for newspapers, magazines, etc. Serif font is easy to read because the little feet carry your eye from letter to letter. Common Serif fonts are Times New Roman, Garamond, Georgia, etc.

Sans means “without” in Latin which makes Sans Serif font are those with no feet at the strokes of the letters. Sans Serif is easy to read if they are large because they are very simple. Sans Serif is usually used for a small portion of the text, like headlines and captions as it is easier to read off the computer screen. Common Sans Sherif fonts are Arial, Helvetica, etc. Sans Serif typeface is more modern in appearance than Serif.


Establishing hierarchy is one of the most vital principles of typography. Typographical hierarchy aims to create a clear distinction between prominent pieces of copy that should be noticed and read first, and standard text copy. Hierarchy is used to guide the reader’s eye to whatever is more important. A typographic hierarchy is a system that uses typography – the size, font, and layout of different pieces of text – to create a hierarchical division that can show users where to look for specific kinds of information. It is an organizing system for establishing order in a set of data. By creating different sizes, shapes, and blocks of text, developers can direct the user’s eye to the information that an audience needs the most, or otherwise categorize that information visually for the audience. Generally, typographic hierarchy is a discipline that is very useful in Web design and graphic design to get more specific results. Hierarchy can be created using sizing, color, contrast, and alignment.