Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Design Beautiful Websites with Web Typography (2016)

Name: Design Beautiful Websites with Web Typography (2016)
Rating: 3.7 (13 reviews)

The Beginners Guide To Designing Beautiful websites using Web Typography with HTML and CSS - No Experience needed!

Created byBenjo Sabban

Last updated 2/2016

English

English [Auto],

What you'll learn

Learn basic Typography Terms,Elements and Best Practices
Learn basic Web Typography Classifications
Learn how to design Web Typography using HTML and CSS - No Experience needed!
Learn Responsive Web Typography for Desktop,Tablets and Mobile
Learn how to design and layout beautiful websites using Web Typography

Course content

5 sections • 29 lectures • 1h 52m total length

What To Expect From This Course1:32
learn the fundamentals of web typography, including typefaces and fonts, hierarchy, reading patterns, text spacing, and color combinations, with practical applications and real-life design examples.
Sublime Text 23:43
download and install Sublime Text 2, choosing the correct Windows version (32-bit or 64-bit), then launch and configure it to edit HTML and CSS files for web page design.
Upcoming Lectures0:08

Parts of a Typeface3:18
Explore the parts of a typeface, including cap height, baseline, x-height, ascenders, and descenders. Learn how serifs, contrast, weight, and color shape readability and visual impact.
Parts of a Type Face Glossary2:32
Using Fonts To Convey Meaning3:44
Additional Tips for using Fonts11:12
Importance of Legibility5:13
Explore how legibility in web typography relies on spacing, stroke width, open apertures, x-height, and balanced letterforms to improve on-screen readability.
Additional Tip on Fonts and Color2:04
Typography Encourages Reading6:01
Typography encourages reading by tailoring web text for casual, scanning, and engaged readers, using legible fonts, proper line length and spacing, and applying web fonts via css.
Tips in making your Fonts Readable6:15
Using Web Safe Fonts3:52
Learn how to implement web safe fonts and Google fonts on a site, including selecting fonts, adding the link and style rules, and using fallbacks to ensure readability.
Additional Tips in using Web Safe Fonts3:12
Quiz 1 - Refresher

Font Weight and Style7:07
Master font weight and style in web typography using font-face and Google Fonts, applying Open Sans with weights from 300 to 800 and italic variants.
Best practices for Font Weight and Style1:41
Font Size4:25
Learn to size body and heading fonts for legibility and proportionality using em and px, apply Oswald from Google Fonts, and practice responsive typography for web and mobile.
Quick Tip for Font Sizes0:39
Measure2:59
Explore measure in typography, focusing on line length for a single-column design, with an ideal target around 65 characters. See how margins, paddings, and white space improve readability and layout.
Quick Tip on line length0:31
Type Scale2:45
Discover how typographic scale creates balance in web design by using type scale dot com with a 20px base, major third, and heading sizes in CSS with Oswald.
Additional lessons for the Type Scale10:41
Line Height Basics3:24
Explore line height and vertical rhythm by adjusting line height, margins, and padding to align body text and headings with a baseline grid and 1.5–1.6 line heights.
Line Height - Vertical Rhythm (Revised)3:20
Learn how line height and vertical rhythm affect readability in web typography. Adjust line-height, margins, and padding using a baseline grid and css to refine page layout.
Quiz 2 - Refresher

Typographic Heirarchy4:29
Learn typographic hierarchy to guide readers through web content by using weight, size, color, and typeface pairing, and to structure pages from most to least important.
Caps5:25
Explore how uppercase, small caps, and large caps with color and pairing create hierarchy and emphasis in web typography, balancing readability in headlines, titles, abbreviations, and body copy.
Color (Revised)1:57
Adjust color and contrast to strengthen typographic emphasis on a web page, using a program to set a black background, white title, and a consistent design across the artist page.
Responsive Typography3:23
Kerning5:54
Explore letter spacing and kerning, ligatures, and smart quotes, with guidelines to improve readability. Learn browser support and typographic practices to avoid rivers, widows, and orphans in text.

Requirements

HTML and CSS (No experience needed!)
Sublime Text 2 Editor (You can download this for free)

Description

LATEST: Course is updated for month of July 2015.

17 July 2015: New Lecture Revised - Lecture 28 : Color

24 June 2015 : New Downloadable Resources Added! - Font Size Measure , Measure Space

14 June 2015 : New Downloadable Resources Added ! - Web Fonts & Google Fonts

6 May 2015: New lecture added! - Section 3 Lecture 5: Line Height Basics

IMPORTANT: Price of the course will increase to $ 299 on July 31, 2015

JOIN OVER 1300+ SUCCESSFUL STUDENTS WHO HAVE ALREADY TAKEN THIS COURSE!

*******************************************************************************************************************

"Superb Course. This is a great course for beginners who don't know anything about web typography. The instructor is very helpful and knowledgable about the topics as well. Definitely one of the best here in Udemy." - Matthew

Scroll down to the bottom for more authentic reviews...

*******************************************************************************************************************

THIS COURSE IS CREATED FOR ONE SIMPLE PURPOSE :

To help you design great looking websites with awesome looking Typography for clients,real world projects or your own website!

Learning how to design beautiful websites using Typography is one of the most important investments you can make as a designer. Almost all websites use Typography to create great user interfaces and experiences. In this course we'll go over the basic typographic elements to using HMTL and CSS to design our websites.

Whether you are - A total newbie on web typography design using HTML and CSS or clueless on how to get started:

You will gain a solid foundation on the WHATs and HOWs to designing your very own website using Typography . This is a structured course that teaches you a systematic way to design your own website using Typography from scratch that will save you years of time figuring things out on your own.

After taking this course, you'll be able to...

Learn basic Typography Terms,Elements and Best Practices
Learn basic Web Typography Classifications
Learn how to design Web Typography using HTML and CSS - No Experience needed!
Learn UI/UX Design Principles
Learn Responsive Web Typography for Desktop,Tablets and Mobile
Learn how to design and layout beautiful websites using Web Typography

About this course

Over 30+ Lectures and 2+ Hours of Content
Full, free lifetime access
All future extra lectures and upgrades are always included for free
30 day money-back guarantee -- my personal promise to your success!
Monthly BONUS Lectures to enhance your Design Skills!
24/7 Instructor Chat Support -- I will personally help you

By enrolling in this course, you will also receive support from me and I will be personally answering your questions in the student discussion area.

************************************************************************

30-Day Full Money Back Guarantee

In the event that this course does not meet your expectations or you are unhappy with this course for any reason, I promise to give you a full refund with no questions asked.

************************************************************************

If you are willing to learn and put in the effort to implement what I teach you in this course, go ahead now and click the big blue button at the top to enroll yourself and start experiencing the results for yourself!

I look forward to hear your personal success story and I'll see you on the other side!

Who this course is for:

Web Designers
UI/UX Designers
Graphic Designers
Programmers and Developers
Anyone who wants to learn Typography

Design Beautiful Websites with Web Typography (2016)

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 5min

Introduction To Typography10 lectures • 47min

Web Typogrraphy10 lectures • 38min

Web Typography Layout5 lectures • 21min

Conclusion1 lecture • 1min

Requirements

Description

Who this course is for: