Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The Fine Details

4:17 with Hope Armstrong

Are you ready for the nitty-gritty details? Learn about danglies, punctuation, and stylistic alternates!

Inserting smart quotes manually

Mac

Type the following keys simultaneously:

  • Option+] and Shift+Option+] for the left and right single quote mark or apostrophe
  • Option+[ and Shift+Option+[ for the left and right curved double quotation marks
Windows

Type the following keys simultaneously. You'll need a numeric keypad to use these commands. If you don't have one, use the Character Map instead.

  • ALT+0145 and ALT+0146 for the left and right single quotation mark or apostrophe, respectively.
  • Use ALT+0147 and ALT+0148 for the left and right double quotation marks, respectively.

Inserting different dashes

Mac

  • en dash: Option+hyphen key

  • em dash: Shift+Option then press the hyphen key

Windows

Type the following keys simultaneously. You'll need a numeric keypad to use these commands. If you don't have one, use the Character Map instead.

  • en dash: ALT+0150
  • em dash: ALT+0151

Best Practices

Further Reading

Now, for 0:00
the fine details of typography to really send your designs into a polished state. 0:00
One, pay attention to danglies. 0:06
A dangly is a piece of text that awkwardly appears on its own line. 0:09
It can be a single word that wraps into the next line or 0:14
a single line of text that flows to another column. 0:18
This imbalance can interrupt reader flow and impair readability. 0:21
Historically, these have been called orphans and 0:26
widows, although that's unkind terminology. 0:28
So I've switched to this inclusive language coined by design leader 0:32
Maylee Coe. 0:36
For example, 0:38
let's look at this static headline that describes a section on a website. 0:39
The last word wraps to a new line on a common desktop screen size. 0:44
Adjust the text box to allow it to flow in a single line. 0:49
Keep in mind, in a design program, we have a lot of control over the layout. 0:53
But when it becomes a live product that people use, 0:59
it's not possible to fine-tune it for every situation. 1:03
For example, we can set these blog article headlines to a reasonable text size so 1:07
that most headlines fit comfortably on the cards. 1:13
But in reality, headlines of various text links will be inserted here and 1:16
some will appear with a dangly. 1:22
Dynamic content can only be controlled to a certain extent. 1:24
In addition, there are a wide range of screen sizes and device orientations. 1:29
And it isn't feasible to perfectly plan the text wrapping for every scenario. 1:35
So avoid danglies wherever possible for common screen sizes, but 1:40
also except that you can't completely eradicate them. 1:44
[SOUND] Two, use proper punctuation. 1:48
A few common pitfalls are not using the correct quotation mark, 1:52
apostrophe mark, and dash. 1:56
The preferred quotation mark is called a curly quote. 1:59
This differs from straight quotes which are used in coding. 2:03
Notice how the open and closed quotes are different. 2:06
Design programs have an automatic way of turning quotation marks into curly quotes. 2:10
In Figma, go to the menu in the top left corner, click Preferences, 2:16
and make sure Substitute Smart Quotes is turned on. 2:21
Otherwise, you can manually insert smart quotes with your keyboard. 2:24
Check out the teacher's notes to see what keys to press. 2:28
If you need to interrupt the text, do not use a hyphen. 2:32
A hyphen is the short line on your keyboard which is used in 2:34
hyphenated words such as part-time musician. 2:39
Then there are en and dashes. 2:43
En dashes are a bit longer than hyphens and 2:46
are used to indicate a range of time or numbers like one through ten. 2:49
Dashes are even longer and indicate a break in thought. 2:55
For example, it's such a beautiful day in the park — hey! 3:00
Is that squirrel wearing a fedora? 3:05
Check out the teacher's notes for key strokes. 3:07
[SOUND] Another feature of open type is stylistic alternates. 3:09
When a font has this feature, it means there is more than one option for 3:15
a given character. 3:20
For example, a font can have several different ems to choose from. 3:22
Let's look at an example. 3:27
Railway is a Google font with this feature. 3:30
Go to Type Details and toggle on and off the Stylistics Set 1. 3:33
See how the letter forms change, such as the uppercase W and G? 3:39
I put them next to each other so you can compare. 3:43
All right, you've made it. 3:49
In summary, we analyzed the content, chose a typeface pair to work with, 3:50
put together a color palette, set up our web fonts and typographic scale. 3:55
Laid out type with good measure and rhythm, 4:00
created typographic hierarchy in the design, and polished it responsibly. 4:03
I hope y'all leave this course with a better understanding of typography and 4:08
know how to execute it well. 4:12
Go forth creating designs with nice type. 4:14

You need to sign up for Treehouse in order to download course files.

Sign up