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.8 (11 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.
965 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 34
  • Length 2 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2015 English

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

What are the 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.)

What am I going to get from this course?

  • 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

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
01:06

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:

02:45

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.

What Is Typography?
3 questions
01:45

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

Terminology and Anatomy of Type
3 questions
Section 2: Typography Rules and Recommendations You Need to Know!
01:29

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

01:57

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.

02:01

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.

01:15

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.

01:28

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.

02:36

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.

01:13

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

Section Review
4 questions
Section 3: Classifications
00:55

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

03:05

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.

01:29

Sans Serifs are usually divided into four groups.

00:51

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

Section Review
2 questions
Section 4: What Font Should I Use?
01:08

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

01:20

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

01:56

Typefaces should and have personality or the general emotion.

01:26

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.

02:08

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

01:05

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.

00:46

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.

00:56

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.

Section Review
2 questions
Section 5: Using Web Fonts & Resources
Section Overview
00:38
03:13

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.

03:34

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.

03:43

Learn how to install fonts into adobe photoshop

Other Free Fonts Resources
1 page
Section Review
2 questions
Section 6: Bonus Section: Design Better Mobile Typography
01:26

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.

02:00

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

00:51

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

00:59

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.

00:54

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.

Section Review
2 questions
Section 7: Conclusion
00:59

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

Slides Used In The Course
67 pages

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Deimantas Brandišauskas, 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.

Ready to start learning?
Take This Course