• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Wenmin Chen

  • Portfolio
  • About
  • Services
  • Blog
  • Resources
  • Contact
  • Email
  • LinkedIn
Wenmin Chen, Boston based freelance web designer and developer
Photo showing different fonts

Typography Basics

April 4, 2018 // wenminchen

Topography is the art and process of arranging type (font, size, and readability) for a variety of media types and is composed of several parts. In this post, I will go over some typography basics that have been essential in my web design education.

Typography definitions

There are various definitions you should be aware of when studying typography. Below are some basis definitions to get familiar with:

typography diagram

  • Type size (a.k.a. Cap height): overall height of letter
  • Ascender: upward tail on letters such as h, l, t, b, d, k
  • Descender: downward tail on letters such as p, g, q, y
  • Counter: white space inside letters such as O and P
  • X height: height of letter excluding ascender and descender
  • Baseline: boundary the lowest part of the letter rest on
  • Kerning: space between individual letters (affects readability)
  • Leading: space between lines of text (affects readability)

Type alignment

Type alignment is an important consideration. The choice of type alignment can affect the message you try to convey.

  • Left alignment is used for standard text to create easy to read text. Example include casual letters, unpublished manuscript and basic paragraph styles
  • Right alignment: is used to convey clean, crisp professional look. Thus, it tends to be used for corporate business letters, business cards, and others that require a more formal style.
  • Center alignment is used to draw attention, commonly used for headings and titles. Example include newspaper headers, book titles, report titles
  • Justified alignment is used by newsletter print and body text of textbook. It’s difficult to use and could lead to problem known as tracking.

Font types

There are an abundance of font families to choose from and they fall into the following three categories:

  • Serif fonts are fonts that have extensions or strokes on the end of the letter. They are easy to read for longer pieces, and therefore are good for body text. They tend to be more conservative. Examples: Times New Roman, Courier.
  • San-Serif fonts do not have extensions or strokes on the end of the letter. They are good for labeling, headings and titles. They are easy to read with a more contemporary feel. Children’s books tend to be written in San-Serif because they are more identifiable to kids as they are learning the alphabet. Examples: Arial, Helvetica.
  • Scripts, Symbol, Decorative fonts are used to create specific image or message (e.g. weddings and birthdays). Example: Pacifico.

In conclusion, typography is an essential component of web design and development. Your choice of font and alignment can impact the message you try to convey and the brand image you try to project.

Related

Unit of measurement
Px, Em, and Rem
November 24, 2018
Categories: Design
Designing for different devices and screen sizes
Responsive Web Design
October 20, 2018
Categories: Design
Photo depicting wireframes used in ux design
User Experience (UX) Design 101
July 30, 2018
Categories: Design

Footer

About

Hi, I am Wenmin, a freelance web designer and developer based in Greater Boston who specializes in WordPress sites. Whether it’s an information site, a blog, or an eCommerce website, I can craft a one-of-kind website that appeals to your target audience. If you are interested in my website services, please check out my portfolio and contact me for a custom quote.

Featured Porfolio

  • Rob Cross | by Wenmin Chen, Boston freelance web developer & designer
  • Tom Davenport | by Wenmin Chen, Boston freelance web developer & designer
  • Sunshine Nursery School | by Wenmin Chen, Boston freelance web developer & designer
  • Lier Chen Photography | by Wenmin Chen, Boston freelance web developer & designer
  • Nepf Lab at MIT | by Wenmin Chen, Boston freelance web developer & designer
  • Martin Lab | by Wenmin Chen, Boston freelance web developer & designer
  • Gehring Lab | by Wenmin Chen, Boston freelance web developer & designer
  • Lab for Infant Development and Language | by Wenmin Chen, Boston freelance web developer & designer

© 2023 · Wenmin Chen. All Rights Reserved.