Shift Nudge - Interface Design Course - Core - Typography

Typography is the cornerstone of user interface design. This module is an extensive deep dive into the world of exquisite type usage. Simple, thorough and practical.

Font Size

Why


Sloppy and inconsistent usage of font sizes, weights, and colors is a telltale sign of someone who doesn’t know what they are doing with design. I’m not talking about the old vintage signage you might find that uses 8 different typefaces and just so happens to look amazing. I’m talking about interface design, where there needs to be a reliable and consistent system for a user to learn and understand.

My Rule of Four, as it relates to typography, is a rule not a commandment. And like all design “rules,” it can be broken, once you’re aware of it’s boundaries and why those boundaries exist.

This rule will help you remember some basic ingredients of typography for interface design. It’s not exhaustive by any means, but a good rule of thumb to start with— not the letter of the law.

What


Limit yourself to a maximum of FOUR type sizes only.

You might even realize that 1 or 2 type sizes looks best. In fact, that is totally encouraged!

As a general rule, get your 3-4 type sizes down and use those exclusively as your starting point. Adjust these sizes at a global level, not an individual level.

Variations of one font size:

  • ALL CAPS
  • Bold Headlines
  • Regular text
  • Emphasized

Can you break this rule? Yes. Can you use less than four type sizes? Yes.

Starting out can be difficult, so use this as a launch pad.

Take a look at the Instagram app for example. On the home screen, 90% of all interface copy is set at 15pt, whereas only the lesser important Story section, showcases smaller copy

Let’s look at the examples in this document to get a quick glimpse at this Fantastic Four rule of thumb at work.

Again, this is by no means exhaustive, but it is a very good starting point.

Look at nearly every interface that you believe to be well designed. It’s very likely you’ll be able to find some combination of consistent Title, Subtitle, Action, and Metadata type sizes.

https://www.figma.com/file/ezQmXwuJDV0XX4UjXrOalrQ3/Typography-Rule-of-4?node-id=0%3A1

Common Occurences


  1. Titles
  2. Subtitles
  3. Actions
  4. Metadata

These are the four most common areas, in which you will find varying degrees of type sizes.

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/

For example, as of iOS 13 the type sizes would be as follows:

  • Titles & Actions = 17pt
  • Subtitles & Body Copy = 15pt
  • Secondary Actions = 13pt
  • Metadata = 11pt

On nearly every single Apple-designed interface screen, you can find some combination of these sizes. Within the the latest iOS updates, you can find some titles temporarily set to 34pt, doubling the traditional size of 17pt, but only temporarily. Once it scrolls out of postion the trusty 17pt titles reveals itself.

This is another important thing to note. Every interface is always based on some moment in time and can therefore change accordingly. We’ll cover more on this particular topic in later lessons.

If you find yourself using way more than four sizes and having a hard time making things work, you may want to reconsider your type size choices.

https://twitter.com/keemween/status/1278667147959468032?s=21

Extending the Rule of Four


It’s important to note that this Rule of Four can easily be extended by changing other aspects of the type. Each of these changes, can effectively change the meaning of that particular piece of interface. More on interface definitions and meanings in later lessons.

Color

One way to distinguish a Title from a Subtitle could be to make the Title text completely black with #000, vs. a Subtitle of the exact same size and weight, with the color of #767676. Or perhaps to indicate action, text of the exact same size and color uses a blue #0066FF.

Weight

Similar to color, varying weights can give different interactive definitions to the text used in the design. In Instagrams example, they are using an incredibly subtle font weight change to indicate actionable profile names. Whereas profile @mentions along with #hashtags are treated with color instead of weight, because they are created by user input, as opposed to the Instagram design system.

Position

Simply changing the position of text can affect it’s meaning used in the context of an interface. Take for example, the right aligned text of set value inside of the Settings panel inside of iOS.

Decoration

Keeping any number of your four type sizes the same, but adding an underline, or a background color, is any easy way to stay within the Rule of Four sizes ballpark, but perhaps your action items deserve their very own size altogether than.

Case

Changing between different text cases can impact the look and the perceived functionality of what you’re designing.

  • Lowercase
  • Uppercase
  • Title Case
  • Sentence case

Lowercase

It’s almost never a good idea to use only lowercase unless you’ve got a very strong reason to do so, whether it’s a branding thing or anything else. But remember we’re talking “rules of thumb” here not letter of the law.

UPPERCASE

UPPERCASE can be a very nice way to provide an interesting variety in your typography mix. Keep in mind that UPPER CASE LETTERS will appear to be a font size larger than your otherwise, Sentence-cased friends. UPPER CASE ****might be used for smaller titles on lists of things, or maybe even primary action buttons. The choice is yours, but don’t forgot about this very handy weapon in your typography toolkit.

Title Case

Title Case is great for titles. Make sense, right? So keep that in mind for your titles, but you may also experiment Title Case on your buttons or actions as well. It’s a subtle, yet handy differentiator when it comes to handling typography.

Sentence case

Just like it says, Sentence case capitalizes the first letter of the first word in your string of text. Sentence case is best use for sentences when a complete thought is expressed. You could make a case for using Sentence case in other areas, but you better have a really good reason for doing so.

Homework


You are the designer. Use this Rule of Four to get your started and to keep you on track. Maybe you only use one font size in your design. Maybe two. Whatever you decide keep it consistent and create a “reason” for each of your choices, so it’s easier to explain it to others later when you need to sell your designs.

For your design exercise, I want you to design a conceptual “Settings” screen for controlling a coffee cup via a mobile device.

It’s not required, but If you’d like to use an image, here’s one below or you can look for something else on Unsplash.

Parameters for the design

  • Use the SF Pro font https://developer.apple.com/fonts/ Scroll to Fonts and click “Download SF Pro”
  • If you’re on Windows you can still use SF Pro, but it requires a little work. Totally fine to use Inter, Roboto, or Helvetica.
  • Assume that the would-be coffee cup is already connected to your phone.
  • Use no more than 4 type sizes for all of your data. Use either 24pt, 17pt, 15pt, or 13pt fonts.
  • Design on either an iPhone X canvas size (375x812) OR the size of the device you have in your pocket. If possible mirror to Figma, etc. while designing.
  • Try to use text as much as possible as the interface. Try not to rely on too many boxes or button shapes. Think of this as a coffee cup for typography nerds. :nerd_face:
  • Possible attributes for the settings screen to design:
    • Name of Smart Cup
    • Temperature of liquid (possible notification when temperature has been acheived)
    • Cup LED color
    • Status of cup
    • Last used time and date
    • Battery percentage
    • Check for updates
    • Firmware version

Choose all or some of those attributes for your design. :ok_hand:

iOS HIG Font Size reference

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/

Font Weight

Why


Font weight affects the percieved hierarchy of information, the readability of text, and sometimes the affordance of action.

In most cases, simply changing from a regular weight font to a bold weight font can be just enough of a change to signal a different meaning with that usage.

When designing interfaces, the type usage is the most critical part of the interface, and making subtle changes here and there can be the best way to emphasize parts of the interface while de-emphasizing others.

What


  • Font weight (different styles)
  • Visual weight (space, color, layout)

refer to video for more examples

https://codepen.io/mds/pen/JjjrmjY

https://codepen.io/mds/pen/JjjrmjY

Font Weights

On the web, you can set any font’s weight using a range of 100-900, or normal, bold, bolder, and lighter.

h1 {
	font-weight: normal
	/* other options are bold, bolder, lighter */
}

h1 {
	font-weight: 400
	/* other options are bold, bolder, lighter */
}

But keep in mind that these options for CSS don’t always guarantee that you’ll end up with the result you’re looking for.

Weights has everything to do with what comes with the typeface. THEN, these numbers for weights can be programattically defined. You don’t need to worry too much about this right now.

The big takeway is that the font you’re using defines what weights you have available.

If the font you are using does not include a variety of weights baked in, and you try to force it bold, it will try to do so programmatically. Do not rely on faux bold and faux italics. This is a computer-generated thickening or slanting of a typeface and the result is not good.

Standard weights

Light and Hairline should be avoided in most cases with the exception of really large headlines. It’s just hard to read in most contexts. But is also depends on the typeface.

Regular, Book, and Medium are generally good weights for body copy.

Semi-bold, Bold, Heavy**,** and ****Black ****are typically going to be reserved for headings, unless you’re intentionally going for a chunkier kind of style—similar to what I did on this Shift Nudge beta page.

Creating weight with negative space

You can use negative space to surround any particular amount of text to give it implied visual weight and significance.

Creating weight with color

Large chunks of contrasting color can create heavy visual weight without even changing the font weight. Think of buttons used as large calls to action.

Homework


For your homework on font weight, I want you to go back to your coffee cup file from the previous lesson (go do that lesson first if you haven’t done this one yet)…

  • First, make sure you don’t delete your first one!
  • Create a new artboard or new page in your doc.
  • Now instead of using 3 or 4 different type sizes for the interface, revise your existing design to use only 1 type size.
  • You can use any weight of the typeface you’d like, but do your best to limit yourself to only one size.
  • Create additional “visual weight” by using negative space and color for drawing the eye’s attention to different areas.
  • Use the squint test if you’d like to see what area is drawing your attention.

Hierarchy

Hierarchy—a system or organization in which people or groups are interface elements are ranked one above the other according to status or authority.

https://twitter.com/nlevin/status/1176525956959232000

Why

When you’re designing for a screen, it’s important to consider the hierarchy of you layout. And that hierarchy is typically produced first and foremost by your typography size and style. Hierarchy is important because it elevates the significance of one UI element over another in in the context of the full layout.

This doesn’t mean that all titles should be necessarily be larger and more important than body copy or that all interactive items should be colorful and more pronounced… It just means that hierarchy is important to consider while creating your design.

What

Some key things to think about when considering hierarchy on your screen.

  • What do you think the user is planning to do on a particular screen?
  • Are they exploring and browsing or trying to accomplish something very specific?
  • What are you hoping the user does or can do on a particular screen.
  • What is the most important piece of information on the screen? Second-most? Third-most?

Headlines or titles for a general layout are often the most important element on landing pages or more general type pages.

screen reference in video

  • apple.com
  • text messages vs. individual text message
  • gosquared dashboard

Homework


Design a “leader board” module—like the top ten people who finished a race or any other kind of event that interests you. Free to make it fun.

Use avatars and names

List 5-10 people using fictional names from your favorite TV show, or if you want to get fancy inside of Sketch, you can use the auto-populated avatars and names. (show example)

Or snag your own from Twitter or https://uifaces.co/

Make sure you use a numbered list so each person has a number or ranking and give them some arbitrary score (the higher the score the higher the rank)

Give the module some filters at the top: All-time | Last 7 days | Last 30 days

Give the list of people a title. You decide whether it should go above or below or beside the view filters.

Maybe the first place person’s name is the largest on the screen. Maybe the title is the largest. You decide what works best for your design using your own “lens of hierarchy”

If it helps, make a list of top three actions you would imagine someone taking, for example:

  • Most important piece of information
  • Secondary controls
  • Metadata (score) or is this more important?
  • Revise the typography and/or style of elements to reflect the heirarchy
  • Use type size, weight, and color to your liking
  • Focus on using constraint and consistency :ok_hand:

Design file links

https://sketch.cloud/s/rxnlG

https://www.figma.com/file/O5K8MdqGYDhHbJ3TfEywgD/leaderboard

Titles & Body

Why


Titles combined with body copy makes up the majority of most interfaces and could easily be considered the core part of any nearly any interface—whether it’s a marketing site, a complex web app, or a simple mobile app.

Yes it’s mixed in with titles and subtitles, calls-to-action and more, but once you drill down into any type of app with a detail page, you’re going to end up reading.

What


Title Size

These are general approximations not strict laws

For apps

Primary: 34–17pt

Secondary: 17–13pt

For the web:

Primary: 96–24pt

Secondary: 34–16pt

Title Weight

The weight for your titles should be at least 2-3 weights darker than your body copy, depending on your selected typeface.

Bold Title

Semi-bold

Medium

Regular Body

The larger you go with your title size, the greater the flexibility you have with your title weight. The titles will naturally seem bolder as you get larger, so you’ll have more room to explore here.

Hoefler & Co. Reference

Title Line Height

Your line height on multi-line titles should be less than the line height on you body copy. The larger the type size you use, the large you can see the line height cap take affect.

Title Case or Sentence case 100% – 120%

UPPERCASE 80% – 100%

At a minimum for title case or sentence case, you need to make sure your ascenders and descenders aren’t clashing with each other and this will largely depend on the typeface you’re using. With UPPERCASE letterforms, they’re more blocky and you can get away with tighter line heights because the top and bottom of each letterform is in the same location.

Ascenders like in the lowercase letters b d f h k l can often extend higher than their caps counterpart B D F H K L.

Title Width

For marketing web sites or articles on large screens

Make sure there is a nice amount of negative space around your title. This can be done by using short titles, layout grids, and also by manually line-breaking longer titles to contain an even amount of characters.

For apps and small screens

The width will likely extend to the edges of the screen or up against other interface elements. Make sure that there is appropriate padding around the edges of the screen and the other elements.

For unavoidably long titles, as is often the case with user-generated content, make sure your designs show the variations of short titles, medium length titles, and long titles. Often times this may mean one line, two line, or three line titles.

However long the titles may be, you will also likely need to account for the truncation of the title using an ellipsis (…) which indicates more.


Title Alignment

The majority of the time the term “alignment” is used in conjunction with Typography, it’s referring to horizontal alignment—left, right, centered, and the not-so-used-really-at-all justified.

Titles are most often aligned left or center depending on the screen layout and overall direction of the design. The biggest thing to keep in mind is not to carelessly mix centered and left aligned titles and body copy.

For short blocks of copy paired with a title, both strings of text can be center aligned without legibility issues, but the longer the body copy, the more likely it needs to be left aligned.

When you have left aligned body copy, it can be odd to have centered headlines unless you specific layout works it in in a nice way.

  • Left or centered (depending on context)
  • Make choice based on the visual balance of other elements

Body Size

Body size is typically is typically 16px by default, but can go slightly larger or smaller depending on the context of your design. Some typefaces need an extra bump in size to read well, and other use cases like technical information, etc. might be fine using a 13px font.

Body Weight

Book, Regular, or Medium is a great sweet spot for most body copy. You can of course go bolder if your particular design calls for it, but you should :no_entry_sign: never use Thin, Light, or Hairline. Those lighter weights do not render well at smaller sizes and become quite hard to read.

Decide your body weight in conjunction with other elements in your layout, including titles.

Body Line-height

Optimal line-height for body copy is anywhere from 125% – 175%

Body Width

The magic character count number for body width falls somewhere between 45–75 characters, including spaces. Refer to readable.now.sh as a good example.

This isn’t often an issue on smaller screens, because body copy spanning the full-width is often nice and legible, but it becomes of utmost importance as screens get larger.

If the body copy stretches too wide it becomes too long and hard to read from the end of one line to the beginning of another.

The best way to handle this on the web is with CSS max-width: $number on the paragraph tag or its container:

p {
	font-size: 18px
	line-height: 125%
	max-width: 70ch /* 700px, 40rem, etc. */
}

It’s not that important that you know CSS syntax as an interface designer, but it is extremely important for you to make sure that paragraphs don’t extend too wide.

Body Alignment

In general, body text should be default aligned to the left. This refers specifically to a block of text, like multiple sentences or a paragraph.

Sometimes body copy might appear as one sentence and in this case there is great flexibility with how it can be positioned.

  • Amount of content allowed vs. Read More
  • Expand/Collapse or new page
  • Alignment
    • Left, centered, or right (depending on context)
    • Make choice based on the visual balance of other elements

Letter-spacing


In regards to L E T T E R S P A C I N G,

You should only “noticeably” letter-space ALL CAPS. By their very nature ALL CAPS are blocky and can easily be letter spaced and still look pretty nice.

But NEVER letter-space out l o w e r c a s e l i k e t h i s. The letter forms are too inconsistent and ends up looking very odd.

This is a BIG typographic no-no.

You can track out or in lowercase to give the entire body copy a little more air or a little more condensed, but never so much that it looks spaced way out.

https://twitter.com/steveschoger/status/1204433950518792192


Title Tips

You may find that using additional elements WITH your title will help give it more balance. Look at the example below from a Medium article. Notice how the avatar, username, and date balance the book mark and more icon on the far right—like an invisible horizontal line.

These items below the actual title give the entire header more visual weight, which naturally creates a nice hierarchy.

Consider adding some additional information like this to your Title homework as well. :+1:

Homework


Choose either the primary or alternate homework to get started…

Dummy copy I used in my video, but you may want to grab an actual blog post with actual content to make your job a little easier. Real content will always be easier to design with over dummy copy.

Primary Homework

Layout 3 different artboards or frames (refer to video for full details)

  • Title
  • Body copy
  • Secondary title
  • More body copy

Alternate Homework

Revisit the contact card you designed for yourself in an earlier lesson. Choose between a larger webpage size 1440px or a smaller mobile style of 375px.

Items to include:

  • Your avatar
  • Your name
  • Your URL (or your email)
  • 5-10 sentence bio of yourself. Don’t stress on this too much, just make sure it’s enough to occupy around 5 or more lines of text. Copy and paste Darth Vader’s bio if you’re having a hard time writing this. =)
  • Your dribbble username with dribbble logo

Let’s stick with SF Pro or Roboto for this exercise, for now…

Try stacking your name and your URL on top of each other. Try left aligning your name and on the same line, right aligning your URL. Try switching your URL with your Dribbble username.

Try 2 or 3 versions where you intentionally emphasize certain things over the other using size options of body copy—14pt, 16pt, 21pt, etc. for example.

Keep a copy of each attempt in your file! Examine the differences.

Try to emphasize clicking your social links as the primary action.

Try another version where you really call most attention to your small bio with larger body copy.

Try another version where everything is very similarly sized and nothing is accentuated.

Title and body copy checklist

  • Have I made a conscious decision to make my title larger and bolder or smaller and lighter compared to my body copy?
  • Have I carefully considered line height for both titles and body copy?
  • Have I carefully considered the width of the text box?

Callouts

Why


“Callouts” add visual interest to typography-based layouts and the term is more of a graphic-designed based typography term whereas on the web you might find callouts more often than not taking the form of “block quotes” or “pull quotes”

They can be used to “call out” attention to any specific information you’d like to highlight.

Callouts can be created with other elements like background colors, borders, arrows, and more, but we’ll be specifically looking at typographic callouts in interfaces here.

Another way to think about a Callout, is some special attention given to text that grabs attention for a specific reason.

Despite all of this, when you are constantly battling between form and function, you must make sure you aren’t overdoing your typography so that functionality is hindered.

These are mostly used in content heavy layouts meant for consumption. Think articles, longer form text, marketing websites, etc.

A typographic callout would technically not refer to any special functionality, though it certainly could if the situation warranted such a treatment.

What


Let’s go over a few examples of typographic callouts in some interfaces…

  • Clock iOS app time stamps
  • App store first sentence with bold letters
  • Eyebrows (small all caps headers above the main header) Games tab in iOS app store
  • Testimonials on AIUX (combined with quote, avatar, company logo, etc)
  • Testimonials on Basecamp (super bold)
  • Testimonials on MyMonero
  • Callouts on 12Stone.com’s website

Refer to the video above for examples

How


Change type size and or case

A good way to start out experimenting with this is by doubling or even tripling the size of your text. Try ALL CAPS, but keep in mind that when you go larger in size, you’ll need to reduce your line height.

Change the color (text or background)

Try changing the color of you text in addition to or instead of changing the size. Just be HIGHLY aware if you are using an “interactive” color within your design.

For example you wouldn’t want to make a big callout the exact same color as your link color. We will cover color usage more in-depth in another lesson, but do be aware that each color you use has an intrinsic meaning based on the functionality you assign to every element

Combine other elements to create a lockup

Often times a larger quotation mark or horizontal line can create more visual interest. This is the mystery of design. There is often no right or wrong in these cases, because it’s highly dependent on the outcome you are going for.

Break the format

Try breaking the boundaries of the existing design. Grid and structure is great for keeping everything organized, but there are ways to break out of the grid to create visual interest. This is something that you will constantly have to experiment with.

Homework


  1. Design one callout highlighting a specific sentence within a longer form article. Try any loremipsum generator for quick body of text, but better yet… snag something of personal interest to you—an author, a hobby, a cause, an object, etc. from Wikipedia and copy and past into your design tool. Pick one or two sentences to “call-out.” Try multiple variations. Duplicate your artboards and try them all quickly. Fiddle around with one until it feels right, but before you change too much, duplicate your artboard and make more changes. Artboards are free, feel free to use as many as you’d like during this exploratory phase. Use a larger artboard, like a 1440x800.

  2. Design another callout specifically around a quote or testimonial. Include an avatar or photo with the text. Add the person’s name and title… make it up or use a real one. For this one use a mobile artboard, either 375x812 (iPhone X) or a different one that you can mirror directly to your phone using any of the companion mirroring apps. Figma, Sketch, Adobe, InVision, all have mobile apps for mirroring.

    • Picture
    • Name & Title
    • Quote
    • Additional element (quotation mark, horizontal line, icon, logo, other design element)

    Try this…

    • Try one with changing nothing but font weight and size
    • Try one with alternating between ALL CAPS and Title Case.
    • Try one with typography differences only using negative space as your divider
    • Try one with design elements including borders, backgrounds, and even dropshadows.

Truncation

Why


Truncation happens often in interface design, because so much of the data we see in apps is user-generated and the length of content is somewhat unpredictable.

Whether it’s usernames, video titles, or a list of random things… chances are someone other than the designer of the app, populated that thing with some data.

Homework


  • Design 3-5 components of either the Youtube sidebar or the Apple Podcast app.

Go for a pretty pixel by pixel copy of this one to get a feel for the exact sizes and spacing they’re using.

YouTube sidebar

You may want to grab your own screenshot and paste into your design tool

Apple iOS Podcasts

More inspiration

For typography layouts https://www.typography.com/blog/type-capsules

Text Style Definitions

Why


When you read a legal document pertaining to an agreement between two parties, you’ll find language like this…

This Statement of Work #01 (“SOW”) is dated [today’s date] (“Effective Date”) by and between Awesome Client, LLC (AC, Client) and Studio Mds, LLC (“MDS, Service Provider”), and is executed in accordance with and subject to the terms and conditions of the Parties’ [today’s date] Master Services Agreement (“MSA, Agreement”).

At first glance, it might seem like overkill to have the additional descriptions in parentheses, like (“MDS, Service Provider”), but this is in fact the clearest way to describe certain words that might be used later in the document so it is clear to everyone reading the document, what exactly MSA means if used in the language somewhere.

The entire purpose of definitions in a legal document or even language for that matter, is for clarity’s sake. We have to mutually agree on the definition of a word before we can agree on any concept that that word might be used to describe.

THEREFORE, it is aslo imperative that we DEFINE our text styles (font choice, size, weight, style, treatment, etc.) with their own definitions. As designers we have the power to assign and define any text style or treatment however we’d like.

One of the worst things we can do for our typography, is to mindlessly throw around styles and treatments without regard for their systematic impact.

What


Refer to video for examples

  • Figma’s interface. Inter Font. 11px Bold. 11px Regular. #222222 and #B3B3B3
  • Apple’s iOS structural typographic system
  • Skyscanner or other personal typographic systems
  • Outline the use of headers, subtext, body copy, action items, links, ctas, helper text, input text, labels, and more.
  • navigation text and action item text

How


Refer to video for examples

You don’t have to start off designing the system itself, but rather let it evolve from designing individual components, and slowly let those components come together to inform your system of how to work.

  • How might titles be treated?
  • How might my interactive color be treated?
  • How might my links (go somewhere) vs. actions (do something) be differentiated?
  • Will certain background colors and treatments affect the meaning of what my text will do?

Homework


Create a mini-style guide with 3-5 typographic elements in abstract form (Title, subtitle, body copy, link, or CTA) and then create 3-5 separate pages using those abstracted styles, while maintaining their strict definitions. Feel free to design first, then abstract

Create a master style section that contains style definitions for these four properties. Use Inter or any other font you want from fonts.google.com Eg. Fira Sans

  1. Title
  2. Subtitle
  3. Body
  4. CTA

Feel free to substitute with your own personal preference of food items.

Title = Menu

Subtitle = Flaming Cheeseburger

Image = Image of a cheeseburger

Body Copy = Market fresh burger with sharp cheddar cheese and high heat from fresh chopped habanero’s.

Link = Read more

CTA = Add to Plate

Title = Farm to Table

Subtitle = Locally sourced meat and vegetables for the best possible experience

Image = Image of a restaurant

Body Copy = copy and paste something here with some sort of substantial paragraph length

Link = Read more

CTA = Get Directions

Use the exact same typographic system for both of these pages. Alter the system and let it affect both pages.

Try this…

Pay special attention to how you are assigning a definitive value to each of these elements.

  • Title = 24px font with 1.2 line height in #222 color
  • etc.

By simply styling a title or any other element any specific way, you are DEFINING that style for that purpose. You can always go back and make changes or edits, but make sure you are changing that at the root level vs. a one-off.

During the design process, and I’m talking beginning, middle, and end you should be constantly defining each style of typography as well as other elements. This is not a one-time event. It is a continual process. Even though you may have assigned a definition to a particular style you may see that as other design problems arise that there are better usages for certain styles that can apply more broadly.

Big Takeaway: Define styles as you go. Assign definitions, but during the process, set nothing stone. Only solidify definitions near the end of the project.

Also keep in mind that there may be scenarios where you extend the definition of a certain style to allow it to fit better into a design for a different purpose.

Interactive Text

Why


A user needs to know what is clickable and what is not.

What action, if any, does the style of the text represent?

Is it read-only or is it interactive?

These are things that need to be definied when designing interactive text.

It is imperative for the text on an interface to have clear meaning for the user.

That meaning will vary project by project and each one must have a clear interaction style.

What


What text on an interface is interactive? And the text that is interactive, is it an action, a destination, a link? A small contextual action or a large primary, page changing action.

A few examples of interactive text include, but are not limited to the following…

  • Navigation
  • Actions—Primary and Secondary
  • Links (note WCAG accessibility with underlines) (default, hover, hit, active, visited [less often used])
  • Destructive Actions
  • Interactive Line Items
  • Reinforce definitions for user

Refer to video for examples

Interactive text may be defined by the following properties:

  • position
  • size, weight, or style
  • text color or background color
  • surrounding elements such as borders, backgrounds, and icons (exxon)
  • or any combination of the above

How


Refer to video for examples

As a general rule, the larger the impact of the action, the more drastic the change in color, contrast, weight, etc. should be

Homework


Design an event RSVP form that adds a person (or persons’) name and email to a list for an event. Design another screen that serves as a review with the ability to edit for any incorrect information.

https://www.figma.com/file/rW07GOmBMXVsaAZf03VQVv/Module-2-%E2%80%93-Interactive-Text?node-id=0%3A1

Items to Include


  • Event Title
  • Event Description
  • Party Lead (Name, Email, Dietary Restrictions)
  • Party Members (Name, Email Dietary Restrictions)
    • Ability to add more members and remove them once they’ve been added

Show Before, During, and After States

  • Before – Fields are empty
  • During – Fields are being filled out (keyboard showing)
  • After – Fields are complete and info is being reviewd for submission
  • Bonus – Submission complete screen

Important UX Decision

Decide whether or not your form is one big form for adding everyone in one screen and then reviewing all of those people at once. In this case “editing” from the review page would take you to the big form for editing all at once.

OR

Maybe every person is added separately in a modal view and the review page allows you to go back to edit one person at a time.

Combining Text and Elements

Why


Most interfaces are a combination of multiple elements, not just a lines of text only. Quite often you’ll be combining text with other text as well as other elements.

It’s important to have a grasp on the proper way to combine text with other elements so you can create the best designs possible.

Our primary focus here is creating balance with the text and over other object.

What


refer to video for examples

Your text needs breathing room.

  • Make sure to pay special attention to the space around the text in all instances.
  • When multiple text fields are together, include variety to distinguish each ones purpose.

How


refer to video for examples

Pay special attention to negative space when combing text with other objects.

Key Takeaways


  • Pay attention to overall balance at a high-level. (zoom out)
  • Create the balance at a low level—size, spacing, color, copy, etc. (zoom in)
  • Be generous with your negative space surrounding all text elements.
  • When aligning text horizontally, align with the baseline.

Homework


Screen 1

Design a mobile view of 6-8 products in a 2x2 grid. You pick the type of products by pulling images from anything you find interesting, random, or funny.

Reference

https://www.nike.com/w/mens-metcon-training-gym-shoes-3yxqsz58jtoznik1zy7ok

Include:

  • Image
  • Title
  • Category
  • Number of options—color, etc. (if applicable)
  • Price

Screen 2

Design a mobile product detail page of one of the products on screen 1

Use amazon.com, nike.com, etc. for reference of what should be included.

Feel free to copy directly or branch out and make your design unique.

Reference https://www.nike.com/t/metcon-5-ut-training-shoe-1npF7l/CD6860-283

You can simplify this page some, it doesn’t need to include every single thing, just the following.

Include

  • at least one large image
  • title
  • category
  • short description
  • select option (size, color, etc.)
  • add to cart CTA

Starting with System Fonts

What


  1. iOSSan Francisco
  2. Device Capable Fonts
  3. AndroidRoboto
  4. Windows – Segoe UI, MS Sans Serif (Not available for purchase, comes with Windows operating systems)
  5. World Wide Web (slightly less important to keep in mind)
    • Times New Roman
    • Arial
    • Courier New
    • Verdana
    • Georgia
    • Palatino
    • Garamond
    • Bookman
    • Comic Sans
    • Trebuchet
    • Arial Black
    • Impact

Why


User familiarity is perhaps one of the most important reasons for using a system font, especially if you’re designing a native iOS or Android app.

Think about the way you use your phone. It’s a utility first and foremost—checking the time or weather, setting alarms, scrolling through any number of social media posts. It serves as a passageway to get you to the content your trying to see, hear, watch, or… as much as I hate to say it, consume.

It’s not that common specifically with interface design, when there is a really big opportunity to go super custom with non-system specific fonts.

Interface design for the web is a slightly different story. There are many more ways to ensure the same font is seen across multiple browsers, etc. However, learning to design with the system font stack, is a great way to tip-toe into the world of typography.

As you get more confident and want to venture out, then you can start experimenting. In fact, I encourage you to just that. Using new and unique fonts are amazing ways to stand out from other websites and pieces of software, just make sure you don’t over do it.

Using restraint in design is often a foreign concept for new designers. Don’t be afraid to conciously “not overdesign something” especially when it comes to crazy typography.

One less decision to make

When you’re designing a new project, there are so many decisions to make. Sometimes a brand already has a font that is “their font” and you need to use that. Other times you’re designing specifically for iOS and Android, so it makes sense to start with the system font.

Using constraints, even if self-enforced, is a great way to make great designs. Having an endless possibility of fonts, colors, and pictures is an easy way feel overwhelmed. So make it easy on yourself when you’re getting started and consider going with the tried and true system fonts. It doesn’t make you any “less” of a designer.

Performance

Speed and performance is key. Baking a font set into a downloable app, isn’t that big of a deal, in terms of overall app size and performance…

BUT…

When you’re using custom fonts on the web, often times there is javascript that must be loaded to call a third party server and the load times can easily get bloated and slow down the speed of the initial load time of a website. Slower load time, means visitors are bouncing. Visitors bouncing, means few conversions. And at the end of the day, we’re designins websites, mobile apps, for people to use. What’s the point of designing something that’s hard to use?

Custom fonts are great when used wisely, but there are many considerations to sift through, so again, don’t feel bad to start with common system fonts.

Cost

Cost is another huge factor. Are you or your client or your team willing to pay annually for a unique font. Are there view limits associated with the font? For example, 100,000 views per month?

I did, one-time, convince a client to spend $999 on the complete FF Mark font family. It took sometime, and I really did believe this would be a wise way for this particular company to have a very unique font for their project.

There have been plenty of other occasions, where I suggested specialized fonts for web projects, in fact I’m a huge advocate for that, but starting out, don’t be afraid to keep it simple.

How


System fonts and their various weights can take you very far. At the end of the day, I want to drill into you that using system fonts is a good thing.

Only venture outside the font box, when you reach a point where it just feels like you need something different. That may be on the very first project for you, and that’s ok too.

You are the designer, so unless there are font requirements for your project, YOU should decide when to use a system font and when you feel like going custom.

Homework


I’ve been assigning most of the homework with the SF Pro font by Apple. So for this assignment, I want you to take anyone of your existing assignments and refactor it using a different system font so you can see how the vibe changes with a subtle change.

If you have SF Pro, try Roboto, or vice versa. You may also want to make a slight change to one or more of the sizes you’re using and possibly even a weight change here or there.

See if there are any other areas in the design you’re refactoring where the typography can be tightened up. Look for horizontal and vertical spaces between elements. Make sure your using consistent spacing between everything.

Screen 3 (…continued from previous lesson)

Recreate the Stripe Checkout form.

Go here and scroll down and click Preview Checkout.

Make the browser window small so you get a one-column layout.

Pair your text with a business logo (Stripe Press) or something similar.

Notice the combination of input fields and the individually controlled border radii on each input field. Not typography focused per se, but worth noting.

Pro tip: use a screenshot on mac ⌘ option shift 4 to copy a screenshot of the card icons into your memory. Then ⌘ V the cards into your design program. If you’re on a retina Macbook pro you may need to divide the width of the image by /2 to get the appropriate size.

Don’t be afraid to do copy work like this. We’re not trying to pass off this work as our own, we’re trying to get exposed to the choices other designers have made, and gain an understanding of why they may have made them.

Further Watching

Here’s a really good example where using System Fonts and staying safe with your designs is perfectly acceptable when solving real world problems.

Choosing and Using Alternate Fonts

Why


https://twitter.com/mds/status/1169721389777076231

The primary reason you’d opt for a non-system font is to standout. Often times it’s a branding decision that requires the usage of a non-traditional typeface.

The same way not every song has the same guitar riff or the same drum beat, every app or website doesn’t necessarily need the same typeface.

Page 96. Elements of Typographic Style

…a (type) face of modest merits should be handled with great discretion, formality, and care. It should be set in modest sizes (better yet, in one size only) with the caps well spaced, the lines well leaded, and the lower case well fitted and modestly kerned. The line length should be optimal and the page impeccably proportioned. In short, the typography should be richly and superbly ordinary, so that attention is drawn to the quality of the composition, not to the individual letterforms.

Make sure you aren’t just using a random font without a purpose. And absolutely do not use a font in your designs before you know for sure whether or not it is even available as a webfont or has the ability to be used in an app with an app license.

What


  • Serif, Sans, and Mono-spaced. Things to consider
  • Why you may choose non-system fonts
  • Simple vs. heavily branded

Possibilities for using alternate fonts

  1. Custom display font for titles only + standard body copy etc.
  2. One custom font used for everything
  3. Two or more unique fonts used specifically for different things

Refer to video for examples

How


  • Do your due diligence BEFORE you design a whole bunch of things. Explorations are totally fine and encouraged.
  • how do I pair fonts?
  • keep these things in mind when pairing fonts
  • show different projects of my own where I chose a different typeface to work with

First priority is determining Usage

For what purpose are you using a custom font? ****

Display only?

Display and body copy?

Legibility

Make sure the font your using is not hard to read. Especially for body copy.

Does it have a good x-height?

X-heights that are too low will be harder to read than a slightly higher x-heights. A good rule of thumb for a body copy candidate would be an x-height in the 60-75% tall ballpark. Higher or lower than that will be hard to read.

How’s the whitespace?

This referers to the spacing between the actual letterforms. If the letter-spacing is too tight, the letterforms will run together and affect legibility. We can control the letter-spacing or tracking programmatically, but this should be a last resort after an optimal typeface is chosen.

Typeface Feature Checklist

  • Good range of weights—light, book, medium, bold, black
  • Italic styles
  • Different widths
  • Small caps (?)
  • Accented characters for language support
  • What kind of numerical figures are included—old style and lining figures. Old style varies in height, whereas lining all have the same height and baseline.

Cost

:free: Free

Limited choices and all the good ones are used heavily in other places. Not easy to differentiate yourself by using the same typeface as everyone else. But type is the only way to standout, it’s simply one piece of the pie… but it is a large piece. On the plus side, it’s free!

  • Google Fonts
  • Open Source
    • Inter
    • Plex
    • Others?

:calendar: Subscription

Paying a monthly or annual fee for serving custom typefaces is a great option. You do need to check though based on your usage. App licenses (if they are available) can be more expensive than web licenses. This will vary from service to service.

  • Adobe Fonts (formerly known as Typekit)
  • Hoefler’s Cloud Typography

:moneybag: Premium

Buying fonts directly from type designers is a great way to get a very high quality font that stands out amongst a crowd, but the downside is that the price tag is often heftier. I typically have conversations very early on with clients about potential options for fonts and the variety that is available.

Often times these fonts require “self-hosting” the font on your server or within your app. This means that the font files themselves are literally baked inside of the app, or resting gently in your folder of files on your server along-side your .pngs and .html files. It’s important to know these things before you start using these fonts in your design. Research before you start!

Fontshop is one of my absolute favorite websites to browse amazing fonts from many different Type Foundries.

Another great go-to font discovery website is MyFonts.

Here are a few examples of independent foundries to get great typefaces.

More resources


https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FXyYoiOrNV2mDL5PpPeNfvQ%2FAlternate-Font-Size%3Fnode-id%3D0%253A1

Homework


Design a [you pick] screen in the following ways:

Mix it up with either a serif, slab serif, or mono font. Or some quirky display typeface.

  • google fonts
  • adobe fonts – formerly known as typekit
  • or go all out and purchase a font you love from a type foundry
  • Klim Type Foundry has a downloadable versions you can test

Come up with some adjectives for a fun design direction. Keep it loose and explore. Have fun!

  1. Display Typeface for titles only with SF Pro or Roboto as body copy
  2. Single unique font for titles and body copy
  3. Two typefaces, one for titles, one for body copy

Typography Overview Document

Main Points


  1. Typography and copy is the majority of design
  2. Readability is most important.
  3. Letter-spacing. Paragraph width.
  4. Focus heavily on good typography. This is a cornerstone for good design.

Getting good with typography is one the single-best skills you can build. Knowing which font, size, weight, color, etc. is a universal design skill that should always be at the forefront of your decision-making process.

Within the world of interface typography, there are four main areas that I consider to be the most common and most important. Please remember, that this list, nor any other list in this course is not completely and fully exhaustive. It is meant to be used as a platform. A springboard. Use this as a baseline and go from there.

Utility


A major purpose behind typography is utility. This means presenting the text in a
way that is useful, clear, and legible to its reader. The content of a web page could
be incredible, but if the typography is lackluster, then it’s going to be difficult for
people to read and navigate. They’ll either struggle through it or quit along the way.
Both situations are undesirable. This is why typography as utility is extremely
important to present text in way that’s clear, orderly, and legible for readers and
users of your site.

Personality & Mood (Art Direction)


Type can have a personality or mood. It gives off a certain vibe and conveys something to the reader before they’ve even digested a single word on the page. The flavor of your typography should match the voice of your content. You don’t want something that looks like
chocolate ice cream to taste like meatloaf.

Elements of a Typeface


  • Cap height
  • Baseline
  • X-height
  • Descenders
  • Ascenders
  • Serif & Sans Serif
  • Contrast
    • High contrast – thick vertical, thin horizontal
    • Low contrast - same size vertical and horizontal
  • Color (Weight)
    • Light
    • Medium
    • Bold
    • etc.

Types of Type


Serif

A serif is the small extra stroke found at the end of the main vertical and horizontal strokes of some letters. Hence the name, Serif Typface. Letterforms without these serifs are called sans serifs.

Here are a few differnet serif sub-types.

  1. Humanist
    • Strong calligraphic influence, diagonal stress, relatively small x-heights
    • Eg. Jenson, Kennerley, & Centaur
  2. Old Style
    • More refined as type, less calligraphic, less diagonal stress
    • Eg. Goudy, Palatino, Perpetua, & Plantin
  3. Transitional
    • Even more decreasing calligraphic flow, thinner and flatter serifs, exagerated thicks and thins
    • Eg. Baskerville, Bookman, Clearface
  4. Didone
    • No influence of the pen, thin serifs with no bracketing, extreme contrast, remniscent of high fashion culture, best for display only
    • Eg. Bodoni, Didot
  5. Slab
    • Thick serifs and low contrast, heavy headline usage “look at me”
    • Eg. Rockwell, Clarendon, Sentinel

Sans Serif


Sans-serifs are the most commonly used typefaces in interface design. However with the advancement of high-pixel density screens, serif typefaces that were once not used because of legibility issues, are now used heavily for long form body copy on sites like Medium, New York Times, etc.


Sans Serif – Grotesque

  • Low contrast, possibly derived from Didot
  • Eg. Akzidenz-Grotesk, Franklin Gothic


Sans Serif – Neo-grotesque

  • Desire for simplicity. Not always great for body copy because of legibility, especially at small sizes.
  • Eg. Helvetica


Sans Serif – Humanist Sans

  • Great variations in line width, because of the calligraphic roots. Most legible of sans serif bunch at small sizes.
  • Eg. Tahoma, Gill Sans, Frutiger


Sans Serif – Geometrics

  • Based on geometric shapes like circles and squares.
  • Eg. Futura, Bank Gothic, Gotham

Scripts


  1. Formal
    • Mimics writing-masters from seventeenth and eighteenth century. Contrast between thick and thin the way a quill would be used by hand.
  2. Casual
    • Light-hearted, easy going. Think of hand-writing fonts.

https://practicaltypography.com/

Type Tidbits


There are lots of little tidbits when it comes to type that will be of varying importance along your typographic journey. Here are some of those tidbits.

Line height

Line height refers to the negative space between each wrapping line of text. A good starting point for body copy 150% of your type size, but this can range from anywhere to 125% to 185% depending on the type face, the content, etc.

Letter-spacing (also called Tracking)

Letter spacing

Use with restraint and caution on 90% of your text. All fonts have some form of spacing baked into the typeface by design. Adjusting the space between letters is just as important as designing the letterforms when it comes to type design.

Typefaces that are really well done will have paid special attention to letter spacing by default.

Paragraph width

  • 45-75 character wide is the sweet spot

http://readable.now.sh

Kerning

Kerning is like letter-spacing, but only applies to the space between two individual characters.

This should really only be used for isolated instances, especially in fixed elements such as logotypes, or special titles.

Tabular Figures

Ligatures & Discretionary Ligatures

  • Special characters used when combinations are found. Most popular ligature is “fi”
  • Icon fonts are created using ligatures

What about Vertical Rhythm?


If you want to do it, go for it. I’ve never once in my last 15 years of designing used a mathematical equation for vertical rhythm. Could that be a mistake? Maybe in someone’s eyes, and I’m OK with that.

I do strive to achieve balance in my typography and overall composition, but I find it much easier to do so with implicit grids and relational proportions.

True Vertical Rhythm requires an explicit grid for everything to adhere to. I’m much more of a fan of an implicit grid. I will cover explicit and implicit grids in later lessons.

If you really really want to learn about mathematical vertical rhythm and get super nerdy (which isn’t a bad thing) with math equations, then go for it.

This course is fully owned by Studio MDS, LLC, the contents have been stolen and illegally uploaded (partially). A DMCA prosecution and takedown is underway. This is a clear violation of Section 5 of the terms of service shiftnudge dot com/terms.