YoVDO

Typography for Developers Tutorial - Full Course

Offered By: freeCodeCamp

Tags

Typography Courses Figma Courses UX Design Courses Responsive Typography Courses

Course Description

Overview

Dive into a comprehensive tutorial on typography tailored for developers. Learn the fundamentals of creating effective typography as a UX Designer, including typeface selection, layout techniques, establishing typographic hierarchy, and implementing responsive typography. Explore the differences between typography and lettering, typefaces and fonts, and how typography impacts user experience. Discover various typeface elements, genres, and sub-genres, including serifs, sans-serifs, and scripts. Compare print and digital design considerations, understand fixed vs. fluid layouts, and gain insights on helping clients appreciate the value of quality fonts. Master the process of choosing and using typefaces, installing fonts, and working with different font formats. Delve into the nuances of text and display typefaces, font weights, styles, and sizes. Apply your newfound knowledge in a hands-on design project using Figma. Developed by Hope Armstrong, this course offers a deep dive into typography essentials for developers seeking to enhance their design skills.

Syllabus

) Introduction: What is Typography?.
) Typography vs Lettering.
) Typeface vs Font.
) How Typography Affects User Experience (UX).
) Elements of TypeFace.
) Serifs.
) Sans-serifs (Without serifs).
) Letterform Contrast.
) Text Contrast in Comparison to the Background.
) Text Color Contrast.
) Typeface Genres (Types of Typefaces) .
) Serif Sub-genres.
) Sans-serifs Sub-genres.
) Scripts.
) Print Design vs Digital Design.
) Help Clients Understand the Benefit of Good Fonts .
) Fixed vs Fluid Layouts.
) Choosing and Using Typefaces.
) Installing Fonts.
) A word on Font Formats.
) Choosing a Text Typface.
) Counters (Enclosed whitespace in Text).
) Typeface 'Mood' Matching the Content.
) Choosing a Display Typeface.
) Translating Text Typeface to Display Typeface.
) Weight, Styles & Sizes.
) Faux Bold & Italics vs True Bold & Italics.
) Font Weighting & Styles.
) Design Project using Figma.


Taught by

freeCodeCamp.org

Related Courses

Android App Capstone
Meta via Coursera
Bases de la conception Expérience Utilisateur (UX)
Google via Coursera
L'analyse de données UX
HEC Montréal via edX
User Experience
City College of San Francisco via California Community Colleges System
Google UX Design (PT)
Google via Coursera