Typography Terminologies

• Typeface – It is the design of specific letters, also called the font family. It includes a lot of variants, size, and heights that comes from a pack/font family. For example Futura, Poppins
• Font – Often confused with typeface, but it is a particular size and style of the typeface. For example 10px Regular – Poppins. 
  Note: Fonts have different styles that are associated with personalities. These personalities determine the tone of the interface such as fun, contemporary, or professional, then choose a typeface that reflects that.

• Serif – The extended decorative strokes or lines on a character in a font are called embellishments. Generally preferred to use in titles and books, as they have more rough edges good for short reading.
• Sans-serif – Fonts that are standard without any embellishments. Sans is good for long-paragraph reading.
• Italics – A version of a typeface that is slanted at an angle. Used for titles to make them stand out.
• Baselines – It is an invisible imaginary line on which all the characters sit. Helps in measuring x-heights and line heights in typography. Using baseline we check the ascender and descender of a character.
• x-height – As the name suggests, it is the height of the lowercase alphabet letter “x”. It is measured without any ascender or descender.
• Ascender – A portion of a lowercase letter that is raised upwards from the letter’s body. Ascender is measured using x-height. For example, the lowercase letter “f” has an ascender.
• Descender – A portion of a lowercase letter that is extended downwards from the letter’s body. It is also measured using x-height. For example, the lowercase letter “p” has a descender.
• Font Size – Also called “Point size”, determines the distance between the top of the ascender and the bottom of the descender. Basically is the overall size of a font. As per the W3C recommendation, it is good to use relative font sizes( in ems). As it allows ease in scaling up or down fonts based on the screens and browser settings.
• Letter Spacing – It is the spacing given to each letter in a particular section like a sentence or paragraph. It can be normal, tight, and loose. Letter spacing is also known as tracking.
  It is good to keep in mind while using letter spacing that while using uppercase text, increase the letter spacing and when using larger fonts, decrease the letter spacing. This leads to better readability and legibility. Also, keep the letter gap reduced when the font weight is increased.
• Line Spacing – The vertical spacing between lines that are measured through the baseline is called line spacing. It is also known as leading and in CSS it is called line height. It is preferred to use more leading when using white or light text on a dark or black background.

Now that we have become familiar with some very important terminology of typography, let’s know what are the benefits of using typography and how it can make a difference when used appropriately in interfaces.

Typography is the segment of UI Design that falls under the content part of UX Design. Typography is equally important for both UI and UX design and designer to focus. Websites or apps both have content that helps users navigate, interact, and guide them to take action. Organizing the content in a manner that helps ease navigation, interaction and action is a very important part of user interfaces.

Typography is not only about picking the best fonts and their placement, it is the overall visual language used to communicate with users. Typography can effectively convey a product in such a manner one wants it to be perceived, just like any other visual components like color, form, and pattern can. In this article, we’ll look into different elements of typography and how to seamlessly integrate them with designs.