Thursday, February 9, 2023
HomeSoftware DevelopmentWhat's Typography in UI Design?

What’s Typography in UI Design?

Typography is the phase of UI Design that falls underneath the content material a part of UX Design. Typography is equally necessary for each UI and UX design and designer to focus. Web sites or apps each have content material that helps customers navigate, work together, and information them to take motion. Organizing the content material in a way that helps ease navigation, interplay and motion is an important a part of person interfaces.

Typography in UI Design

Typography will not be solely about selecting one of the best fonts and their placement, it’s the general visible language used to speak with customers. Typography can successfully convey a product in such a way one needs it to be perceived, similar to another visible parts like coloration, type, and sample can. On this article, we’ll look into completely different components of typography and tips on how to seamlessly combine them with designs. 

Introduction to Typography

Typography is the artwork of using typefaces and fonts to create content material on a web site/app that’s clear, readable, comprehensible, and pleasurable to the person who’s viewing it. Clear content material prevents any confusion for customers in navigation and taking motion. In reality, a good selection of fonts helps in enhancing the general aesthetics of the merchandise. In typography, we research intimately fonts, their construction, look, and magnificence that evoke feelings.

The position of a UI designer consists of ensuring the typeface contributes to each aesthetics and optimizing accessibility of a web site/app. Efficient use of fonts makes textual content legible. There are numerous fonts and typefaces that exist, amongst them, few are solely created for manufacturers reminiscent of Netflix, Zara, Google Play, and so on. Subsequently it’s also appropriate to say that together with product aesthetics and legibility typography additionally creates an general model notion.

Ever questioned how a font mismatch would look? Think about Nestle’s brand font is changed by Netflix’s brand font. It gained’t look good proper? It is because the font related to Netflix’s brand has made an emotional house in our minds, and it is rather tough to re-create and affiliate that emotion with another model. In order a UI designer, the work is to create that emotional affiliation for customers for the product utilizing typography.

Typography Terminologies

Typography Terminologies

Typography Terminologies

  • Typeface – It’s the design of particular letters, additionally referred to as the font household. It consists of a whole lot of variants, dimension, and heights that comes from a pack/font household. For instance Futura, Poppins
  • Font – Usually confused with typeface, however it’s a specific dimension and magnificence of the typeface. For instance 10px Common – Poppins. 
    Word: Fonts have completely different types which can be related to personalities. These personalities decide the tone of the interface reminiscent of enjoyable, modern, or skilled, then select a typeface that displays that.



Serif Basic
Sans-Serif Trendy
Slab-Serif Ethereal & Daring
Script Elegant
Ornamental Dramatic
Handwritten Casual
  • Serif – The prolonged ornamental strokes or traces on a personality in a font are referred to as gildings. Usually most popular to make use of in titles and books, as they’ve extra tough edges good for brief studying.
  • Sans-serif – Fonts which can be normal with none gildings. Sans is sweet for long-paragraph studying.
  • Italics – A model of a typeface that’s slanted at an angle. Used for titles to make them stand out.
  • Baselines – It’s an invisible imaginary line on which all of the characters sit. Helps in measuring x-heights and line heights in typography. Utilizing baseline we verify the ascender and descender of a personality.
  • x-height – Because the identify suggests, it’s the top of the lowercase alphabet letter “x”. It’s measured with none ascender or descender.
  • Ascender – A portion of a lowercase letter that’s raised upwards from the letter’s physique. Ascender is measured utilizing x-height. For instance, the lowercase letter “f” has an ascender.
  • Descender – A portion of a lowercase letter that’s prolonged downwards from the letter’s physique. Additionally it is measured utilizing x-height. For instance, the lowercase letter “p” has a descender.
  • Font Dimension – Additionally referred to as “Level dimension”, determines the space between the highest of the ascender and the underside of the descender. Mainly is the general dimension of a font. As per the W3C suggestion, it’s good to make use of relative font sizes( in ems). Because it permits ease in scaling up or down fonts primarily based on the screens and browser settings.
  • Letter Spacing – It’s the spacing given to every letter in a selected part like a sentence or paragraph. It may be regular, tight, and free. Letter spacing is also referred to as monitoring.
    It’s good to remember whereas utilizing letter spacing that whereas utilizing uppercase textual content, enhance the letter spacing and when utilizing bigger fonts, lower the letter spacing. This results in higher readability and legibility. Additionally, preserve the letter hole lowered when the font weight is elevated.
  • Line Spacing – The vertical spacing between traces which can be measured by the baseline is named line spacing. Additionally it is often called main and in CSS it’s referred to as line top. It’s most popular to make use of extra main when utilizing white or gentle textual content on a darkish or black background.

Now that we have now grow to be aware of some crucial terminology of typography, let’s know what are the advantages of utilizing typography and the way it could make a distinction when used appropriately in interfaces.

Advantages of Typography

Good and acceptable use of typography helps in higher readability of textual content material that additionally not directly enhances the person expertise. Typography creates an optimum stability between content material, tone, and graphics on a web site. 
Listed here are just a few advantages that good use of typography brings:

  • Constructing sturdy model notion: By distinctive typefaces, typography builds a really sturdy and emotional reference to the model. Customers begin recognizing the model by its visible languages reminiscent of coloration, graphics, and typography.
  • Create visible stability: An internet site is a mixture of colours, components(like cta, tables, and so on), photographs, and textual content material. To create higher visible hierarchy textual content comes into the image. Even with using one single font household, one can create aesthetic visible stability utilizing completely different font weights and types. A great visible hierarchy of textual content results in higher scanning of content material on display. 
    For instance: Utilizing one devoted type and weight for a heading, one for paragraphs & regular textual content, one for a subheading, and so on helps in sustaining the visible hierarchy.
  • Holds person consideration: By holding consideration I imply, good typography can determine whether or not individuals are clear concerning the content material and discover it simple to scan, navigate and make choices or it’s too tough for them to know. Mainly optimum use of typography can inform whether or not individuals would keep or transfer on after just a few minutes.
  • Encourages higher decision-making: When a person is obvious about what’s there on a web page(by crisp content material and textual content), it might encourage higher and quicker decision-making. The clear textual content would come on the bottom of what a person would get on doing a sure motion. I do know that is extra on the UX aspect together with good info structure however it’s equally necessary to obviously present what could be executed and what a person would get by doing so. This might solely come by utilizing clear and crisp textual content on the web site/app. 
    For instance, somewhat than simply “Submit” on a CTA, when you select to write down “Undergo Subscribe” it offers customers a transparent image of what they might get by hitting the motion.

So these had been some advantages of typography. Now to know tips on how to align textual content material, we have to find out about textual content alignment. There are 4 fundamental types of textual content alignment, however every type has its personal manner of utilization. Let’s have a look at every considered one of them.

  • Left Alignment: It’s the most generally used default and common textual content alignment. Left-aligned textual content is straightforward to learn lengthy paragraphs and comprehend them. It enhances readability as human eyes transfer in such a path whereas scanning content material. 
  • Proper Alignment: It isn’t a generally used alignment until we’re speaking within the context of a selected language like Urdu, Arabic, Hebrew, and so on, or for a relatively small sentence.
  • Middle Alignment: It’s usually used for CTA textual content and brief text-like headings. It is just appropriate for small textual content as overuse of center-aligned textual content may cause issue in scanning and studying content material. 

Why is it not choice to go for centered aligned lengthy textual content?
It’s as a result of after a break in every line, to search out one other piece of textual content there’s a sure drop in studying that slows down the studying pace. Subsequently it’s higher to keep away from utilizing middle aligned textual content or lengthy paragraphs. Use of middle aligned textual content is simply acceptable until max 3 traces however no more than that. This level relies on analysis. So it’s good to adapt left aligned textual content for lengthy textual content.

  • Justify Alignment: Such a alignment is extra widespread for specialised functions like elegant and splendid designs. It is extremely balanced from left to proper which makes scanning higher however could be a difficulty if the phrase rely of every line will not be the identical. Some unbalanced gaps could be observed. It’s a formal manner, and any such alignment could be extra typically seen in newspapers, books, and shows.

Typically combine of various alignments(reminiscent of Centered aligned CTA textual content, with left-aligned paragraphs and heading together with having some quotes right-aligned) could be nice. However it relies upon upon the UI rules, be certain doing a mixture is becoming nicely with the rules.

To this point we have now coated a whole lot of issues which can be important to find out about typography, however to make it readable and legible let’s additionally look into each of those phrases intimately. Let’s know what’s readability, what’s legibility, and the way each of those phrases are completely different.

1. Readability(Look of Font)

Readability is one thing that may be managed by a designer as a result of it’s how a typeface is organized. It’s targeted on customers however not on any font. It determines the convenience of studying, profitable comprehension, and the way a lot a bit of textual content is smart to the reader. Readability targeted on components reminiscent of typeface(its association), typecase, line spacing, distinction, and line size. An necessary level to contemplate is that even extraordinarily readable fonts could lack legibility when configured in particular methods. It’s as a result of the readability variables are decided by the designer somewhat than being intrinsic to the textual content. To be readable it’s essential to be first legible.

2. Legibility(Selection of Font)

It’s the capability to distinguish one glyph(referred to as the actual form, design, or illustration of a personality) from each other when studying. Whereas speaking about legibility we glance into x-height, strokes, and weights. Take into account that not each typeface is legible, so selecting typefaces properly is all {that a} good designer must do. Typically legibility will not be the one consideration designers have, however there are different issues as nicely like colours, general design tone, and theme. Legibility purely issues a font being acceptable for readability, Legibility is a necessity for the textual content to be readable.

3. Line Size(Measure of Characters)

Line size is all about studying effectivity. It refers back to the measure of the variety of characters per line– referred to as CPL. Line size helps in sustaining higher studying pace. In response to analysis, too lengthy or too brief line size “decreases the studying pace”. Subsequently measure of CPL would improve studying pace. Customers truly bounce whereas studying somewhat than studying line by line, which implies a lot of the person truly skips a whole lot of content material. In such a scenario giving restricted however crisp items of data is an efficient choice. A rely of 100 characters per line is environment friendly for a median reader. All the time bear in mind customers by no means learn the content material they have an inclination to scan info that appears related to them.

Finest Practices For Utilizing Fonts

So this was all about typography, its components, and all the things associated to typography. In case you have understood all the things until right here it’s just about clear that you’re now aware of the ideas and fundamentals. However to truly implement these understanding a few of the finest practices also needs to be thought of.

  1. To put textual content or any written content material on a web site/app restrict your self from utilizing greater than 3 fonts directly. For freshmen attempt to follow just one font, until there’s any particular want of utilizing one other font.
  2. When utilizing a mix of fonts, all the time verify whether or not the fonts you will have chosen are going nicely with one another or not. For instance, one can use pacifico and Arimo or Nunito and Lora.
  3. Attempt to stability textual content, by not cluttering an excessive amount of info. Make web sites dense with high quality content material and keep away from muddle or creating a large number.
  4. Choose textual content colours that create distinction with the background in addition to inside a bit of textual content. to have optimum textual content legibility.
  5. Stability white areas round textual content, and graphics in order that the web site seems to be wealthy and ethereal.
  6. Use correct alignment, remember the alignment rules, and efficient use of left, proper, middle, and justify alignments.
  7. Deal with making a balanced textual content hierarchy to result in higher scanning of content material.
  8. Attempt to use the best methodology of capturing person consideration whereas presenting the data. Most delicate methods embody highlighting and utilizing italics, whereas being cautious when utilizing any animation to seize consideration.
  9. Choosing the right font dimension as per the display is all the time crucial and ought to be given equal emphasis as utilizing fonts. The proper font dimension makes the textual content legible sufficient to be simply interpreted. Following are some font sizes which is talked about with respect to display sizes:
    • Desktop(27 to 32 inches display): It’s best to make use of 16px of font dimension, as it’s neither too massive nor too small. 
    • Laptop computer(13 to 16 inches display): Font dimension various from 14 px to 16 px can be used; it might be optimum for laptop computer screens.
    • Android: Such units have given a minimal dimension of 12sp( stands for scale unbiased pixel). However it’s good to make use of font dimension between 12sp to 14sp as per display sizes.
    • IOS: These units have a textual content dimension of not less than 11 factors talked about within the tips, this dimension is legible to learn for iPhones, iPads, and apple watches.


We have now mentioned typography in each element. All the time attempt to give attention to typography whereas designing any product. It shouldn’t be missed out as 70-80% of our web sites/apps encompass textual content. As a newbie, when you undergo the entire pointers talked about above, you’ll certainly excel in typography.  Begin observing your environment, from a chocolate wrapper to stunning web sites. Get began with practising UI design frequently and sooner you’ll see that issues would begin falling into the proper place.

Associated Articles:



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments