You will often want to master typography as it is a foundational component that will work well with other elements such as icons and UI controls. Establishing your typography early is important. Think of the amount of information that you will communicate to users via type. Let’s see how to create typography guideline
What does typography mean in mobile or web UI design?
Typography is the art of arranging typefaces to make the copy readable and scalable for the audience. Typography that is visually appealing can sometimes catch the user’s attention and increase the interface conversation rate in mobile and web design.
It’s not enough to choose a beautiful font. This decision is based on many aspects of the UI.
Basic typography elements
Selecting typefaces
When choosing typefaces for screen use, there are many factors to consider. It may be necessary to work with marketing and brand teams in order to determine the best way to integrate your brand’s fonts into your system. Typefaces are a great way to subtly communicate the tone and personality of your digital experience.
You may choose to use a unique typeface for headlines and other elements that are not used as often. You may choose to use a legible font for the majority of the typography at smaller sizes. When performance is important, design systems often use system/native typeface stacks to avoid loading web fonts. (As seen with the Shopify Polaris System). You may decide how to deal with these issues depending on if your system is supporting a product website or a marketing site (where brand identity may be more important).
Many factors will influence your choice, but it’s important to strike the right balance of personality, performance and screen legibility.
Font size
You should only use the minimum amount of typefaces that the system needs. For more information, you can check out the Apple Guidelines and Google Material Design. For example, Google Material Design uses eight different sizes.
Combining similar sizes to create one size is the most efficient. According to my experience, an interface change of just one PX can be minimal.
Font Weight
You should reduce the number of typography weights if you find that there are too many. I think that a reasonable weight range is 2-3, such as normal, medium and light. However, it depends on the particular product.
If you have five different weights, for example: Normal Medium, Semi-Bold and Thin, you can combine these to make Normal, Light and Medium. Medium and semi-bold are reduced to medium thin, and light is reduced to light. Normal will remain.
Create the typography system
When building a typography, it’s important that you consider the typefaces you plan to use. For example, Open Sans or Lato. You should also think about other typography features like size and weight. You can combine a text and display font if needed.
Build Tokens
Give each list a name to ensure that both the designers and developers understand the concept.
To ensure that everyone is on the same page, it’s important to choose names for the tokens with developers and designers.
Use the names of the different design systems. You can check out Material Design from Google or Carbon by IBM.
If you want people to know that it’s the typography system of the company, include the name of the company in the token name. If the company is Sunlight, then instead of $title you can use $SL_title.
Edge Cases
There are some font styles that you cannot match with another typeface, so making a token to represent them is not logical.
Imagine, for example, that you find two places where your system uses the size 120PX. You don’t think they’ll be used in the future, based on your knowledge of the system. You can’t change them, however, because they could break the design. You can therefore leave them in place without changing them.
You should communicate these cases clearly. You can say that they will remain in the product but designers and developers are not allowed to use them.
Test on Figma
You should test the typography guidelines in Figma once you have them ready to see if they break the design of your product. You should do the following:
- Build the pages as you would in Figma.
- Then, copy them and replace the typography with the new guidelines.
- Copy the old and new design in PNG format
- Add the Difference filter to one.
- Place them on top of each other.
- There will be a noticeable difference where there is no dark color.
You will then be able understand the risks and if there are any significant differences. If you notice a large difference, it may be worth adding more options to your typography system.
There is no magic formula, one solution or recipe that will work for everyone. Think about what’s best for the product.
Test in development
Once you are confident that the new typography will work, you should test it in your development environment.
The developers will ultimately take care of this, but I recommend creating a clear description of how they can implement the changes. You must go over it with them before they start working to make sure it’s completely clear.
Release of the changes
You can now release the changes once you are confident that you have completed the testing. This process is not without risks. The people involved in the project need to be made aware of them.
This can be a good approach if the developers have another way of reducing the risk, for example by releasing the changes at one location in the app before implementing them in other places. It is important that you and the developers have a plan.
Create a library using Figma, and inform the UX team of the changes.
It is important to create the library style and provide clear instructions on how to use the system once the new typography is launched.
Documentation should include clear instructions on font family, typography, typeface hierarchy and text size.
You can then educate your design team on the changes to ensure that they are successfully adopted and integrated into their workflow.
Inform the company
It would be useful to have some sessions with different stakeholders. This is especially true for developers who are working on the system.
What are the things you should consider when building a typography?
If you are designing a typography for an existing product, it is important to be organized and systematic. It is important to test any changes that you make, as they can have a negative impact on the UI of the product.
This process can be stressful and difficult, but having as many tests you can run will reduce stress and increase your confidence. The larger the product is, the more testing you will need to do.
Get the project approved
First, you should get everyone on board and agree to the project’s need.
The PM and developers need to agree on this in order to get an agreement about the resources and needs of the project. Designers can create a fantastic system, but developers won’t develop it until it becomes a priority.
You should also be prepared for a NO. Prioritizing such projects can be challenging because they take a lot time and effort.
Group the typography
Once you’ve created a list, you can begin grouping the typography. You will have to group many lines of code. Automate this process instead of doing it manually.
Ask the developers whether they have software or a method for clustering automatically. I would recommend organizing typography according to size, type and weight.
After you have completed this process, you’ll be able to see a list of the most common typography sizes used by your system. This will help you decide which typography you want to keep and what you need rid of.
How to communicate with multiple stakeholders?
It is important that, as soon as the agreement is made to begin the project, you share the information with the different employees in the company. Be communicative, and tell people in the company what the project will entail, why it is important, and how to handle it.
Analyze typography in the HTML0 code
Ask the developers for a complete list of the typography used in the system. There will be a long list, but there is a way of organizing it.
It’s important to remember that while looking at the Figma file is good, it doesn’t mean you know what’s inside the code. It’s important to know what is in the code, not just what is in the Figma file.
How important is typography in UI design?
Typography is a powerful tool in UI design that can be used to engage and persuade users to stay or purchase something.
Instead of reading the text line-by-line, users scan the page first to determine if they have all the information they require. A scannable, well-organized typography is what will engage and impress potential users or customers at this point. After users have stayed on the page, they will need a typography that is clear and informative to convey product or service details to them. This will encourage them to make an order. When designing UI, typography is a crucial element.
Why is good typography important?
Typography is not just a tool for visual communication when designing a mobile app or website. This tool has many other benefits as well:
Improve UI legibility, readability and accessibility
Typography is a powerful tool for delivering page content visually. It makes it easier to read, scan, and navigate. It makes it easier for users to learn about the product and service.
Create a consistent mood and tone
Typography can also set the overall mood or tone for an interface. When you use a cartoon typeface with warm colors, soft strokes and bold strokes for the page titles or banners, you can add fun to your page. When you select a simple, plain and serious typography for your app, it seems to convey a serious tone.
Stand out from the crowd with your app
High-quality typography, like other elements of UI design often have a professional appearance, and combine the brand vision with color and concept. These features help you stand out. Typography that is unique and memorable can also be used to impress users.
Boost product sales
Typography design that is successful encourages users spend more time in your app, and helps them find the information they are looking for quickly. It increases sales of the product or service by reducing distractions for the customer.
No matter what, your team and you should always collaborate to improve typography.
Graphic Design services :
Temis Graphic Designing Services enable you to improve the Visual identity of your business and let your branding process goes on. With our Graphic Designing Services, you can influence your clients and let them feel your brand personality; due to good brand awareness, you prove to people that your business can handle a problem.
Do you need graphic design services? Contact Us now!
