Web Design: Using Typography to Convey the Right Message | Michela Chiucini | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Web Design: Using Typography to Convey the Right Message

teacher avatar Michela Chiucini, Interactive Crafts

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

9 Lessons (19m)
    • 1. Introduction

    • 2. Project: Complete one of the 2 style guides provided starting from the message in the file

    • 3. Alphabet, Human Body and Perception

    • 4. The Role of Typography in Modern Interfaces

    • 5. The Soul of a Typeface

    • 6. Starting from Real World

    • 7. Thinking to Practical Use

    • 8. Other Criteria

    • 9. Completing the Style Guide

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


Typography changes the mood and feeling of your message, especially on the web. Your typographic choices express a point of view and affect the overall design of your website and brand.

In this class, we’ll explore the history and importance of typography, examples of different typographic use cases and the criteria for choosing the right typography for your message.

At the end of the course, you’ll put your new knowledge into practice to create two distinct web style guides of your own, using resources available to everyone, so you will be one step closer to a clearer, more impactful website!

Meet Your Teacher

Teacher Profile Image

Michela Chiucini

Interactive Crafts


Michela is a Designer and Art Director at TAOSTUDIO, intuitive design systems with a touch of simpatia. Co-Founder of Coding Divas.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hello, guys. My name is Michael Acu Sheeni. We're going to use in typography to convey there at my side in mother Web design, we have a growing number off deputy feces available to use, and each one with a different so topographic shows is affected. Overall design off websites and brands in the is consequently influences the mass surgical bay. When spoken words become written words, the under the want of vision letters are images and that Britain tax must be readable off course. But it should be residence with the content as well. In other words, we are too deeply understand the mass such at first and then it's proceed with type. In this class, we go through the history and important off topography. Then we'll see some really war. It's on port off different typographic use cases. Then we'll explored so criteria for choosing the right type fees. At the end of the course, you put you do knowledge into practice. My comprising of originality is that guy you can teach me by my website to house studio design don't come or social nettles. I really hope youll enjoy the court 2. Project: Complete one of the 2 style guides provided starting from the message in the file: hi. For the project, you find two basic templates and foremost thank guides they both call with official team. I mean it brief and some objectives related to the mass Sarge. It's the guy that comes with a couple of images and in addition to your typography shows is three alien elements are intended to be re working, while longer creation is now the focus off the class. For this purpose, feel free to use the front of your choice. Two callers. Colors are important here as they give em Buddha, and this mother should be in resonance with the tax. Today, as we are focusing on in their face design, we can get rid off bottoms. Now let's see the two teams in detail. The team off the first template is tracking this the guy There will be for an informative website containing information about each itinerary in the surrounding area. Information might include the time required, difficult to grade the mops, the objectives wide and well grounded. For the second template, the team is architectural. This time guide is intended for subside for data design studio focusing in public spaces design they really miss to combine elements in a natural way. Key objectives your about With sensibility Please be free to shoes. The team you feel more confident with as results are better if you are fun At last we have two examples or final results. They are two really projects I did this year. Which one would be explaining this? They're breast acting The next Lessels For now you can is respond the difference before in duster. 3. Alphabet, Human Body and Perception: Okay, guys before to dig into the process of creating this time guy. I'd like to underline some interesting facts related to topography when it comes to the story in the Renaissance. Because spot our relation between our for about anyone. Body in terms bought off proportions and geometric relations for the U money sending the letters, the survey, the same dignity off defeated bodies. Also, some of the people involved in this started understanding of human proportion were investigating. The proportions are there from it as well. Our first example is thes their study off human proportions. Madonna was involved in the dramatic construction off the Latina for matters Well, Another example is these last three from the Book of Competitive in a report on it written by a couple Charlie and you stated value. Now that I'm being cheap, the book explores the applications off the golden ratio to body sides. One more example with these little sea where Francesco Tonelli, Dan Navarra presents are fond off Roman capitals constructing using compasses and ruler we can see circles and the lines inside agreed. So we could say ladders are appealing. That design is influencing manufacturers like time place proposed. But when it comes to perception, it's interesting to observe that despite the infinite ways to draw the same ladder, our cognitive system is able to recognize each one as the same symbol and the cost on relationships. Behind all these variations are still a mother off study in psychology, off perception. But every alphabet as another set off rules, the one used in the ladders off the same phone, the's or the features will focus on the class because different construction rules and mean different messages. And today we are off read a huge choice. 4. The Role of Typography in Modern Interfaces: At this point, it's interesting to see how our designers changing in the last few years. If you look at websites from the past, they were using the very few words saying phones available at the time. Mostly Georgia Arial in few are this other that prefaces should be an image for months. Here, the alloy aureus underlying the real test portions. And as you can see, there are many graphic elements outside off the yellow boxes they were fixed. We designs in those thin, very teaching graphics. Another example with, say, more friends are really and your job. Today in the Year of Responsive Design and Performance Award nous we are at in towards cleaner designs. If we look at these examples, we can see just the logo and pictures out off the yellow boxes. Today I phones to can be a well phoned, and the variety off phones available today contributed to make this happen. We had a politican shifter from having graphics websites to lighting graphics websites from a limited the front choice toe on always growing from choice, and they all refused, definitely getting relevance in terms off message, a big part of what rely the arrested graphics yesterday can be doing. We take policy today 5. The Soul of a Typeface: it is to say when it comes to move the type. Disagree. Tool. Let's look at two examples for the world organic. The first sword in use this or be thrown very dramatic and reminding to say for movies. And this is exactly the proposal, this creation, seeing the school battle with Lord out with the holographic feel off the Palestine, so different types for different messages in the real world, every project that comes with a brief and usually so much actives are included to this crime removed. Let's take a look at two different messages. Message one, sheikha, but no too romantic message toe babish in call food. In the message, we find some information about type here. We need to operate toe quite different choices. Whatever the reasons behind the show is, so we should consider geometry overtime facing Francis's. So look at how different artists to terminals for the letter y and we are looking a just a ladder with different messages come different results. You know my finance choices in the next video with See some criteria together 6. Starting from Real World: we were saying A construction rules influence this all of a typeface Objectives can be two hours. We were not granted with some really examples. And the good place to start is looking for correspondences between the mass such in the world. So gargling images from the rear environment is very useful in this face For the missile John, I was provided with a lot of pictures being interior design one off the teams off the website. Looking at these pictures, we can spot all the mother for Mr Mix It together now taking a closer look at the details off these objects at the way they are constructed, we see some Corby lines in the old fool knitter. Why more contemporary objects on the right have sit line inkling shapes here we can spot so Malala Jeez, between the mirror frame detail on the left impression display special in italic on the right. Before this play has a big personality, it would be using here for the Lagoa song visual accents. So our fist a guide begins to take shape. But the message to we have a completely different situation Has the website will be a school advisor for pardons. But how those are really good school look like? And what about the tools in environment? Well, in every school there are many corporate books on getting class. This most objects around it in order to avoid injuries. Also, these objects are usually colorful. In this case, I found quote janitors t created for school poor poses as a bonus point. One off the designers behind for the M is Italian, which is a nice school tour. A feat Were there No will be using for the Lago on here too. We can see some progress is with this guy in the next last son will explore other criteria to complete our choices. 7. Thinking to Practical Use: before to make a show is basically exclusively mood. There are some other aspects to consider as well. Who is going to use the website that young people are People are ZBZ relaxing as the website to accommodate a lot off body texts? In case is, there sure is good for thes purpose. Our numbers needed for what purpose? In what measure do I need? Understanding alphabet for other languages. These are just some common questions to ask. Let's see now some practical examples for the message. One. We need another typeface to balance the move, the end of our being too romantic or overpowering. If we look at the image on the left, we have a very essential design while still warm, acquired their companion for preferred. This place locked off on the stated but still warm. It is very readable, angled for body. Korpi they were beside would be in German and both the alphabets are competent with his language. So we'll use a lot off or body text and perfect this play for song visual accents and the logo here, the updating the state guide in a message to for text we need nisi to read their face us. This will be a website where busy parents will go looking for a school. And we know school is an important shows for families. Back to the furniture there are around it angles so other face with randy terminals would be able to fit. Nieto is great in accomplishing both a goal, sir. Balance it is it to read and friendly. The website will have a writing system, so we need to use a number. It's quite often some said, if numerals are in general, easier to read the you need a has lining fuels uniform in terms or fighter and alignment more suitable for a ranking system while or state Feagles like the ones below RB Sanders in this Sanders and consequently very unite and alignment. Just a side note for those interested. Many phones that have a set off did not figures you can explore them by the open time panel in your prophetic application here, they updated the state guys for the project to, in conclusion, are wise. Step A graphic shows is often a balance between mood. The impractical use in the next lesson with see some additional criteria toe up you in making your choice 8. Other Criteria: well, they once in a stated so far no, they only critical to use as a like a typeface. I always find something interesting to read the full story behinds creation. Unfortunately, not always desist repulsion is available, especially in free ones. On always Bali Suggestion is to look for historical references, said he faces are usually pretty good that give us sense off the study. Geographical identity is another possible question to ask. Is that relevant for the message? In this case, you will try to investigate what type of better represents the area and the toppy. Two issues e that this is an interesting one. Are there tools used in that particle or field? How letters would look like if created with these tools, just try to margin drawing the same ladder with a Panera's, she's and indifference or phases paper stoner food? The result would be different if the website will be any comments. You love to deal with a lot of numbers. In this case, lining figures are better treated with the website needing for graphics. Do you need to be excited? Numbers At last, you can try something new, some unexpected use over typhus into school work as well. Don't be afraid, toe. Make experiments depending on the project. Question to ask a Rand lists, and they will help you to define the constant and avoid to get lost in the multitude of choices. 9. Completing the Style Guide: the sources we make in terms off type cannot pass in complex in us that guide looking at the shapes of strokes off the letters so we can style other in the face elements and keep visual consistency and flew here for the message. One. We need very few elements. Adjust some basic bottoms. Mr Lof, the Barton recalls the few strokes off satellite here. Definition. Start guide. It's you again before and after for the message. Tutus is ah, different kind of website where additional interface elements are required. They're on the shape off the Barton Czar Records Neto, and it's surrounded letters. Why the thickness off the board? There is the same Uskudar. No Thursday, the progress you will need the some icons to and again the weakness off what they're no is using before the icons. Let's see they completely staight guy that before and after. So this way the message can be propagated, using just details, having before we go with their weapons design in your project that police were free to use the criteria described in the class or to have fun offending you wants describe in your process can be out food to everyone, so please try to do that, looking forward to see what you conduit. Thank you and catch you soon