3.2 Typography - XMPRO UI Design Basics

To get access to the full course and resource links mentioned in the video, sign up at https://courses.xmpro.com.

Need help with creating your XMPRO apps? Send an email to [e-mail]

Go to https://xmpro.com if you want to learn more about how you can build real-time applications with our Event Intelligence Platform.

Transcript

in this lesson we're going to look at

how to style text or

typography in your user interfaces

the first thing you need to know when it

comes to styling typography for your

interface

is that you need a typographic scale a

typographic scale

is classically known as a harmonious

progression of font sizes

but it's almost like the notes on a

musical scale

this will help you to create a visual

hierarchy and consistency in your design

so there are multiple ways to create a

typographic scale

the way that i like to do it is based on

a font measurement called

an m let's say that we've chosen 16

pixels as our base size

this is going to be 1m 2m

will then be 32 pixels in this scenario

so in the graphic on the right you'll

see that we're using a typographic scale

of 1.25 so 16 pixels is going to be the

body text size

then the smallest heading is going to be

16 pixels

times 1.25 in this case

that's going to be 20 pixels

the second heading size is then going to

be 20 pixels

times 1.25 which in this case is going

to be

25 pixels so you keep going up and down

the scale to give you enough font sizes

to choose from

but why not just choose font sizes based

on what you think will work

well the main reason to use a

typographic scale is that it creates

consistency between different heading

sizes

now if you're looking to create a

typographic scale for your ui i

advise using a table like this one on

the slide

on the left you add the name of the

specific element that you want to add to

your scale

i typically do it smallest at the bottom

to largest at the top

the second column has the size in pixels

and

in m's and the third column has the font

weight

since some of the items in your

typographic scale might be bold

especially headings

then i also like to add a column for

usage where i write down

where this particular item is going to

be used in the interface

there's a great free tool to help you

create your own typographic scale

it's called type scale and all you have

to do to get started

is enter in a base size in pixels

usually we're going to choose 16 pixels

next you're going to select the scale

this will then determine how big the

contrast is between the elements

so you'll see that we have a golden

ratio

perfect fifth minor third etc there's a

whole bunch of different options for you

to choose from

now you'll see if i choose golden ratio

there's going to be quite a big

difference between elements in this

typographic scale

i prefer the major third scale because

it gives enough differentiation between

elements

but without becoming too big to be

practical

now we're going to look at choosing the

right typeface

so what is a typeface well it's actually

the correct

term for what most people would simply

call a font

a font also includes the size

and the style of a typeface so when you

create a ui design

you want to choose a typeface that is

easy to read

and that works in various sizes the most

important thing is that you have to use

it consistently

throughout your ui i want you to

remember back to the worst website

ever that we showed in the first video

this was a great example of

inconsistent font usage i recommend that

you use

a maximum of two typefaces in your ui

design

you can choose between serif or sans

serif fonts

now i don't recommend using scripts or

handwritten fonts

because they can be quite difficult to

read

so what is a serif well serif refers to

the small line or the stroke

that attaches to the end of the larger

stroke in a letter

like the bottom of the blue a sans serif

simply means without serifs examples of

serif fonts

are times new roman and baskerville sans

serifs are typefaces like

ariel helvetica and verdana

serif fonts tend to look more

traditional and they're often used in

newspapers

but if you want a more modern look to

your user interface

i recommend using a sans serif

consistently throughout

so how do you choose font sizes and

weights

well 16 pixels is a good rule of thumb

for both desktop and mobile body text

i don't recommend going any smaller than

this for large sections of text

you can use larger font sizes in your

scale for things that need to be

glanceable

like headings and i would also recommend

steering away from condensed

or thin typefaces another thing to avoid

is using

all lowercase especially if you're using

small font sizes

usability studies have shown that

readability actually goes down

when text is written in all lower case

finally use bold sparingly to emphasize

key areas of text a good example of this

is to make

cards and page headings bold and have

most of the other text on your page

the normal font weight so let's take a

look

at text alignment as i mentioned in

a previous video on visual hierarchy

left aligned text is generally

easier to read than center or right

aligned

this is particularly true in countries

that read from left to right

so here's an example at the bottom of

the slide which one reads easier to you

now let's look at line spacing the web

content accessibility guidelines which

also include the contrast ratio

recommendations

recommend setting your line height or

line spacing

to at least one and a half times the

font size

so what does this mean well if you look

at the examples below you'll see that

the font size is 16 pixels

with one x line height so the line

height for the text on the left is also

16 pixels one and a half times the line

height is going to mean

that the line height is now 16 pixels

times one and a half which is 24.

you'll see an example of this on the

right this adds more breathing room

between text

and also helps to improve readability

the final thing to consider when you're

styling your ui

is to choose a line length that is easy

for users to read

the number of characters in a line has a

big influence on readability

the optimum length also depends on the

device that the user is using

mobile devices have a shorter ideal line

length than desktop

but between 45 to 80 characters is a

good range for all devices

on the left is an example at 71

characters per line

the text on the right is over the 80

character recommendation

and you'll notice that the lines become

too long and quite difficult to read

join me in the next lesson to take a

deeper look at how to use

white space in your interface designs