Master Power Apps Typography With These 5 Simple Steps

Introduction

You've most likely never thought to deeply into text labels and typography within your Power Apps right? But this simple oversight can cause a disconnect between your app content and your users. In this article, I'll cover 5 simple steps to ensuring consistent typography across your app.

What is Typography?

When designers and artists talk about Typography, we're talking about the technique of arranging text in a way that is better readable, stylized and visually appealing and relevant to the application you are building. We do this by adjusting properties such as font, font-size, font-weight, spacing and justification.

Typography can go much deeper than the options we have at our disposal in Power Apps, but we'll cover techniques to enhance what is available out-of-the-box and how we can exploit HTML for more customizability.

Remember that these tips are to guide you and shouldn't necessarily be taken as fact. Every Power App has different layouts and visual structure, therefore every app should be configured to best serve its application. The key takeaway is that what ever you choose, should remain consistent throughout.

Understand The Human Eye Behaviour

So, how do our eyes read? It sounds like a silly question, but understanding this can drive a huge impact in how our users navigate, read and find important parts of our app.

Study shows that in most western cultures, before we even begin to read and comprehend words, our brain and eyes takes a microsecond scan of what we are about to read. It's also how most humans are able to reconstruct images even after only seeing the image for a fraction of a second.

Try it yourself! Close your eyes, pick a point in your surroundings and flash your eyes open and shut (like a reverse blink). How much detail could you recite? Surprisingly quite a lot.

The detail you caught is likely high contrast objects, where colours and differences in light can enhance an object. We can leverage this idea when building Power Apps.

Typography Tips

Font Color

Create high levels of contrast to make your text stand out. Dark text works well on light backgrounds, light text works well on dark backgrounds.

Tip: If you are using the Power Apps themes for your app, you can leverage the formulas:

App.Theme.Color.Lighter80

App.Theme.Color.Darker80

to create good contrast levels whilst maintaining the subtle vibrance of your theme. This will take your primary theme color and apply darker or lighter shading maintaining its Hue value.

Alignment & Spacing

Create reasonable empty space between text elements. This ensures that dark areas of your app are clearly separated from lighter areas and that text elements do not feel cluttered and unreadable.

Consider setting the justification of titles and headings to be centered or right-aligned, creating plenty of space and separation between headings and paragraphs.

Be careful not to create too much space that you create a sense of disconnect between sections.

Ensure moderate space between textual elements. You can achieve this consistently by placing text controls within a vertical or horizontal container and setting the Layout Gap property of the container. Here are my recommendations:

Between Headers & Body Text: 10-20 pixels
Between Paragraphs: 10-15 pixels
Between List Items: 5-10 pixels

I've included a range as I mentioned earlier, every app is different and requires its own style. Try out these different values and see what works well for you.

Font Weight

Utilize Font Weight to break up large quantities of text. Font Weight can add depth and contrast to your textual elements, allowing users to quickly identify key areas and important information in the app.

Remember that when using Font Weight, using lighter weights can be equally as effective as bolder weights.

Font

When using Fonts, try to stick to a maximum of 3 fonts and use them sparingly. Keep your font sets tied to specific types of of text. For example, Headings should use the same font, equally the same with other text elements in your app.

Unless your app has a very specific stylized look, avoid calligraphy style fonts. These are not idea for accessibility and readability and will often lead to users closing the app before they've used it. Sans / Serif typefaces work really well with screens, are clear and free from pixel anti aliasing.

Remember consistency is key, however utilizing different fonts to create subtle breaks in text can bring a new level of life to your apps.