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

Typography for Designers

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

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up