# data[].attributes.attachment_link.readable_text
Visual literacy refers to the ability to successfully interpret and use images. We derive meaning from a great deal of visual input in our daily lives - something that has increased significantly with the rise of digital media and technology. Today, our communications are more peppered with visuals than ever, including emojis, memes, profile pictures, advertising imagery, etc.

Many jobs roles include application of visual literacy skills - from manipulation of imagery in creative media and design arenas to representing data in a financial or scientific context. Being able to effectively interpret visual information is a key skill, impacting many areas of our professional and personal lives. As educators, it is useful to consider how you might encourage and utilise these skills in the classroom.

In this article, we are going to explore what visual literacy is, why it should be encouraged with regards to teaching and learning, and provide some suggestions as to how it can be fostered in the classroom.

What is Visual Literacy?

Visual literacy is the ability to make sense of a whole range of visual information - essentially to be able to 'read' visuals, appreciating and being able to interrogate or analyse both literal and inferred meaning. It also refers to effectively using images to communicate meaning. Just as spoken and written language have receptive and expressive elements, so does visual language.

James Elkins, The Concept of Visual Literacy and its Limitations

Visual literacy, and the skills associated with it, can aid learning in all areas of the curriculum. It is an important concept in terms of art and design but it also has wider reaching implications.

In today's classrooms, it is likely that you will be engaging with children's visual literacy as part of your general good teaching practice, in the following broad ways:
Visuals Created for Learners
You are most probably creating visuals for children and young people to interpret, therefore engaging their visual literacy skills, in a range of contexts. This could be in terms of classroom organisation (for example, photo labels for pre-school children showing where to find equipment), visual learning aids (for example, story mountains) or ways of presenting lesson content (for example, slide presentations, illustrations, photographs, sketches, models, charts, film clips, graphs or diagrams).

In some circumstances, we are aware of the need to accompany these visuals with direct teaching in terms of how to interpret them - for example, you would not expect a pupil to be able to successfully interpret a pie chart without previous input.

However, we may take for granted the visual literacy skills that students need to employ in order to fully access some of the visual content we are using. We might plan to use a photograph as the stimulus for a piece of creative writing, for example, without fully considering whether the children have the visual literacy skills necessary to get the most from the activity.
Visuals Created by Learners
Visual literacy will also be demonstrated in how learners effectively create and use visuals to communicate meaning.

For example, it is good practice to offer a range of ways for children to present or record their learning. (This can also be a particularly powerful tool in supporting children who are neurodivergent or have special education needs and/or disability.) This might include creating a presentation, drawing a concept map, recording a video, producing a labelled diagram, etc. These all rely on visual literacy skills - in this case, manipulating those skills to express meaning.

Examples of Visual Literacy Skills

As with reading and writing the written word, a great many skills work together to establish a good level of visual literacy. Just with word-based literacy, a student's visual literacy skills will develop and deepen over time, given valuable and relevant opportunities to learn and apply them.

Encouraging visual literacy in the early years and building on this throughout the key stages will help to develop visually literate adults.

Based on the description of a visually literate adult by The Association of College & Research Libraries ( ACRL), visual literacy skills include the ability to:

Interpret images.

Analyse the meaning of images.

Evaluate images and their sources.

Use images and visual media effectively.

Design and create meaningful images and visual media.

Understand the wider context surrounding the creation and use of images and visual media - including ethical, legal, social and economic issues.

Depending on the age group and subject(s) that you teach, you may embed these skills into your teaching practice and lesson planning in different ways and to different degrees.

Why Should I Encourage Visual Literacy in the Classroom?

There are many reasons why it is beneficial to consciously encourage visual literacy in the classroom. These include:
To develop a life skill
We live in an image-rich world. From being able to follow instructions to construct flat pack furniture to recognising that images on social media are carefully curated to choosing an emoji to accompany a message, visual literacy skills will not only be beneficial in an educational context, but also in adult life.

Being visually literate contributes towards having good communication skills. A 2020 LinkedIn survey found that communication is the most in-demand skill for today's job market.
To unlock other learning
Visual literacy is not only a skill to learn in itself but it is also a means of acquiring other learning. The government's Reading Framework points out that English is not only a subject in its own right but a means of delivering the curriculum. Likewise, visual elements accompany the written aspects of the curriculum and being visually literate means that children can draw meaning from visuals to aid their learning in other areas.

This includes, for example:

Gathering information from charts, graphs and diagrams in maths or science.

Interrogating visual source material, such as photographs or posters in history.

Reading and constructing maps in geography.

Analysing creative visuals in art, drama or design.

Taking the time to explicitly develop visual literacy skills will mean that visual elements of planned learning across the curriculum will have more meaning and impact for the learner.
To support verbal language development
Using accompanying visuals - images, signs or gestures - can support speech and language development in young children as well as provide support for those whose first language is not English.
To support wider literacy skills
Visual literacy can be used to help teach and reinforce reading comprehension. Using visual texts (including films, adverts, picture books, etc), or the visual elements of written texts, as a focus for comprehension activities can be both engaging and impactful.

Similarly, encouraging visual literacy can have an impact on writing, as it can be used to stimulate and strengthen a student's imagination. Using visual material (including photographs, illustrations and film clips) as a stimulus for writing can produce excellent results. However, you should apply an adaptive approach to assess your learners' current visual literacy skills when planning the activity, and build in opportunities to model the activity.
To encourage critical thinking
Visual literacy can strengthen critical thinking skills (Thompson, 2019). As well as being a desirable academic skill, critical thinking also has a large role to play in safeguarding, particularly in terms of online risk. For example, children should be taught to think critically about the imagery they encounter and interact with online.
To support children with special educational needs and/or disabilities
Many intervention or support strategies for children with SEND include visual elements - such as visual timetables, feelings boards and image-based Speech and Language interventions.

Building in more opportunities to utilise visual literacy can form part of the reasonable adjustments that you should make to support children's individual needs. For example, children who are neurodivergent may find visual information more accessible than resources that are text-heavy.

Teaching Visual Literacy

Your strategies for teaching visual literacy will vary depending on your cohort. The following provides some ideas that might be helpful. These techniques can be applied to any visual input (including those presented alongside written text) and can be carried out as a stand alone task to improve visual literacy or as part of wider lesson objectives.
Selecting visual input
The visuals that you use could be moving or still images. Think about incorporating some of the following:

Short animations - Pixar shorts such as 'For the Birds' or 'Bao' are rich visual resources around which you can base whole literacy topics.

TV adverts - these allow you to look at how images are used to persuade or carry a message.

Print advertising.

Posters - this can include movie posters, historical propaganda posters and public health posters.

Artwork - works of art can provide excellent stimulus.

Stills from films - take a 'snapshot' from a film to explore.

Stills from computer games.

Photographs - historical photographs can be particularly interesting to analyse.

Picture books - these should not just be considered as suitable for only younger children. There are many excellent picture books that you can use when teaching older students - for example 'Window' by Jeannette Baker, 'The Lost Thing' by Shaun Tan or 'Voices in the Park' by Anthony Browne, to name a few.

Graphic Novels.

Memes or gifs.

A wealth of visual literacy resources can be found on The Literacy Shed website.

The more variety you incorporate, the more opportunities you will have to develop, and build on, those visual literacy skills.

Receptive Activities

When exploring any of these visuals, you will want to scaffold the activity through questioning. Simply presenting children with rich imagery and asking them to describe it is not going to yield the best results.

Depending on the activity and your desired outcome, you might want to ask questions along the lines of:
Literal exploration

Who or what can you see?

How would you describe the way the character/setting looks?

What happened in this section of the film/animation?

What did X do?

What is this advertising?

Inference

What do you think the character is feeling? What clues can you find to this in the picture/film?

What do you think might have happened just before this?

What do you think might happen in the next shot?

What message do you think the filmmaker/author/artist is trying to convey?

Evaluation

How does this make you feel?

What do you think the artist/author/filmmaker wants you to feel, and why?

Do you think this is a good choice of image/illustration?

Expressive Activities

There are many ways you could provide your students with opportunities to apply visual literacy skills when generating their own work. These might include

Creative writing based on the particular visual input. This could include a re-telling of a story, writing a story inspired by the image, a diary entry of the character pictured, a setting or character description, writing the next episode or an alternative ending.

Creating their own concept maps or knowledge organiser of current topics across the curriculum.

Creating visuals from written stimuli. For example, reading a character description and sketching the character.

Creating a multimedia presentation in any subject for a relevant topic.

Visual literacy is embedded into much of good teaching and learning practice, just as it is within our everyday lives. By consciously considering how you are using visual literacy and how you might enhance the visual literacy skills of the children and young people you work with, you can optimise the value of those learning experiences.
Further Resources:

# data[].attributes.attachment_link.description
Visual literacy refers to the ability to successfully interpret and use images. We derive meaning from a great deal of visual input in our daily lives - something that has increased significantly with the rise of digital media and technology. Today, our communications are more peppered with visuals than ever, including emojis, memes, profile pictures, advertising imagery, etc.

# data[].attributes.attachment_link.description
Visual literacy is the ability to interpret, negotiate, and make meaning from information presented in the form of an image, extending the meaning of literacy, which commonly signifies interpretation of a written or printed text. Visual literacy is based on the idea that pictures can be "read" and that meaning can be through a process of reading.

# data[].attributes.attachment_link.readable_text
The basic definition of visual literacy is the ability to read, write and create visual images. It is a concept that relates to art and design but it also has much wider applications. Visual literacy is about language, communication and interaction. Visual media is a linguistic tool with which we communicate, exchange ideas and navigate our complex world.

The term "visual literacy" was defined in 1969 by John Debes, the founder of the International Visual Literacy Association, as:

"Visual Literacy refers to a group of vision-competencies a human being can develop by seeing and at the same time having and integrating other sensory experiences. The development of these competencies is fundamental to normal human learning. When developed, they enable a visually literate person to discriminate and interpret the visible actions, objects, symbols, natural or man-made, that he encounters in his environment. Through the creative use of these competencies, he is able to communicate with others. Through the appreciative use of these competencies, he is able to comprehend and enjoy the masterworks of visual communication." - John Debes, 1969

Since this definition by Debes, researchers and practitioners have re-defined ever more complex definitions that reflect the breadth of its applications. The term itself takes on different meanings in different contexts and you will therefore encounter new ideas in education, science, graphic design, art, technology, philosophy and so on.

Visual literacy is, by nature, an organic concept that requires us to continually define and re-define its meaning as our world changes. Digital technology has greatly impacted our understanding of visual literacy as we now see children growing up with tablets and computers and what appears to be highly developed visual literacy instincts. But are they instincts, or are they picking up this new 'language' as a result of their interactions with digital technologies? These, and many more, are the questions that we ask and explore on this website. We welcome you to put forth your own definition of visual literacy so that our collective knowledge can continue to inform progress in this important field.

Kristen Harrison, Founding Editor

# data[].attributes.attachment_link.description
The basic definition of visual literacy is the ability to read, write and create visual images. It is a concept that relates to art and design but it also has much wider applications. Visual literacy is about language, communication and interaction. Visual media is a linguistic tool with which we communicate, exchange ideas and navigate our complex world.

# data[].attributes.headline
George Lucas on the importance Visual Literacy and Communications.

# data[].attributes.subject
George Lucas on the importance Visual Literacy and Communications.

# data[].attributes.attachment_link.title
George Lucas on Teaching Visual Literacy and Communications

# data[].attributes.attachment_link.readable_text
Back

KQED Art School - YouTube

# data[].attributes.attachment_link.keywords[]
art artists "contemporary art" "art history" "art education" arts education "common core" "arts integration"

# data[].attributes.attachment_link.description
Art School is a KQED Arts series featuring contemporary artists working in fine art, performance, digital art, and more. Meet professional artists and learn about their personal histories and intentions, then follow along as they demonstrate how to make all kinds of art, from comics to beatboxing rhythms. Get creative with the new wave of Art School.

# data[].attributes.headline
The Unique Work of Ceramic Artist Paul Briggs

# data[].attributes.subject
The Unique Work of Ceramic Artist Paul Briggs

# data[].attributes.attachment_link.title
The Unique Work of Ceramic Artist Paul Briggs

# data[].attributes.body
A fantastic resource for students to learn about the basic elements of art including line, shape, space, color, and texture. The interactive activities make learning fun and accessible.

# data[].attributes.attachment_link.readable_text
The goal of this unit is to introduce students to the basic elements of art (color, line, shape, form, and texture) and to show students how artists use these elements in different ways in their work. In the unit, students will answer questions as they look carefully at paintings and sculpture to identify the elements and analyze how they are used by different artists.

The Elements of Art is supported by the Robert Lehman Foundation.

# data[].attributes.attachment_link.description
The goal of this unit is to introduce students to the basic elements of art (color, line, shape, form, and texture) and to show students how artists use these elements in different ways in their work. In the unit, students will answer questions as they look carefully at paintings and sculpture to identify the elements and analyze how they are used by different artists.

# data[].attributes.body
This website provides an interactive experience for students to understand the principles of design such as balance, contrast, emphasis, movement, pattern, rhythm, and unity. Great for engaging with art on a deeper level.

# data[].attributes.attachment_link.title
What are the Principles of Design? - updated 2023

# data[].attributes.attachment_link.description
Design principles are guidelines, biases and design considerations that designers apply to make easy-to-use, pleasurable designs.

# data[].attributes.body
Learn about the vital role of composition in art and how it influences the viewer's perception. This resource breaks down the concept into easy-to-understand segments, perfect for budding artists.

# data[].attributes.attachment_link.readable_text
You may wish to begin preparing for this lesson by visiting the EDSITEment-reviewed web resource The Metropolitan Museum of Art. This web site contains a guide for learning about and identifying composition, perspective, light, color, form, motion, and proportion in Emmanuel Leutze's well known painting, George Washington Crossing the Delaware.

Composition in the visual arts is a large topic and this curriculum unit is only an introduction. There are some aspects of composition that will not be covered in this unit, but it should help students to begin to think about the kinds of choices that artists make when placing objects, figures, and natural elements in their work. The placement of objects within the picture plane is not an arbitrary act, but is the result of calculated decisions. This curriculum unit will assist students in beginning to identify some of those decisions. In addition, this lesson will help students begin to engage with the question of why artists make particular decisions.

One of the main purposes of focusing on the composition of a piece is to help students begin to read the information contained within the paintings they are viewing. Quite often artists structure the compositions of their paintings in ways that will bring the viewer's attention to the most important elements of the painting. Works of art are often encoded with a series of visual messages, some of which are readily accessible to all audiences, and some of which are only available to smaller, more knowledgeable audiences. This lesson should help students gain an awareness of one of the most important elements of a work of art-its composition-as an initial step towards accessing more of the information within a work of art.

Websites

# data[].attributes.attachment_link.title
Composition in Painting: Everything in its right place

# data[].attributes.attachment_link.description
Why is it that when we walk into a museum so many people gravitate towards the same images? In this curriculum unit students will be introduced to composition in the visual arts, including design principals, such as balance, symmetry, and repetition, as well as one of the formal elements: line.

# data[].attributes.body
An invaluable tool for students to learn the art of critique. This website guides you through the process of analyzing and discussing art, enhancing your understanding and appreciation.

# data[].attributes.attachment_link.readable_text
Overview

What is a critique?

A critique is an oral or written discussion strategy used to analyze, describe, and interpret works of art. Critiques help students hone their persuasive oral and writing, information-gathering, and justification skills.

Provide direction and guidance with the critique to ensure that students stay on task and address the purpose and objectives of the lesson.

Below is a sample set of focus questions for an art critique related to four major areas of art criticism: description, analysis, interpretation, judgment. (The number of questions and aspects of specificity will vary according to the art form and number of works in the critique).

Description

Describe the work without using value words such as "beautiful" or "ugly":

What is the written description on the label or in the program about the work?

What is the title and who is (are) the artist(s)?

When and where was the work created?

Describe the elements of the work (i.e., line movement, light, space).

Describe the technical qualities of the work (i.e., tools, materials, instruments).

Describe the subject matter. What is it all about? Are there recognizable images?

Describe how the work is organized as a complete composition:

How is the work constructed or planned (i.e., acts, movements, lines)?

Identify some of the similarities throughout the work (i.e., repetition of lines, two songs in each act).

Identify some of the points of emphasis in the work (i.e., specific scene, figure, movement).

If the work has subjects or characters, what are the relationships between or among them?

Interpretation

Describe how the work makes you think or feel:

Describe the expressive qualities you find in the work. What expressive language would you use to describe the qualities (i.e., tragic, ugly, funny)?

Does the work remind you of other things you have experienced (i.e., analogy or metaphor)?

How does the work relate to other ideas or events in the world and/or in your other studies?

Judgment or Evaluation

Present your opinion of the work's success or failure:

What qualities of the work make you feel it is a success or failure?

Compare it with similar works that you think are good or bad.

What criteria can you list to help others judge this work?

How original is the work? Why do you feel this work is original or not original?

Additional Resources

Towson University has an arts site that contains various lessons related to all the arts, including critiques for many grade levels.

Most of the major art museums have some or all of their collections online as well as lesson plans and critique formats for teachers to use with the collection. The Metropolitan Museum of Art's education site contains lessons and a gallery of some of their collections for students to use.

# data[].attributes.attachment_link.description
Overview What is a critique? A critique is an oral or written discussion strategy used to analyze, describe, and interpret works of art. Critiques help students hone their persuasive oral and writing, information-gathering, and justification skills. Provide direction and guidance with the critique to ensure that students stay on task and address the purpose and objectives of the lesson.

# data[].attributes.body
An insightful video channel that takes students on a journey through art history, examining significant movements and works. It's a great way to connect historical context with visual language.

# data[].attributes.attachment_link.title
videos about art - by art teachers, a user's guide to the ISB Art History Channel

# data[].attributes.body
A beginner's guide to digital art, covering basic tools and techniques. Ideal for students interested in modern visual language and the digital art landscape.

# data[].attributes.attachment_link.title
Digital Art for Beginners (2020 Edition)

# data[].attributes.body
Typography plays a crucial role in visual communication. This resource delves into the art of typography, exploring different fonts, spacing, and layout techniques.

# data[].attributes.attachment_link.readable_text
Whether it's on our phones, in books, or on websites, we're constantly digesting written words. From instruction booklets to shop fronts, typography 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 even trends can be expressed simply through the type choice.

But what is typography - and why is it so vital?

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.

Here's what we'll cover:

1. What is typography?

2. Why is typography important?

3. The different elements of typography

4. How to choose the correct typeface for your website

5. Key takeaways

Ready? Let's dive in!

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:

A brief history of typography

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 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 , and you'll find it in the font dropdown menu on major desktop applications today!

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.

2. Why is typography important?

Typography is so much more than just choosing beautiful fonts; it's a vital component of user interface design .

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.

Let's delve a little deeper into why typography is so important.

Typography builds brand recognition

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.

Unique, consistent typography will help you establish a strong user following, build trust with your users, and help to carry your brand forward.

Typography influences decision-making

Typography has a profound effect on the way that users digest and perceive the information conveyed by the text.

Eye-catching type is much more persuasive than weak fonts that don't reinforce the message of the text.

Typography holds the attention of the readers

Good typography could be the difference between someone staying on your website for one minute or half an hour.

It's important that your website is visually stimulating and memorable, and typography plays a huge role in this process.

3. The different elements of typography

To get started in typography, you first need to get to grips with the eight essential typographical design elements.

3.1. Fonts and typefaces

There's some confusion surrounding the difference between typefaces and fonts, with many treating the two as synonymous.

A typeface is a design style that comprises a myriad of characters of varying sizes and weight, whereas a font is a graphical representation of a 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.

Here's a visual example of each:

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 gives serif fonts an air of tradition, history, authority, and integrity.

It's no surprise, then, that you'll see this "classic" style used for newspaper titles, for 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 .

Sans-serif

Just like the name suggests, sans-serif typefaces are defined by what they lack.

Without the 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 , 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.

Best UI practices for using fonts

It's all well and good to know what is typography, but you also need to learn how to use it effectively in context. This applies heavily to UI design.

To keep the interface uncluttered and streamlined, a good designer will never use more than three fonts- and keep decorative fonts to a minimum.

Most UI designers will pair serif fonts with 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.

3.2 Contrast

Much like hierarchy, contrast helps to convey which ideas or messages you want to emphasize to your readers.

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.

3.3 Consistency

Keeping your typefaces consistent is key to avoiding a confusing and messy interface.

When conveying information, it's essential to stick to the same font style so your readers instantly understand what they're reading and begin to notice a pattern.

While it's okay 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.

3.4 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 provide an aesthetically pleasing experience. White space often takes the form of margins, padding, or just areas with no text or graphics.

3.5 Alignment

Alignment is the process of unifying and composing text, graphics, and images to ensure equal space, size, and distance between each element.

Many UI designers create margins to ensure that their logo, header, and body of the text are aligned with each other.

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 who read left to right.

3.6 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.

Color has three key components: value, hue, and saturation.

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 .

3.7 Hierarchy

Establishing a hierarchy is one of the most vital principles of typography.

Typographical hierarchy aims to distinguish between prominent pieces of copy that should be noticed and read first and standard text copy.

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.

Hierarchy can be created using sizing, color, contrast, and alignment.

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 a typographical hierarchy is size: headings should always be larger than subheadings and standard text.

4. How do you choose the right typeface for your website?

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:

Think about personality

How do 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.

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 clearly legible and will limit distraction.

Don't skimp on function

Function is just as vital as form: there's nothing worse than a website that looks pretty but is entirely illegible, leading you to click the wrong button or take a wrong turn because the instructions were unclear.

When deciding what typefaces to include in your interface, set the style, aesthetic, and voice aside and reflect on whether the font is legible, readable, and accessible.

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 for further guidance and inspiration.

Take some time to test

The best way to decipher which font to use for your interface? Test, test, test!

By gathering useful feedback from real users, you'll get a clearer insight into what works, what doesn't, what is legible, and what feels counterintuitive or clunky.

5. Key takeaways

Typography is often overlooked, but it's a crucial component of user interface design.

Understanding and 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
1. What 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. Typography 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.

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.
2. Why is typography important?
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.
3. How do you choose the right typeface for your website?
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, choose a less stylized or decorative font that is both clearly legible and will limit distraction.

This article is part of:

Writer for The CareerFoundry Blog

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.

# data[].attributes.attachment_link.title
Typography: What is it? The Complete Guide for 2023

# data[].attributes.attachment_link.description
What is typography in 2023 and why does it matter? Learn everything you need to know in this comprehensive guide, including actionable tips.

# data[].attributes.body
This video offers a comprehensive overview of color theory, an essential part of understanding visual language and art. It's perfect for students looking to grasp the concept of how colors interact and the emotions they evoke.

# data[].attributes.body
Learn about some of the most famous artists in history through this series of educational videos. Each episode provides insights into the artists' lives, works, and impact on visual language.

# data[].attributes.attachment_link.title
Famous Artists All Children Should be Inspired By