Professional Documents
Culture Documents
PDF 24
PDF 24
14 mins read
Whether it’s on our phones, in books or on websites, we’re constantly digesting written
words. From instruction booklets to shop fronts, type is all around us.
We often reflect on the power of the written word, but rarely do we consider the
designer’s role in emulating the tone of the word or sentence.
Behind the scenes, a designer has taken the time to consider the relationship between
the look of the text and what the text says. In reality, different moods, atmospheres, and
Change cookies settings
even trends can be expressed simply through the type choice. But what actually is
typography—and why is it so vital?
Accept all cookies
In this article, we’ll lift the lid on everything you need to know about typography. We’ll
start with the definition of typography, including a brief history of its origins.
We’ll then address the benefits of good typography and the impact it can have on your
users. Finally, we’ll look into the different elements that comprise typography, and what
they all mean.
We use what
Here’s cookies to enhance
we’ll cover: your browsing and learning experience,
analyze site usage, and enable and improve site functionality.
1. What is typography?
2. Why is typography important?
UX UI Web Data Digital More UX UI
3. The different elements of typography
Design Design Development Analytics Marketing Categories Design Design
Fonts and typefaces
Contrast
Consistency
White space
Alignment
Color
Hierarchy
4. How to choose the correct typeface for your website
5. Conclusion
1. What is typography?
Let’s kick off with the basics: just what actually is typography?
Typography is the art of arranging letters and text in a way that makes the copy legible,
clear, and visually appealing to the reader.
It involves font style, appearance, and structure, which aims to elicit certain emotions
and convey specific messages. In short, typography is what brings the text to life.
To understand typography in 2023, it’s necessary to take a quick look into its
development:
Fast forward to 2023, where typography is mostly associated with both the digital design
world and print.
With the birth of the internet came a creative explosion of the art of typography.
Suddenly, web designers had an abundance of fonts and type options at their disposal,
making typography more visually diverse than ever before.
Good typography will establish a strong visual hierarchy, provide a graphic balance to
the website, and set the product’s overall tone. Typography should guide and inform
your users, optimize readability and accessibility, and ensure an excellent user
experience.
Unique, consistent typography will help you establish a strong user following, build trust
with your users, and help to carry your brand forward.
It’s important that your website is visually stimulating and memorable, and typography
plays a huge role in this process.
A typeface is a design style which comprises a myriad of characters of varying sizes and
weight, whereas a font is a graphical representation of text character.
Put simply, a typeface is a family of related fonts, while fonts refer to the weights, widths,
and styles that constitute a typeface.
There are three basic kinds of typeface: serif, sans-serif, and decorative.
Serif
As the visual example above demonstrates, serif typefaces are identified by the extra
marks at the end of letters.
The addition of these small strokes and elements give serif fonts an air of tradition,
history, authority, and integrity.
We use cookies to enhance your browsing and learning experience,
It’s no surprise, then, that you’ll see this “classic” style used for newspaper titles, for
analyze site usage, and enable and improve site functionality.
example, or for the font used in books.
Times New Roman, the Microsoft Word original font, is a serif font. It was replaced in
2007 by the sans-serif Calibri.
UX UI Web Data Digital More UX UI
Sans-serif
Design Design Development Analytics Marketing Categories Design Design
Just like the name suggests, sans-serif typefaces as defined by what they lack.
Without serif’s more traditional strokes and dashes, the sans-serif font family is seen as
much more modern and bold. As a result, it’s clear to read and when used in headlines,
grabs your attention more than serifs.
The CareerFoundry logo, for example, as well as the font used in this blog article, is
sans-serif. Popular sans-serif fonts include Helvetica and Arial, which is the default font
when you start writing in a Google Doc.
Decorative
Again given away by its name, the function of this typeface is aesthetic more than
readable. As a result, you’re far more likely to see these used in brand names, logos,
and short titles.
Walk around your local grocery or toy store and you’ll see decorative fonts jumping out
at you from every shelf. Just imagine trying to read an entire article written in them!
Decorative typefaces are excellent for allowing the user to show off even more
personality, feeling, and uniqueness with their font choice.
To keep the interface uncluttered and streamlined, a good designer will never use more
than three fonts —and keep decorative fonts to a minimum.
We use cookies to enhance your browsing and learning experience,
Most
analyzeUI designers
site usage, andwill pairand
enable serif fonts site
improve withfunctionality.
sans-serif fonts, such as putting main body
text in a serif font and putting your title in a sans-serif font, or vice-versa.
Contrast
UX like hierarchy,
Much UI Web Data
contrast helps to Digital ideas or
convey which More UX to
message you want UI
Design
emphasize Design Development
to your readers. Analytics Marketing Categories Design Design
Spending some time on contrast makes your text interesting, meaningful, and attention-
grabbing. Most designers create contrast by playing around with varying typefaces,
colors, styles, and sizes to create impact and break up the page.
While it’s ok to play around with levels of hierarchy to some extent, it’s good practice to
establish a consistent hierarchy of typefaces (one consistent font for headers, another
for subheadings) and stick to it.
White space
Often referred to as “negative space,” white space is the space around text or graphics.
It’s often overlooked and tends to go unnoticed by the user, but proper use of white
space ensures the interface is uncluttered and the text is readable.
White space can even draw attention to the text and provides an overall aesthetically
pleasing experience. White space often takes the form of margins, padding, or just areas
with no text or graphics.
Alignment
Alignment is the process of unifying and composing text, graphics, and images to
ensure there is equal space, size, and distances between each element.
Many UI designers create margins to ensure that their logo, header, and body of the text
are aligned with each other.
We use cookies to enhance your browsing and learning experience,
analyze site usage, and enable and improve site functionality.
When aligning your user interface, it’s good practice to pay attention to industry
standards. For example, aligning your text to the right will seem counterintuitive for
readers
UX who
UIread leftWeb
to right. Data Digital More UX UI
Design Design Development Analytics Marketing Categories Design Design
Color
Color is one of the most exciting elements of typography. This is where designers can
really get creative and elevate the interface to a new level.
Text color, however, is not to be taken lightly: nailing your font color can make the text
stand out and convey the tone of the message—but getting it wrong can result in a
messy interface and text that clashes with the site colors.
A good designer will know how to balance these three components to make the text
both eye-catching and clearly legible, even for those with visual impairments. Often,
designers will test this by viewing the text in greyscale (without color) and making tweaks
if the text is too dark or too light against the background color.
If you’d like to learn more about applying this effectively in design, check out our full
guide to color theory.
Hierarchy
Establishing hierarchy is one of the most vital principles of typography.
In an age of short attention spans brought about by social media, designers are urged
to be concise and create typefaces that allow users to consume the necessary
information in short amounts of time.
For example, if you have a line of copy with an exclamation mark icon at the beginning
that is in red and larger than the previous copy, this is a visual clue to the readers that
it’s a call to action.
The most typical example of typographical hierarchy is size: headings should always be
larger than subheadings and standard text.
We use cookies to enhance your browsing and learning experience,
analyze site usage, and enable and improve site functionality.
4. How do you choose the right typeface for
your website?
UX
Design
UI
Design
Web
Development
Data
Analytics
Digital
Marketing
More
Categories
UX
Design
UI
Design
Now that we’ve familiarised ourselves with what is typography itself as well as its
elements, let’s talk about the process of picking typefaces for your interface.
Choosing a font for your website is a lot harder than it first seems.
With so many different fonts and typefaces to select from, it’s easy to feel overwhelmed.
Making the right choice depends on so much more than just seeing what looks nice.
Here are a few key considerations:
It’s imperative that the typography reflects the personality of the brand or product. A
good starting point when faced with this challenge is to define the core traits of your
brand, and start to gather typefaces that reflect these traits.
Reflect on tone
It’s equally important to consider how the font harmonizes with the tone of the message.
For example, if you want to convey serious or important information, choose a less
stylized or decorative font that is both clearly legible and will limit distraction.
Can the text be legible without strain? Are the characters distinct enough?
Consider performance
One thing that many designers often overlook is choosing typefaces that are web
browser-friendly.
Commonly used font libraries such as Google fonts offer web-based font files that can
be rendered perfectly in a browser without any issues.
Pro tip: when downloading web fonts, never download more character sets than you
need to. This way, you’ll avoid excess weight!
Get inspired
If you’re not sure where to start, take some time to see what other people are doing.
Open your eyes to the typography that you see around you.
Can you notice similar patterns? Can you see good and bad examples of typography?
Even following typography hashtags on social media or looking up typography on
Pinterest will give you some good ideas of what’s out there.
Check out this guide on UX Collective or Adobe XD’s typography blog article for further
guidance and inspiration.
5. Conclusion
Typography is often overlooked, but it’s a crucial component of user interface design.
Mastering typography will see you well on your way to becoming a fantastic UI designer!
If you’re not sure where to start, why not head to your favorite websites and start making
a note of what typefaces they’ve gone for.
Keen to learn more about UI design? Check out these related blog posts:
FAQ
analyze site usage, and enable and improve site functionality.
1. What is typography?
Typography is the art of arranging letters and text in a way that makes the copy legible,
UX UI Web Data Digital More UX UI
clear, and visually appealing to the reader. Typography involves font style, appearance,
Design Design Development Analytics Marketing Categories Design Design
and structure, which aims to elicit certain emotions and convey specific messages. In
short, typography is what brings the text to life.
Typography can be dated back to the 11th century, during the innovation of movable
type. Before the digital age, typography was a specialized craft associated with books
and magazines, and eventually public works. The first example of typography can be
seen in the Gutenberg Bible, which kick-started a typography revolution in the West. Fun
fact: the style of type used in the Gutenberg Bible is now known as Textura, and you’ll
find it in the font drop-down menu on major desktop applications today.
Good typography will establish a strong visual hierarchy, provide a graphic balance to
the website, and set the product’s overall tone. Typography should guide and inform
your users, optimize readability and accessibility, and ensure an excellent user
experience. Not only will good typography enhance the website’s personality, but your
users will subliminally begin to associate the typeface featured on your site with your
brand.
The typeface you choose for your website depends on how you want your users to feel
when they first enter your website. Do you want to emulate a friendly atmosphere? Do
you want the site to feel high-end, welcoming, playful, or serious? It’s imperative that the
typography reflects the personality of the brand or product.
A good starting point when faced with this challenge is to define the core traits of your
brand and start to gather typefaces that reflect these traits. From there, you can begin to
notice a trend. It’s equally important to consider how the font harmonizes with the tone
of the message. For example, if you want to convey serious or important information,
We use cookies to enhance your browsing and learning experience,
analyze site usage, and enable and improve site functionality.
choose a less stylized or decorative font that is both clearly legible and will limit
distraction.
UX UI Web Data Digital More UX UI
Design Design Development Analytics Marketing Categories Design Design
2. Take part in one of our FREE live online UI design events with industry experts, and
read about UI graduate Florian’s career change to product design.
4. This month, we’re offering reduced tuition to the first 100 applicants—worth up to
$1,370 off all our career-change programs To secure your spot, speak to one of our
advisors today!
Jaye Hannah
Jaye Hannah is a freelance content writer and strategist, based between London and Lisbon.
She's worked in EdTech for over five years, inspiring career changers on their journey into tech.
When she's not writing, you'll find her whipping up new recipes in the kitchen.
We use cookies to enhance your browsing and learning experience,
analyze site usage, and enable and improve site functionality.
UX UI Web Data Digital More UX UI
Design Design Development Analytics Marketing Categories Design Design
UI Design UI Design
UI Design
What is CareerFoundry?
analyze site usage, and enable and improve site functionality.
CareerFoundry is an online school for people looking to switch to a rewarding career in tech. Select
a program, get paired with an expert mentor and tutor, and become a job-ready designer,
developer, or analyst from scratch, or your money back.
UX UI Web Data Digital More UX UI
Design Design
Learn more aboutDevelopment
our programs Analyticso Marketing Categories Design Design
UX Design About Us
UI Design Job Guarantee
Web Development For Businesses
Data Analytics Media
Digital Marketing Jobs at CareerFoundry
Product Management Become a Mentor
INTRODUCTORY COURSES
CareerHub
Hire our Grads
Intro to UX Design
Career Services
Intro to UI Design
Intro to Frontend Development
Intro to Data Analytics
We use
Intro cookies
to Digital to enhance your browsing and learning experience,
Marketing
analyze
Intro site usage,
to Product and enable and improve site functionality.
Management
ADVANCED COURSES