Typography is the art of capturing language in a visual form. Typography involves the placement, size, and style of words on a page or screen, and it is an important component of the user interface design. Here are some typography best practices for UI Designers.
What is Typography?
The arrangement of characters on a page or screen is known as typography, and it has three basic functions in UI design. Typography creates a visual hierarchy, letting users know where to look first and what information is the most important. Good, clean typography builds trust in the product, and it also identifies and supports a brand. When it works well with other design elements, typography helps to create a harmonious and balanced appearance.
Typography Basics
Typography is both an art and a science. It is made up of typefaces and fonts. Typefaces are a group of fonts that all relate to each other (also known as a font family). Fonts are the collections of individual letters and pieces of punctuation that make up a typeface. Fonts come in different sizes, widths, and weights, but they are all in the same typeface style, so they can be used together to create an attractive design.
Typesetting Terms
Working with text and typefaces is called typesetting. It is important to understand a few terms before you start designing. These have to do with the appearance and placement of characters in text.
- Kerning—This refers to the space between characters within a word. Too little space makes it difficult to tell what the word is and leads to confusion and sometimes unintentional hilarity.
- Tracking—This is the amount of space between the words.
- Leading—Rhymes with ‘breading’ and refers to the spacing between lines of text.
- Serif—This is a small line attached to some letters in some typefaces. Some common serif typefaces are Times New Roman and Georgia. Some popular sans serif (no serif) typefaces are Helvetica, Futura, and Ariel. Sans serif typefaces can feel cleaner and more streamlined, but the serif ones can give a feeling of authority or gravity to text.
Working with Fonts
Here are some general guidelines for typesetting digital products.
Clear Communication
Don’t use too many typefaces on a page. A rule of thumb is not to use more than three typefaces in a design, but beginners should stick with one. Start with choosing a typeface for the body text and then choose typefaces for the headings and other elements. Use a font comparison tool to get an idea of how they look together.
Visual Hierarchy
The size and weight of fonts along with element placement create a visual hierarchy for your design. After that, use a larger size for the most important pieces of information, like main headings, and subheads should get progressively smaller. This also improves the accessibility of your design by increasing scannability.
Readability is Key
The first rule of typographic design is that all text must be readable. If text is too small, users will be more likely to abandon your app. Eye strain is not part of a pleasant user experience! Text that is too large can be a problem as well because it creates an unbalanced, unharmonious design.
One particular design challenge is that type size needs to be different for desktop designs as opposed to mobile apps. Adobe recommends using a font size of 16for desktop body text and 11-14 for mobile. Be sure the text can be adjusted if readers need to make it bigger. Line length combines with font size to affect readability. The recommended line length for screens is between 50 and 80 characters.
Wide Open Spaces
Avoid large blocks of text in designs because users will often skip past them. They look too much like legal terms and conditions and nobody likes reading those. Break up paragraphs with white space to reduce pressure on the reader.
DON’T USE ALL CAPS
With the exception of major headlines, using all capital letters beyond one line of text is not a good idea. It is difficult to read and makes users uncomfortable. A growing perception on the internet is that using all caps is perceived as pushy and aggressive.
No Crowding
No matter how much you want to get all of that text into that box, minimizing the space between lines to do that is a bad idea. Too little space between lines feels cramped and is difficult to read, which leads to users abandoning the site.
Color Choice
It is tempting to use exciting colors for text, but basic black on a light background or white on a dark background is your best bet. Be sure that there is sufficient contrast between the text and the background so that users can read it easily.
Adobe XD
Adobe XD is a digital design tool for mobile apps and websites. XD is part of Adobe’s Creative Cloud and works well with other CC apps like Photoshop, Illustrator, and Animate. Typesetting is done through the assets panel with many default typefaces to choose from. XD has many repeating features that make your workflow move faster, and also includes collaboration features that make it easy to share and test prototypes. You can run XD on both macOS and Windows. XD is available through a Creative Cloud subscription. After a 7-day free trial, a subscription to XD on its own is $9.99 per month or $52.99 for the full Creative Cloud collection.
How to Learn UI Design
If you would like to learn how to use software like Adobe XD to switch to a career in UX or UI design, one of the best ways to do that is to sign up for classes. You can choose classes that meet in-person or online to learn XD, Photoshop, and Illustrator. Some people prefer to attend brick-and-mortar sessions when learning new information, but that isn’t always available. Live online classes have a similar set-up with a real-time, remote instructor who can answer questions and take control of your monitor—with permission—to show you how to do things. Training is part or full-time and available weekdays, weeknights, or weekends.
The best way to prepare for a career shift to a field like UX or UI design is to enroll in a bootcamp or certificate program. These are intensive training courses that run from a few weeks to a few months and another plus of training is that you will leave class with a professional-quality portfolio that you can show to prospective employers.
Conclusion
It’s easy to take UI design classes and start a new career. Choose between in-person sessions in NYC at Noble’s location or sign up for live online UI design courses and attend from anywhere. Find UI bootcamps in your areaand get started in a new direction today.