Today we are exploring the typography lesson from week 2 of Skillcrush 100. Many designers have fun at this point of the web design process because that means looking at Google Fonts in search of the perfect fonts to use for different designs. Before I took my web design course, I just assumed choosing fonts was just picking something people could read online.
By the end of week two, I had a brand new perspective on typography. Today I have a better sense of how fonts and typefaces contribute to the overall design of a website and how to use them. Now typography is one of my favorite parts of web design where I spend hours looking at Pinterest on how to pair fonts.
Before you start looking at color palettes, you want to make sure that you are familiar with the brand you are working with and what best describes this brand's look and feel.
The design process should have given you lots of information about the brand you are working with as well as the users who visit the website. One of the common lessons that reappears in these posts is keeping your users in mind when designing for the web. There are so many websites online so it is important getting your brand identity to stand out so users can visit your site and see how your site differs from your competitors.
The design has to make sense. All the elements in web design work together to form the personality users can see the minute they arrive on their page. If one element doesn't work, it throws off the entire picture your brand is trying to create.
If you have experience with design and working with printed text, you might already be familiar with these concepts. However, if you are new to web design, these concepts are good to know as you work with your content and put together the look you decided on with a client. The point of this lesson was for Skillcrush to get their students familiar with typography and introduce ways to make working with typography easier. In this post, I will share some of the things that I learned from Skillcrush's typography lesson and how these concepts helped me create the look and feel of a website.
Typography Terms to Know
Skillcrush starts by going over key terms related to typography. These terms don't have to be memorized. However, I recommend being familiar with these terms for future reference.
You never know when a client might ask you questions about typography or you will need to play around with these ideas in your design. If you want more information on any of these terms, feel free to do more research online. You'll find tons of information as well as examples of how these terms work on the web.
Kerning and Letter Spacing
Kerning is just a fancy word for letter spacing. When designing for the web, web designers use letter spacing to achieve the same effects kerning does with printed text. Letter spacing is harder to achieve on the web.
You will notice on the web that letter spacing doesn't apply to individual letters. When it comes to letter spacing on the web, spacing is applied to the text. Therefore web designers can't just play around with the spacing of two letters in a block of text. Ultimately you would have to put spaces between each letter of the block of text.
Leading and Line Height
Leading acts very similar to kerning and letter spacing but concentrates on lines of text instead of individual letters. Leading is used to add more space between lines of text. When designing for the web, web designers use line height to change the spacing between lines of text.
Designers will have different opinions about how to use line-height on a website. However, Skillcrush recommends line height should be 20% larger than the text size or 1.2 times bigger than the font size for good legibility. Line height should not make the text look like it was crammed together in a certain space.
Widows and Orphans
Designers also have different definitions of what widows and orphans are. Skillcrush's definitions come from Robin Williams's book The Mac is Not a Typewriter. An orphan is a word or group of text that ends up on a separate page or starts a brand new column.
You can spot orphans in the printed text such as newspapers when sentences continue onto the next column. Orphans are harder to spot on the web since pages and columns act differently.
Widows are the words that hang off the end of the paragraph. Widows are very common on the web. You can even find some on this post. If you visit some of my previous posts, you will see a word hanging off a bunch of text by itself.
There isn't anything designers can specifically do to prevent widows from appearing on the web. There are lots of factors that are out of a designer's control (i.e. the type of browser being used) so designers don't worry about them.
Text Alignment
Text alignment is how designers set the flow of the text document. If you have worked with Google Docs or Microsoft Word, you are already familiar with text-align and how it works. The four most common types of text alignment are:
- left
- right
- center
- justify
Different people will have different preferences for the text alignment they use. However when in doubt, always pick the alignment that will make things easier to read.
Skillcrush does offer a word of warning about justifying alignment. If you want to use it, Skillcrush cautions students to look closely at the rivers (gaps that pop up in the text) as they are using it.
Font-Size
Font size is the size of the font on the page. Font size is measured according to points. When designing for the web, designers and developers can use em or pixels (px) on font sizes.
Font size will vary depending on the importance of the text. When in doubt, Skillcrush advises students to pick a font size much larger than necessary. They suggest 15px as a minimum font size for the web since this size still is readable.
Typefaces
Skillcrush defines typeface as "the design of the letterforms while a font is the delivery mechanism". During the web design course, they encourage students to think of typeface as a design itself. The shapes of letters, numbers, and symbols differ for every typeface.
Fonts are often confused with typefaces. Fonts are the files that show the typeface. This could be the software that displays a specific typeface or any typefaces on Google Fonts.
When it comes to picking typefaces, you always want to keep in mind the legibility. Think about your brand's personality and pick 1-2 fonts that will match the mood you are trying to achieve. The right typeface can tell users a lot about your brand.
There are tons of typefaces. When I got to the typography section of Skillcrush 100, I was amazed by how many different typefaces were available for designers and developers.
It can seem overwhelming and it can be hard just to choose one. Every typeface seems to fall into one of these categories:
- Serif: These typefaces have little "feet" on them. These little feet help make the text easy to read since they help make a connection between the letters.
- Sans-serif: They act very similar to serif typefaces. Sans-serif typefaces don't have the little feet, though. This typeface is still easy to read and very versatile among the typefaces since it can be used as headlines to small text.
- Display: Display typefaces have the most personality of the typefaces. There is a variety of display typefaces depending on what personality you are looking for. However, this typeface is mostly used for headlines on websites or when some personality is needed.
- Script: Script typefaces are often known as being elegant and fancy typefaces. Script typefaces gave a design a handwritten approach.
- Symbols and Dingbats: This typeface may seem self-explanatory. It is used to communicate an idea through pictures.
Always think about legibility!
Legibility is common sense for most designers. Your content has to be readable for every user visiting your website. When I think of legibility, I think of the movie The Intern.
In the movie, Anne Hathaway's character Jules Ostin is at a meeting with web designers and developers at her company. During the meeting, she has them play with the font size on the home page then advises them to take a step back to see if a potential customer could read the page at a glance. If you can't see what is on your site very well, chances are the users will have trouble too.
Now legibility can vary for each user. Some users might think a font size is too small while others will be just fine with chosen size. However, legibility is much easier to achieve when designers and developers think about their users as they put the design together.
Skillcrush does share ways to help designers ensure text is legible. Their advice suggests a specific number of pixels or line-height sizes to help achieve legible text. However, like many of these concepts in this series, every designer is going to have a different opinion on what you should use.
If you need some typography inspiration, I suggest checking out Pinterest. Just use searches such as "typography" or typography design" to see how other designers are using typefaces. Another great place to find great typography is Dribbble.
If you are a designer or a designer in training, Dribbble is a great place to get inspiration and even show off your designs. You can search "typefaces" or "fonts" to find plenty of examples of how other designers can make legible text look amazing.
==> Click here to look at examples on Dribbble!
Conclusion
Typography and typefaces are important parts of building the look and feel of your website. The right typeface can tell users more about the brand they are considering working with. A lot of the typography principles for print text still apply to the web.
Skillcrush 100 does a great job running through the important concepts and how they can help you enhance the website's brand. Before designers can start playing with typefaces and font sizes, they have to remember the ultimate goal of typography. Typography is going to be different for every website.
However, designers have to make sure the text is legible so users can reach the intended goal actions you discovered from the design process. Tomorrow I will wrap up web design and week two of Skillcrush 100. The last post of week two is going to dive into color and how designers can use it appropriately on your website.
Meanwhile, check out Pinterest and Dribbble to see how other designers approach typography. You can even visit your favorite websites to see what typefaces they use and how the font sizes contrast with each other. What do you notice about the way other sites approach typography? If you know any other great typography resources, feel free to post them in the comments as well as any other typography tips I might have missed in this post.
This post was originally published on October 19, 2016 on the blog The Original BritishPandaChick. I made minor changes to the original post to work here on DEV.
Top comments (0)