Typography Design: Learn Web Typography The Practical Way
3.6 (9 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
970 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Typography Design: Learn Web Typography The Practical Way to your Wishlist.

Add to Wishlist

Typography Design: Learn Web Typography The Practical Way

Learn Web Typograpy Design From Scratch With Practical Lectures And Exercises Plus A Bonus Section For Mobile Typography
3.6 (9 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
970 students enrolled
Last updated 1/2015
English
Learn Fest Sale
Current price: $10 Original price: $20 Discount: 50% off
14 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1 hour on-demand video
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Know What Typography Is
  • Learn Typography Terminology and Recommendations
  • Learn Typography Classifications
  • Learn How To Choose The Right Font
  • Learn How To Use Fonts In A Practical Way
  • Learn Mobile Typography
  • Learn The Difference Between Mobile Typography And Web Typography
View Curriculum
Requirements
  • Interent Browser
  • Passion For Design
  • Know The Absolute Basic Of HTML and CSS
  • Photoshop Isn't Required
  • Text Editor (Notepad, Notepad++, Sublime Text, etc.)
Description

Do you want to learn how to design the perfect type so your next web design project is going to as engaging as those perfect websites design out there?

Or maybe you have already went through a web typography course but it doesn’t involved practical design in a real world projects and now you don’t know how to start?

Do you know that typography is a single the most important aspect in web design?

If you want to get answers to all those questions and are willing to learn everything about typography design when you are on the right track!

This course is comprehensive with short and quick lectures which will look into typography in a practical way, without any boring theoretical and useless stuff you may have already learned just by googling about typography.

In this course you are going to learn everything you need to know about web typography, which includes:

  • Web typography rules, terms and recommendations in a practical way
  • Classifications of all available types of typography
  • How to choose the right font for your next web project with practical tips and tricks which you will be able to apply right away
  • How to implement your web fonts into your web design project
  • How to use Adobe Photoshop for typography design
  • Plus a bonus section for mobile typography and all the free resources

You are going to get a course with all updates, free support and 30 day money guarantee period with no questions asked.

Who is the target audience?
  • Current Graphic Design
  • Product Designers
  • UI/UX Designers
  • Whoever Wants To Become A Graphic Designer
  • Who Wants To Create Beautiful Typography
  • Who Wants To Create Usable Typography
  • Who Wants To Design Websites With Perfect Typography
  • For Programmers And Developrs Who Want To Learn How To Use Typography
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 34 Lectures Collapse All 34 Lectures 02:00:57
+
Introduction
3 Lectures 05:36

This course is comprehensive with a short and quick lessons which will look into typography in a practical way, without any boring theoretical and useless stuff you may have already learned just by googling about typography.

Course content is divided into 6 sections:

Preview 01:06

Wikipedia defines it as follow: Typography is the art and technique of arranging type to make written language readable and beautiful. Which is probably self-explanatory.

Preview 02:45

What Is Typography?
3 questions

Now that we understand what typography is, let's talk about some of the terms used to describe its different elements.

Preview 01:45

Terminology and Anatomy of Type
3 questions
+
Typography Rules and Recommendations You Need to Know!
7 Lectures 11:59

And in this one you are going to learn typography rules and terms as a designer you absolutely need to know.

Preview 01:29

All typefaces are not created equally. Some are fat and wide; some are thin and narrow. So words set in different typefaces can take up a very different amount of space on the page.

Size
01:57

leading is a vertical space between each line of type. But in consumer-oriented word processing software, this concept is usually referred to as "line spacing" or "interline spacing." So be aware of it.

Preview 02:01

Tracking affects the spacing between all the characters in a range of text. Or, in Adobe Photoshop, you can set on which character or individual words you want to set it.

Tracking
01:15

Kerning is very similar to tracking: it adjust spaces between individual letters, but, it’s more specific.

Kern­ing is the ad­just­ment of spe­cific pairs of let­ters to im­prove spac­ing and fit.

Kerning
01:28

The term 'measure' describes the width of a text block. If you're seeking to achieve the optimum reading experience, it's clearly an important consideration.

Measure
02:36

If all type was the same size, then it would be difficult to know which was the most important information on the page.

Scale
01:13

Section Review
4 questions
+
Classifications
4 Lectures 06:20

In this section we are going to learn 3 types of typefaces, which can be classified into: serifs, sans serifs and scripts.

Section Overview
00:55

In this lecture, you are going to learn all the styles included in serif type style. You are going to learn how to identify them, what parts are important and where to look at.

Serif Type Styles
03:05

Sans Serifs are usually divided into four groups.

Sans Serif Type Styles
01:29

And lastly, there is script style, which has 3 main groups:

Script Type Styles
00:51

Section Review
2 questions
+
What Font Should I Use?
8 Lectures 10:45

In this section you are going to learn super practical and super awesomely useful tips and tricks, how to pick the right font for your website or whatever product design you are working on

Preview 01:08

Choosing the right font for your project isn’t as hard as you might think.

Preview 01:20

Typefaces should and have personality or the general emotion.

Emotional Type (Mood)
01:56

Generally serif fonts are more traditional and ‘old style’ while sans serif typefaces are seen as modern and futuristic. However, these broad adjectives can easily be challenged with typefaces from both categories that defy such classification.

Serif or Sans Serif
01:26

After you have gathered all information about your project target audience and what emotion it creates, now it’s the simple task. Really.

Readability
02:08

As I have mentioned before, in the previous lecture, if your typography is readable, which means that the people easily can see all the words, it’s simple, clean, clear then you are ahead of more than half of the website which are live online right now.

But what about other half? We need to make our font stand out.

Standing Out
01:05

We have talked about typography, fonts, typefaces and all that stuff which involves writing some kind of text and make it stand out and unique.

But it’s not all about the text itself.

Match Your Design
00:46

Sometimes, heart wins over the rules and recommendations and process means nothing if it’s not worthy and you aren’t getting the desired results.

Follow the Rules or Break Them?
00:56

Section Review
2 questions
+
Using Web Fonts & Resources
5 Lectures 11:08
Section Overview
00:38

Web Fonts are fonts which are linked from another resource to your own web page, either it’s through HTML/CSS back-end or some CMS like Wordpress.

Downloading Web Fonts
03:13

First of all, if you know a little bit of css and html, you may know that we need two required files: index and style.css. So let’s create them.

Using Web Fonts
03:34

Learn how to install fonts into adobe photoshop

Installing Fonts Into Adobe Photoshop
03:43

Other Free Fonts Resources
1 page

Section Review
2 questions
+
Bonus Section: Design Better Mobile Typography
5 Lectures 06:10

Unlike the desktop based websites, where you have a lot of room for type, for mobile devices you need to work with much smaller screens, plus mobile is often not measured by tradition point systems like it’s for desktops.

Mobile Typography Basics
01:26

The key to any style of typography, and what it makes the perfect one, is readability.

Readability
02:00

The other factor to keep in mind is widths and there are two types to consider for mobile – vertical and horizontal.

Width
00:51

When we are talking about mobile, we are talking about small screens. Yes, where are phablets, which screens are bigger, but they are not big enough like desktops or laptops.

Space / Spacing
00:59

Yes, most of the times, and probably all the times, you are not going to use serifs in your mobile projects. You are going to use sans serifs because they are really easy to read and it doesn’t affects usability.

Simple Typefaces
00:54

Section Review
2 questions
+
Conclusion
2 Lectures 00:59

To wrap up the whole course, we can make a conclusion that we have learned:

What Have You Learned?
00:59

Slides Used In The Course
67 pages
About the Instructor
Deimantas Brandišauskas
4.0 Average rating
126 Reviews
5,896 Students
3 Courses
UX/UI Designer and Front-End Developer

I am passionate mobile UX/UI designer and Front-End Developer who firmly believes that a well-designed apps are just as important as well-built apps. User experience design is all about creating relationships between the users and technology because users want more than "pretty" and full of features product. Users need to successfully complete their goals and certain tasks.

Since I do care about how the mobile application works and how it looks I also have over 5 years of experience in front-end development industry. My workflow involves going from initial app idea to the polished and well-developed app. I have developed and maintained various Android apps for clients and for my own projects.