Typography: the basics and beyond in UI/UX design
👋🏻 Hey buddies. In this article, we’re going to explore typography concepts: from the basic terms to guidelines on building a typography system. Plus, because you’re so awesome — best practices from my personal experience included 👀
Topics covered: #fonts, #icon-fonts, #variable-fonts, #font-properties, #use-cases
- Typography overview
- Fonts and plugins
- Definitions
- Best practices
- Summary
Typography overview
Generally, we assume the typography to be the text & symbols and it’s style — font (or also font-face, font-family). A visual representation of speech that humans use to communicate and understand each other 🤓
Let’s take a look at what typography consists of in terms of UI/UX design — the atoms of typography. (in brackets I’ve listed relevant HTML tags)
Titles / headings (h1, h2, h3, h4) — these are used to show the context of a block or page, build visual hierarchy.
Body text or paragraphs (p) — general information that you’re reading, normal text, just like this that you are reading right now.
User Interface text (inputs, buttons) — other than content, we also define and use text for buttons, navigation, forms and many-many more different elements. & Other text (<a> and <span>), this could be either for articles, like italic style for quotations (span) or an inline link (a) or pretty much anything, that doesn’t fit into above atoms.
Icon fonts — another thing that is not as widely known or popular, but that actually worth to know and use. Instead of searching, downloading and updating one icon per time you can actually get a font that already has all type of icons and is completely maintainable: the size, the colours and even the style (outline, lines, glyphs, duo-tone etc.)
There are many icon fonts on the internet, for example commonly used Google’s material icon font, or you can also have a look at font awesome and actually you can create one of your own, using a service like IcoMoon.
How to Use: Simply type the icon name, and the text will transform into an icon
Fonts and plugins
The first thing we can do, other than typing a text — is to decide how it should look, and google fonts gallery is probably one of the best places to visit to preview and pick the fonts for your project.
A few important things for your, to consider:
- For website design, please use no more than 2 fonts (1 font — best).
- Variable fonts are the future. Check this website to preview & try.
- Less is more. At the beginning of a project, it is ok to define just 1–2 font styles. This way you can keep your project consistent and later update it with ease. I usually have either 1 base style 16px for all, or title + paragraph
Plugins
Well, figma doesn’t have font preview by default 🤡, therefore you basically have 2 options:
- preview and pick within Google fonts / other service
- add plugin, preview within figma file, see below 2 most popular
Preview fonts plugins
Better Font Picker — plugin to preview the fonts inside Figma file.
Font Scale — Generates all typography sizes for your project within few clicks
Definitions
General and most common things people do with text (+ definitions):
Font-family — is a font as a whole: consist of one or more font-faces or in other words, styles (light, regular, bold, italic etc.)
Font face or weight— is a single style of a font.
Font size — is a size of a font, typically for web px (pixels) are used.
Line height — is a space between 2 or more lines of a text.
Letter spacing — is a space between each letter
Paragraph spacing — is a space between paragraphs
Text alignment — property that defines how the text will be aligned.
After tweaking and playing around with texts, at some point of life, designer usually figures out that to have a consistent typography is a must, as well as to have an ability to quickly maintain it.
This is when the styles come and help. Style is basically a set of rules which gets defined when you create it. Then you apply it to a different object.
However, having too many rules, is no way better than not having the styles at all.
and lastly for the terms, let’s review display behaviours:
Auto width — great for menu items, buttons, inputs and almost everything that is used inline (please don’t paste large texts tho 😅)
Auto height — is in 99% the other alternative to auto width. Whenever the text reach width of card, the words do a wrap.
Fixed size — great to use when you know exactly what you want: a large text block could be used to display some dynamic data, while being limited to specific constraints. For more common use-cases would recommend auto height instead.
Best practices for UI/UX design and Web
General typography suggestions and use cases that I recommend 👍🏻👍🏻👍🏻
- Always test your typography — on real devices and sizes, in colours it is expected to be used.
- Don’t use #000000, instead use a lighter option, like a #111111. Maybe you won’t even find a difference, but there is (contrast).
- Always make sure that your font-sizes are even numbers. Paragraph text may not gain much harm, but UI elements like buttons or inputs — should always be perfectly vertically-aligned.
- If using more than 1 font: split the typography by 2 categories.
Can also split by font weight, if 1 font, usually in this case titles are bold, body — regular.
1) Titles/headings font
2) Paragraph/other font - Always make sure to have good line-height, over internet some people state 140% line-height works great. I would say to test it out first and to keep in mind: the bigger the font-size, the higher line-height would be required. Each font can and most-likely will display differently.
Mid-level: Setup Typography or Type system (styles)
- Define Naming conventions:
- By Size (XS, S, M, L, XL),
- Semantic (h1, p, input)
or Descriptive (header navigation, button label) - One or multiple levels of headings
- Paragraph text
- UI text: only if different to paragraph
- Additional/Extras: only if it’s there’s a real need.(don’t make it too complex)
If the amount of styles exceeds 4, it is better to group the styles. Within figma, you can create style group by simply naming the style as follows:
GroupName/StyleName
Typography properties to update separately: Colour, Justification, Alignment, Resizing. — Create & apply styles for this cases.
Advanced, crazy dudes 🤪
- Always define text alignment and behaviour depending of type of block (component/symbol) you’re designing.
E.g. Text button, would be aligned to the center, with auto width and vertical center alignment. - Line-height: Rules for headings and paragraphs. Test the line-height for different cases.
👉🏻 Try formula font-size *(multiply) 1.5 as a starting point of your custom vertical baseline setup.
👉🏻 Consider optical effects, primary colours and contrast - Setup a baseline typography grid, for example google uses 4pt baseline grid. In addition to it, adding a vertical space typography rules would do the thing. (For e.g. make h1 to be 32px top/bottom margin, h2 to 16px etc.)
- Modular type scale: select base size, define ratio (Font scale plugin, mentioned before, works just great for this)
- Configure resizing behaviours: how the text layers are going to shrink or grow to accommodate theirs contents.
- Usually, at least 2 setup, if any: titles and paragraph.
- Best to implement within real flow: component or specific feature.
- Possible use-cases: with auto-layout.
Summary 🌝
Hope you’ve enjoyed reading my article and learnt something new.
Would love to hear your feedback and suggestions in the comments ❤
