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 support@xmpro.com
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
Last updated