9/30/2018 Styling Text | Learn UI Design

3 Ways to Fix Clashing Colors (9:09)

STYLING TEXT
  
  Picking a Primary UI Color
(10:33)

  Picking Secondary UI Colors (46:56)

  Dark Interfaces (22:41)

  Gradients (27:15)

IV. TYPOGRAPHY

  Terminology: The Bare Minimum

  Choosing Fonts (53:42)

  Good Fonts Table

  Styling Text
(44:24)

  Styling Text 2 (35:56)

COMPLETE AND CONTINUE   
  Pairing Fonts (50:35)

  7 Methods for DOWNLOAD:  Typography Cheatsheet 1.2.pdf ·  Text Styling HW.sketch

Overlaying Text on ·  Styling Text HW [no sketch].zip
Images (21:13) 7:02

V. USER INTERFACE COMPONENTS
  Form Controls (42:38)
  Icons 1: Vector Editing (30:46)
  Icons 2: Icon Design
(52:39)
  Photography & Imagery (39:34)
  Lists & Tables (41:49)
  Charts & Data
Visualizations (38:50)
VI. REAL-WORLD PROCESS
1:54
TOPICS
Time-tracking web app example
[2:22] Text styling problems are often information architecture problems
[4:24] Definition of down-pop and up-pop
[5:16] Text spacing should mirror conceptual spacing
[6:19] "Fail left, fail right” with text (from "3 Methods for Designing Above Your Level”)
[9:03] The value of uppercase
Underused by beginning designers
Strong sense of alignment along baseline and cap height
Will have letter-spacing most times
[18:09] Styling the date sub-headers
[20:29] Aligning bigger text with smaller text
[21:39] Hierarchy squint test

  Responsive UI Design (48:54) More

  Designing Multi-State Screens

(38:32)
HOMEWORK
  Accessibility (27:02)

In the Sketch file above (or ZIP file of PNGs, for those without Sketch), there are two designs of
  Creating a Design Portfolio
(33:07) mine that whose text has been replaced with 16px unstyled Helvetica. Your job is to style every
instance of Helvetica appropriate to its role in the interface.
  Finding Clients (18:29)
For reference, here are the fonts I used in the “sample solutions” (e.g. the actual designs):
  Presenting & Getting Good
Feedback on Your Designs
(34:17) Hurleyisms – Montserrat, Roboto
Instavest – Soleil (Typekit)
  Click-Through Prototypes (22:34)
You are welcome to use any fonts you think would be appropriate.

Please post your results – and any questions you have – in the Slack.

https://app.learnui.design/courses/learn-ui-design/lectures/1526638 1/2
9/30/2018 Styling Text | Learn UI Design

RESOURCES
Typography Cheat Sheet - This cheatsheet covers strategies for styling your text, as well as a
“starting point” for any value you’re wondering about. See download above.
Matthew Butterick’s Practical Typography - I was very excited by the title of this, but a tad let
down by the content. “Typography” refers not just to choosing fonts, but also to the somewhat
mundane and low-utility practices of making sure every quote, dash, and space is 100% correct.
If you really want to make your text shine, check this out. The “Typography in 10 Minutes” is great
– though it won’t be news to someone who’s finished this section.

https://app.learnui.design/courses/learn-ui-design/lectures/1526638 2/2