Scribd
Upload
113 views

Styling Text - Learn UI Design

This document provides an overview of styling text in user interfaces. It discusses terminology related to typography and provides tips for choosing fonts, including a good fonts table. Methods are presented for overlaying text on images and aligning different sized text. The homework assignment involves styling unstyled text in provided design files. Resources include a typography cheat sheet and a book on practical typography.

Uploaded by

Jibin John Jackson
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
113 views

Styling Text - Learn UI Design

This document provides an overview of styling text in user interfaces. It discusses terminology related to typography and provides tips for choosing fonts, including a good fonts table. Methods are presented for overlaying text on images and aligning different sized text. The homework assignment involves styling unstyled text in provided design files. Resources include a typography cheat sheet and a book on practical typography.

Uploaded by

Jibin John Jackson
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

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

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

You might also like