Scribd
Upload
146 views2 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
146 views2 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
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