Typography for Developers Tutorial - Full Course

Typography for Developers Tutorial - Full Course - 双语字幕

This course is from Treehouse Instructor and Senior Product Designer, Hope Armstrong.

You'll learn all you need to know about creating good typography, which is one of the most important aspects of good design.

Hey, I'm Hope Armstrong, a teacher and product designer here at Treehouse.

Every day you see typography in action.

It's on the menu of that restaurant you love eating at,

it's on road signs you drive by, and it's definitely all over that favorite site of yours, which is, let's be honest, treehouse of course.

All that to say, typography is everywhere, whether people realize it or not.

Some things sell ubiquitous as often taken for granted,

but it's really powerful, as designs are often mostly comprised of type, there's so much to learn.

First, we need to understand what typography is.

On Matthew Butterick's site, Practical Typography, he defines the term simply as follows.

Typography is the visual component of the written This means typography comes into play when words are visually displayed on surfaces like screens,

paper, posters, signs, and more.

Though the words or content of something might remain the same, the typography can change.

Let's take a look.

Here's the text I shot the serif.

We can shape how it looks through typography.

For example, we could increase the size of the text and align it in the center.

We could change the typeface from Georgia to Futura and set it in uppercase letters.

We could also adjust the letter spacing or tracking between characters.

We could go on forever making different adjustments, but I wanted to give you a quick sample of typography and action.

If you don't know how to do any of these things, don't worry.

We'll cover how to practically apply all of this and more later on in the course.

So far, we've seen that typography involves changing, arranging, or ordering type.

But we wouldn't want to do this without a purpose or reason as to why.

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 webpage 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 a way that's clear,

orderly, and legible for readers and users of your society.

Another purpose behind typography is designing for an emotional connection.

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 wouldn't want something that looks like chocolate ice cream to taste like tater tots.

Let's say you have an official, serious business document that's set in a fun, quirky typeface.

Although the content might send the right message, the design or typography would not at all.

As you practice typography, you'll want to make sure the design aspect of it enhances the message at hand.

It can keep readers engaged and also create delight in them.

Because so many different things can come into play, good typography might seem a bit tricky at first to execute.

I like to think of it as striking a balance between utility and designing for an emotional connection.

Throughout this course, we'll look at different ways to maintain that balance, because typography is one of the most important elements of design.

Next, I want to make a distinction between typography and leverage.

These are two fields that are popular today, but commonly confused in the industry.

Both deal with letter forms, but in different ways.

Typography involves working with pre-made letter systems,

like typefaces and fonts,

to lay out an arranged content,

whereas lettering involves crafting letter forms for a single use and purpose instead of utilizing a pre-made letter system.

This definition is based on Joseph Alicia's article and the teacher's notes.

It's great for further reading.

Now that we understand the difference,

our focus for this course will be on typography and you'll be able to use those terms correctly in your industry.

Lastly, let's look at what it type these is and the elements that define and shape it.

The terms typeface and font are commonly used interchangeably today, but they are distinctly different.

A typeface is the design of a collection of characters,

so the term should be used when talking about the look of those letters, numbers, and symbols.

For example, I dig Futura, it's such a good-looking typeface.

A font is a single instance or embodiment of a specific weight, width, or style of a typeface.

For example, the computer file for Helvetica Bold Italic would be a font, whereas Helvetica would be the typeface.

Next time you're out and about, spot some typography you like and take note of what distinguishes it and how it makes you feel.

In the next video, I'll explain how typography relates to the user experience.

Typography makes or breaks a design.

When done well, it elicits emotions and conjures an understanding or connection to a brand.

Equally, just as successfully, it can slip away unnoticed as it makes reading so easy and pleasurable

that the reader doesn't fixate on the letter forms themselves.

The typography communicates without getting in the way.

Poor typography gives people a lower impression of a brand, product, or service.

And even worse, it can make an experience difficult or confusing.

I'll cover three main ways that typography affects the user experience.

First, typography is a major component of branding.

Look at any product you use and observe the typography.

The company has chosen a typeface that aligns with a brand message.

It also aligns and differentiates itself from other brands.

typefaces conjure various connotations that are influenced by culture and cognitive biases, and they affect how we feel about the brands.

Second, readability is important.

The shape of letters, space between letters, space between lines, and width of lines all affect a person's ability to easily read text.

It's so common for its busy humans to quickly scan text instead of reading every word.

So, improving the scanability of text is something UX designers seek out.

Third, let's touch on accessibility.

Accessibility is a core component of product design because it means to make a product or service easy.

Designing for accessibility benefits everyone, not just those who are differently abled.

Remember that the people who use a product you're designing may have a physical, cognitive, language, or learning disability.

They may have colorblindness, low vision, or use a screen reader to navigate the web.

As far as the design goes,

if you adhere to the best practices of typography, your design will naturally be set up to be quite accessible.

Choosing a typeface with distinctive, easy-to-read letters, an appropriate contrast, then correctly appropriate.

creating clear visual hierarchy, maintaining proper alignment, and making the text adequately sized will benefit everyone.

Here are a few specific tips.

People with visual impairments use screen readers, which read the text on the screen.

Therefore, for non-text-based media, such as videos, is advisable to add a to see the captions or transcription.

The same is true for photos, which should contain either visual captions or a description implemented with code.

Don't bake text into images.

Add text to websites and apps using markdowns such as HTML, so it's accessible to screen readers.

Also, text added in Markdown can be enlarged, whereas Raster images get pixelated when enlarged.

If you must include text and images, add the text to the image element with an alt tag when it gets implemented in code.

When conveying info, such as state changes and actions, don't rely on just one indicator.

For example, when communicating a status such as a success or error, include an additional design change beyond simply color.

When the design is implemented, there are guidelines and plays for developing accessible websites.

If you're interested in the coding details, check out the teacher's notes.

In the upcoming video, learn some terms that will help us talk about typography and typefaces.

Now that you understand what typography is, let's talk about some of the terms used to describe its different elements.

This will include typefaces, parts of letters, layouts, and more.

Instead of ambiguously trying to describe something,

like that low-swoopy part of the lowercase y,

these terms will make it much easier to know what you're talking about as we dive into typography.

Let's look at the numerous elements that shape a type of First, we have the cap height.

This is simply the height of the capital letters.

Next the baseline, which is pertinent to both the uppercase and lowercase letters, as it's the guideline for which the majority of characters rest.

The height of the lowercase letter set is determined by the lowercase x.

So, this is labeled as the x-height.

The x-height varies across typefaces and can greatly affect legibility.

Let's look at that.

A high X height means the lower cases larger in relation to the upper case, whereas a low X height means the opposite.

It's smaller.

When smaller font sizes come into play,

a typeface with a high x-height can help retain legibility because the lowercase is larger in relation to the uppercase.

Let's say you have two different typefaces and both are set at 12-point size.

One could be easier to read than the other due to the higher x-height.

You'll also notice there are certain areas where some lowercase letters descend below the baseline and others ascend above the X height.

These are called descenders and ascenders respectively.

The P here has a descender and the D has an ascender.

You might be wondering how low can descenders go or how high can a sender's climb?

Well, that also varies across typefaces.

In some typefaces,

ascenders climb up above the cap height, and others they sit below, and in some cases the cap height and ascenders are aligned.

This last case though can affect readability and letter recognition.

For instance, let's say you're using Helvetica, where the cap height and the ascender height are similar.

You're writing out a headline which includes the word, ILL, the uppercase I, and these two lowercase L's are hard to tell apart.

Some might read that as ILL, but others might read it as the Roman numerals.

This would be even harder to decipher if the letters appeared mixed up in a coupon code where uppercase, lowercase, and numbers are present.

I'm not saying don't use Helvetica or type bases with a similar cap and a sender high.

I'm saying pay close attention to your ascenders and descenders, and know what's at stake.

Let's move on to the next term.

The typeface we are currently looking at has serifs on it.

Serifs are projections that finish off the main strokes of a letter.

They can sometimes aid legibility and letter recognition.

For example, the problem we just encountered with the ILL would not happen here because the serifs are distinctly different on those two letters.

Distinctive character shapes help differentiate letters and serifs help letters flow.

The shape of letters particularly helps those with dyslexia and reading disabilities.

Other typefaces for ghost serifs on their letter forms.

These called sans serifs, sans meaning without.

Next, let's talk about contrast.

Contrast can relate to a few different things.

The first deals with the actual letter forms in a typeface.

A typeface with high contrast would have thick vertical strokes and then horizontal strokes.

A typeface with low contrast would have little to no difference in stroke thickness.

Contrast can also refer to the actual text and how it relates to the background.

Pure black text on a pure white background creates high contrast, whereas the light gray on a medium gray creates low contrast.

Later, we'll look at when creating high or low contrast is appropriate.

According to the WCAG contrast guidelines,

body text color should have a contrast ratio of at least 4.5 to 1 when compared to its background color.

Large text that is 18 points and larger should have a contrast ratio of at least 3 to 1.

Lastly, let's discuss color.

Like contrast, color can mean a few different things in typography.

The first is the simplest and is probably what comes to your mind.

It's the actual color of text, such as red, blue, yellow, We can create page contrast with changes in color.

Common color blindness conditions include red, green, and blue yellow.

People color blindness have difficulty discerning the differences between the two.

Therefore, avoid pairing color text and backgrounds in those colors.

There are browser plugins and other tools which allow you to test how those with colorblindness is your design.

Check out the teacher's notes for links.

The second meaning refers to the overall density of ink for text on If we want,

we can utilize different weights of the typeface at different sizes to create even color on a page.

We have lighter weights at larger sizes and regular weights of smaller sizes.

Or we can create uneven color by setting our headings to be bolder weights while keeping the paragraphs the same.

These heavy areas of color can create emphasis if needed.

When we use this term, we'll distinguish its context to avoid confusion.

There are many other terms used to describe different parts of letter forms and typography.

If you're hungry for more, you can also check out the teacher's notes, which includes links to a couple of glossaries.

With what we know now from this video, we'll be able to better understand the different types of type in our next video.

Now let's look at the different classifications or types of typefaces.

You might Why is this important?

Can I just find something I like and use it?

Well, I'm glad you asked.

Knowing different type genres will help you choose a proper type base for the projects at hand and make you a better designer.

For instance,

if you're working with a client,

he wants the mood of their site to convey You need to know what classes or styles of typefaces lean towards that bent.

Or if you're designing a site that's heavily influenced by a certain time period,

you should utilize a typeface that would have been appropriate to genres at that time.

As I mentioned earlier, typefaces have a mood or personality.

The way the characters look conveys a message to the reader,

knowing these genres will help us see how our type is talking and what makes it distinct.

So without further ado, let's dive in.

Type has been classified in different ways over the years,

but for simplicity's sake we'll look at three major genres, serif, sans and along with their sub-genres.

Up first we'll look at serif typefaces.

Like we learned from our terminology, typefaces can have serifs on their letter forms, and this would place them in the serif genre.

Simple enough, but within this genre we have a number of nuances that will set apart different serifs into sub-genres.

The sub-genres we'll be covering are humanist, old-style, transitional, deedon, and slab.

After the invention of the printing press in 1450, Logically, the creation of typefaces shortly followed.

Humanist typefaces arose around the 1460s and 1470s, with strong calligraphic influence.

Printers were creating typefaces based on the strokes of a pen when drawing letter forms.

They tend to have diagonal stress, lower stroke contrast, and a relatively small X-height.

Serifs are not as refined.

These are not as common today,

but some examples are Jensen, Kennerley, and Old Style came about next in the latter part of the 15th century.

The letter forms were getting more refined as type and less influenced by calligraphy.

We see less diagonal stress happening, and the seraphs have also changed to be more wedge-like.

Some examples include Gody Old Style, Palatino, Perpetua, and Plantin.

This brings us to the 18th century, where we see transitional type faces on the rise.

The trend of decreasing calligraphic flow continues.

And we have vertical stress, thinner and flatter serifs along with exaggerated contrast between fix and thins.

Some examples include Baskerville, Bookman, and Clearface ITC.

Next, we have the don't-type faces arriving in the late 18th century.

The influence of the pen is really nowhere to be found.

The seraphs have become even thinner without any sign of Contrast is taken to the extreme with thick verticals and ultra-thin horizontals.

You might regard these typefaces as reminiscent of the high-fashion culture.

They work great at large sizes with ample amounts of white spaces around them,

but as body copy at small sizes, their serifs and horizontals can quickly get Some examples include Bodhani and Dido.

Now, we'll head in the opposite direction with slab serifs, who have extremely thick slab-like serifs and low contrast.

These came about in the early 19th century, and were heavily used for headlines and advertising because of their bold, look at me, appearance.

Most of these are utilized at large sizes, but if you have been known to also work well in small-text sizes.

Some examples of these include Rockwell, Cleridin, and Injiptine.

Next, let's move into the new genre of sand serifs.

These typefaces do not have serifs on their letter forms, or literally are without serifs.

We'll look at grotesque, neo humanist, and geometrics.

In the late 19th century, we see the rise of grotesque sand serifs.

Though we see sand serifs as completely normal today, don't forget that there wasn't much of a reference for them when they came about.

The design of an earlier one,

Axon-Daw's grotesque,

has actually been theorized to be derived from D-done because the typefaces have similar metrics when the serifs from D-done are removed.

As we'll see in other genres, sans are typically low-contrast.

Some examples of grotesque also include Franklin Gothic.

The neo-rotas then arises,

refining some of the peculiarities in early These are some of the more common sans seraphs typefaces and Helvetica fits right in there.

Although there is a desire for simplicity here,

these aren't always great candidates for body copy because a simplicity and similarity in letter forms can often affect legibility at small sizes.

Other include Univer.

Next, we have humanist sands, not to be confused with humanist serifs.

And these get back to some calligraphic roots with greater variations in line widths.

These are often the most legible of the sand serif bunch,

hence their popular use as website So, you may be wondering, why are they more legible?

First, the modulation of the line thickness creates distinct character shapes.

This makes it easier to distinguish, so it's easier to recognize words.

Second, humanist letter forms have wide apertures, which, for example, helps us to avoid confusing a lowercase E as an O.

Examples humanist serifs include tohoma, gill sands, and fruity gear.

Next, we have our geometrics, which are quite popular today.

As the name implies, their letter forms are based on geometric shapes like circles and squares.

Examples Futura, Bankothic, and Now we'll move into our final genre of scripts, which are typefaces based on handwriting.

We'll subset this genre into formal and casual scripts.

Formal scripts are based on letter forms from writing masters in the 17th and 18th centuries.

They have some contrast between thick and thin, as they were inspired by the way a quill or nimble pen would handle the letter forms.

They tend to be more elegant and work well for events like weddings today.

Casual scripts are a bit freer and, well, casual.

They tend to be more light-hearted or easygoing than their serious, eloquent counterparts.

The contrast can range from low to high, depending on the type base.

They were often inspired by the way a brush or marker would handle the letter forms.

Alright, that was a lot to cover.

I hope it helps you get to know type a little better so we can make smarter choices down the road.

Also, think about if there is a certain genre that you naturally grab a

In the next video, we'll look at designing for print versus digital.

When laying out or setting type for print,

the process yields a tangible document such as a piece of paper, which has the text as ink on a page.

This final medium is quite different than a lighted screen displaying a certain amount of pixels to render type on Now,

let's look at two main ways web typography differs from print, and how we can smartly design with that in minds.

First, let's talk about desktop fonts vs.

websites.

Desktop fonts are used for print layouts and design.

They are fonts you install on your computer, which gives you the ability to use them in word processing programs or design programs.

The final mediums they can end up on are pages of paper, posters, billboards, JPEGs, PNGs, the list goes on.

Desktop were made with those mediums in mind.

Web fonts are font files that are not intended to be used in the same way that desktop fonts are.

Web fonts are created for the purpose of serving up a font on a website or app that might not be installed on a person's computer.

This is crucial when designing for the web.

We'll get into where to find what's going But for now,

just know there are several websites that let you download web fonts for free or for purchase.

In the distant past,

when creating a website, you could only use fonts that were already native to the person's computer, also known as system fonts.

The upside of using system fonts is there's no loading time,

the fonts are designed for legibility on the devices, and users have a familiarity with the font.

However, it limits your choices because you have to use fonts that are native to multiple operating systems on Windows and Mac.

Now that web fonts are common and well supported, you have more control and customization over what your users see.

When designing for a mobile app, the easiest option is to use a system font.

But if you prefer a custom font, look for fonts with an app license.

This makes it easy to use the font across iOS, Android, and other digital publishing platforms.

When for a web font, be sure to inform the client about the ongoing cost.

Some web font licenses are charged based on the number of monthly active users.

Sometimes, you'll have a larger budget for web fonts, which provides you with some flexibility and options to choose from.

Other times, there might not be room in the budget for web font licenses or subscription models.

If that's the case, try to help the client understand the benefits of good typography, and why there is a cost associated with web fonts.

For example, I might tell a client client, free type bases are fine to use and I will happily go down that route if needed.

But be aware there's a relatively small number of really good versatile free fonts, which limits our options.

Because of that, the good ones are often used on many which won't do us any favors in distinguishing your site.

To set your site and brand apart, I would recommend going with a subscription web font model.

Although there is some cost,

I think your brand and users will get much more mileage out of paid web fonts than if we went with free fonts.

After that, sometimes a client makes room in the budget, and sometimes they don't.

In the latter case,

we'll want to have all these principles we discussed in the back of our minds as we browse free web font sites to find good ones.

Another thing to note about web fonts.

Some popular typefaces have desktop licenses but may not yet be available as web fonts.

In this case,

you should reach out to the type designer or foundry to see if you can purchase a web font license or find out when one will be released.

Do not try to use a desktop license font and convert it to a web font, or serve up desktop font files on your site.

Not only is this not smart, but it's also breaking the license agreement for most typefaces.

Lastly, let's discuss another difference, which is fixed layouts versus fluid layouts.

In print or graphic design,

you're designing for a fixed layout, meaning the type and elements are arranged in a specific way that's locked into the medium.

For example,

if I was laying out a magazine article,

the type is set in a specific place with an exact width and link to the block of text.

Once that magazine is finalized and printed,

the type and layout remain that way, so you know exactly how the reader is going to see it.

With the web, it's much different.

Users might be viewing your site on a phone, tablet, or desktop, which all have different screen sizes.

Typography that might work great when viewing the site on a desktop computer could take a turn for the worse on a mobile phone.

With responsive design, we can create fluid layouts so that our type and layouts can respond to a user's screen size.

This gives us a ton of control, such as changing font sizes, layouts, widths, and more as certain We'll discuss this more later.

That's it for now, and good work finishing this stage.

I'll see you in the next stage where we'll look at how to choose and use typefaces.

With all this talk about fonts, you're probably itching to get some new ones of your own.

You're probably familiar with the standard set of fonts that come on your computer.

These are called System Fonts, and Android, iOS, Windows, and Mac each have a different selection.

These are immediately usable on your computer, although there is a relatively small selection.

If you do decide to design with a system font,

when it's time to develop it with code,

you can either find a web font that allows everyone to see the font,

even if they don't have it installed, or you can create what's called a font stack in your code.

It's a list that tells the browser which fonts to use.

For example, you may prefer Helvetica, which is available on all Macs, but not all Windows computers.

So, you can add Ariel as a fallback, which is available on nearly every Windows Luckily, system fonts aren't the only option.

There are tons of fonts available for download, and they're easy to install.

Here's how to install a font.

Find a font foundry or font distributor website, then by the features you're looking for.

More on that later.

When you find the one, download and install it on your computer.

You may notice there is more than one file per font style.

This can happen if there are different formats.

Here are the common font formats.

OpenType, TrueType, EOT, Wolf, Wolf2, and Files an OTF extension are open-type

This is the preferred format because it includes the most customization options and has widespread support across platforms.

Files with a TTF extension are true type fonts.

This is what was used before the open type format.

While they still work well, they don't have the extras that open-type fonts have.

Files with an EOT extension use a format created by Microsoft.

They're meant to be used on the web.

However, they only work in Internet Explorer.

Wolf are the preferred format for web fonts.

These files are compressed, which means they load faster.

Wolf is a newer iteration of Wolf.

The difference is that they're more compressed.

It's well supported across all the major browsers.

If you're targeting Internet Explorer or older browser versions, Wolf has the most support.

SVG fonts are not recommended unless you're trying to support very old versions of Safari.

Check out the teacher's notes for websites where you can find fonts to download.

Good typography starts with choosing a good No matter how nice graphical elements look on a page,

a choice of a bad typeface can quickly ruin it.

When entering into the process of choosing a typeface, first ask yourself, where will it appear?

Well, on the web, duh, but we're on the web.

What's the context?

Will it be in the navigation, or the paragraphs, or in the headlines, or all of those?

Answers to these questions will determine if you're looking for a text typeface that is engineered for small sizes to a variety of settings or a display typeface which tends to be more flashy and works

well in the These two descriptors deal with the size and function for which a typeface is intended.

In the next two videos, we'll look at how to choose a text typeface and a display typeface.

It's often smart to use a text typeface before a because much of the copy on a site will be seen.

In his pocket guide on combining typefaces,

Tim Brown calls on your anchor typeface because it acts as a reference point for every element in your composition.

He encourages you to make your body text the anchor if possible.

So, when choosing a text typeface on the web, your first priority is legendary.

If a site's body copy is hard to read, then visitors won't stick around for long.

Let's look at a few things to consider in determining if a typeface has good legibility and readability.

First, does the typeface have a good ex-height?

An ex-height that's too low will make the lowercase letters hard to read and tell apart at small size.

sizes.

An X-height can also be too high if it's nearing the cap height, making it hard to discern what's uppercase and what's lowercase.

A general measurement to go by is if the X-height is around 60 to 75%

of the cap height, then you've got yourself a good candidate for a test.

Next, let's consider the white space around the letter forms and its impact on legibility.

If the space between letters,

also known as letter spacing, is too narrow or too tight, then at smaller sizes the letters can get muddled together, which hurts legibility.

Looser letter spacing also allows the letter forms to still breathe at small sizes.

While we do have some control over letter spacing with code, it's not advisable to manually letter space body text.

Find a typeface that already has proper looser letter spacing for text.

Next, you will want to make sure the type base has overall even color as it balances the positive space of characters and the negative space of white space.

You wouldn't want your text to feel too dense in certain areas or characters, which can break the reading flow.

A trick you can employ is to blur your eyes as you're looking at the type face.

space.

We'll manually mimic that here.

Do any dark splashes or uneven places of color show up?

If so, you probably want to mark that one off the list.

Avinear Nax looks quite even though.

Other areas that deal with white space A counter is the fully or partially closed white space inside letter forms like O,

B, or Large open counters can also aid legibility because they are less prone to close up at smaller sizes.

Let's look at Nutra Phase 2 by House Industries as an example on X-height and white space.

This family comes with a text and a display version.

Both of them here are set at the same point size, but we can immediately notice some differences.

Though the cap heights are similar, the text version has a higher X height, which helps retain legibility at smaller sizes.

The letter spacing is looser in the text version than in the display version, giving the characters encounters more room to breathe.

Although the display face wouldn't work well at small sizes,

its lower X height and tighter letter spacing helps greater amounts of text fit into tighter text.

A trait that's beneficial for headlines.

Next, you to think about the mood of the type-based matching the content at hands.

Familiarize yourself with the content by taking the time to read it thoroughly.

Then down some ways to describe it in your own words.

Is serious?

Light Woody?

painted, classy, as you peruse typefaces, have these words in the back of your mind, and see if a typeface speaks in that certain mood.

Consider who your audience is and what kinds of styles of typefaces they might be accustomed to.

Are they doctors, lawyers, kids?

Are there certain genres that the target industry is known for?

You might not want to choose something that's been overused,

but you can still plan to these norms and create familiarity or untrust by choosing a proper type base that speaks in the right mood.

With text faces, it should be noted that mood can be conveyed with the slightest subtleties in the letter forms.

A simple change in the way a serif is handled can mean the world of a difference in text,

because there's a lot of it on the page.

Don't go for something that's overly ornate or has a lot of character, as it'll have too much going on for body copy.

In any case,

the mood of the typeface should fit the content at hand, but don't sacrifice legibility just because you like the mood of another typeface better.

Don't forget to make sure the typeface has every typeface better.

You would hate to get halfway through designing a layout and realize the font doesn't contain a certain character or symbol that's needed.

Things to consider are, does the typeface have a range of weights?

Does the typeface have italic styles?

But we need different widths for versatility?

Are small caps necessary?

What accented characters are included for language support?

and what kinds of numerical figures are needed.

To clarify that last note, there are a few different styles of numerical figures.

We'll look at old-style and lining figures.

Old-style figures vary in height and descend below the baseline at time.

These are nice for text and body copy as they flow well with the rhythm set by the text,

and they're necessary when using small caps.

Lining figures all have the same height and baseline, and are generally good for display, headlines, or with uppercase only.

That concludes how to choose a text typeface.

Sometimes designers utilize a versatile text family that works for both small and large text sizes.

Other times, a single type base won't work for all text sizes because weird intricacies can appear in the letter forms at different sizes.

Also, you might just want to have some variety with your text.

type.

So, in the next video, we'll look at how to choose a display type base.

For further study on choosing a type base,

there's some great articles and resources in the teacher's notes that influence what we discussed here,

and I highly recommend taking some time to read them.

Now that we understand how to anchor our content with a text type face,

let's see how to go about choosing a display face for the web.

As we saw earlier,

display type faces are meant for larger sizes like big headlines,

site titles, or This allows for a bit more expressive and creative opportunities with letter forms.

Nice intricacies like thin serifs would be lost at small point sizes, but here they can shine.

Big bold condensed decks with narrow counters would close up at body text sizes, but here you can soak them all in.

A nice casual sign painter script would hardly be legible in paragraphs but here it can flow beautifully as a heading.

So, how should we go about choosing one?

First, sure it's legible and readable.

Just because the type is bigger doesn't mean that every character of a typeface will be legible.

If a person can't read a or a title, then the message hasn't been enhanced by good typography.

It's been lost by bad typography.

Although there's much more room for expression with display type, make sure you're choosing a well-designed legible typeface.

Just because something looks cool in a specimen image doesn't mean it'll be usable.

Make use of the test we talked about by blurring your eyes to see if a typeface has an even overall color in all of its characters.

Most font sites include a type tester where you

write out example headlines to make sure it's evenly spaced and see what sizes it works best at.

Display type should have a bit tighter spacing than text type faces.

Other things that can help readability and display faces are short In the setting of headlines, these features help reduce choppiness in the text.

Again, one of the big questions we'll want to ask is, does the mood of the typeface fit the content?

For text faces, we talked about channeling the mood with subtle nuances and typefaces.

With display, we have a bit more room for expressiveness in the mood.

We can use the words we came up with throughout our content exercise in the previous video and apply them to our search for a display face that fits the right mood.

If you're creating a site that's set around a certain time period, look for typefaces that are true to that period.

That will take some research,

but instead of choosing the mood we think the period should look like, we'll be truly conveying what it was like.

Jessica Hish has some great thoughts on this, which are linked to in the teacher's notes.

Next, we'll again to think about who are readers or

If we're creating a site for people in a specific industry, let's say web developers, then that affects how we choose a typeface.

Take for instance this example of how to play into the typographic styles people in the web design industry are custom to.

Let's say we want to display snippets of example code in a blog post.

Coding programs like Adam or Sublime Text are used by web developers and default to mono-space typefaces.

These are fonts originally created for typewriters, whose characters all occupy the same amount of horizontal space.

They're great for code since it's easier to distinguish symbols and lay out tabular data and plain text.

But they wouldn't be a great choice for body text due to decreased legibility in long paragraphs.

We can still play into that industry norm with our code snippets.

By utilizing a mono-space font, we can typographically make this snippet appear as it would in an actual code environment.

So take into account who your readers are, and what styles of typefaces might be the right fit for their industry.

I won't fully go into the other priorities again as they were covered in the previous video.

But, similarly to text typefaces, take into account the budget and make sure a display

face has everything you need in regards to weights,

styles, or Because display typefaces are used in fewer contexts, there's a bit more flexibility

that you'd never want to set body text in all caps,

you can actually utilize a display face to great effect that only has uppercase characters.

Also, it's possible to have good typography with a single weighted font for your display face.

These situations might not be ideal, but they can be worked through.

Lastly, there might be a scenario where you land a client who already has a typeface for their brands.

This process then is sometimes as simple as finding the web font version of that typeface.

But other times, there might not be web font licenses available for it yet.

In that case,

you want to find a typeface that channels a similar mood and style to the print version as you translate their brand for the web.

You could Google alternative to insert typeface here.

But what's the fun in that?

Utilize all the knowledge you've taken here to make a well-informed decision for an alternative that best fenced the client.

You might arrive at a different conclusion than those online forums.

Later on in the course,

we'll get into more details on how to pair typefaces,

but I hope this has helped distill some of the ambiguity around choosing a typeface for the web.

Think about where it's going to live.

What makes it legible if it's mood matches the content and audience?

Does it have everything you need?

And what factor will cost play?

This is by no means an exact science, so have some fun along the way.

The answers to these questions should help guide you in a good direction and leave room for your own personal tastes and design choices.

Next, we'll take a look at weights, styles, and sizes.

Now that we've looked at some principles and have a background in typography,

We'll get into how to practically achieve good typography on the web in the next few stages.

In the previous stage, we learned how to choose fonts.

In this session, we'll start with the basics of a font family's weights and styles like bold and italics.

First, it'll be good to mention here that faux bold and faux italic are faux pas, which simply translates to don't do them.

Faux bold or faux italic means it is a false bold or fake italic.

These can occur when you only have one weight and style of a typeface.

design programs and CSS have the ability to fake the bold or italic style of that web font,

but believe me, it ain't pretty and it can hinder legibility.

A faux bold is created by thickening up the original font.

This can create issues with legibility as counters close up, dark patches of color can appear, and letters get distorted.

Type designers carefully craft their bold weights to correct these issues.

Faux italic text is created by obliquing or slanting the original font to a certain degree.

At first glance, you might think this looks okay, but let's take a closer look.

Italic versions of serif typefaces are actually created in a more cursive style.

They're not just slanted versions of their regular or Roman counterparts.

They're condensed some, and often their letter forms are entirely different altogether.

Notice the changes here, such as how the crossbar on the E becomes more fluid or how the F elegantly descends below the baseline.

Because are often used for emphasis on the web, true italics can better emphasize words or phrases than faux italics because of this.

For sand serifs, this cursive nature is less accentuated.

So you might think that you can get away with the foe, but you can.

Anytime you oblique the font, the weight of the letter forms gets unevenly distributed, which creates uneven color.

Also, certain letters can change entirely in a true italic, such as a two-story roman, changing to a one-story italic A.

Again, type designers meticulously build italic versions of their fonts correcting these issues.

So be sure to utilize fonts that have bold and italics instead of trying to fake it.

This not only gives the user a better experience, but it also improves the legibility and readability.

Be aware, too, that some typefaces online are sold as having italics, but really they're just uncorrected oblique versions of their fonts.

This is why, when we discuss using a typeface, you'll want to make sure it's well-built with all the necessary weights instead.

Let's unpack that.

Sometimes, typefaces have a basic array of weights like normal and bold.

But other times, a family of fonts can range from thin to light to normal to semi-bold to bold to black.

Let's look at the different weights of open sands using Figma.

As you can see, there's light, light italic, regular, italic, and on.

Some have additional styles, such as hairline, which is even thinner than thin, and ultra, which is even thicker than extra bold or black.

For this entire text block, the family name is set as Open Sans, but the text within is a different weight and or style.

Click into the text to see what it's set to.

If you see a message about missing fonts, download all the styles of Open Sans from Google.

Figma just has a few styles pre-installed.

In addition to those settings, we can also make the text underlines.

We can format it in all caps.

This is preferable to typing it in all uppercase letters.

It's much easier to switch back to title case if you decide to change it later.

We can also format it in small caps, but only if the font supports it.

We see here that Open Sans doesn't support small caps.

Let's see it in Playfair, a Google font that supports small caps.

Be careful to not choose four small caps, as we want the true small caps designed by the type designer.

Great.

Now you've gotten a handle on the basic formatting options.

Next, I'll introduce you to the design project we'll work on in this course.

As I introduce concepts, I'll demo it in a design program called Figma.

To follow along, download the project files.

Here, we see copy from the science fiction book, I've also added some headings.

The text is set in Allegria from Google Fonts.

I chose this type base because of its roots and literature due to the continent hand being a book,

its diverse weights, italics, and the inclusion of small caps and other features.

We'll use this file to play a As you can see, all the text is the same size, which really flattens the hierarchy.

I can make the headings bold to stand out, but there's even more we can do.

Let's talk about texture.

When designing for screens in a design program, you'll specify text and pixels.

A pixel is a fixed unit of measure that pertains to media with display screens, such as a computer.

A good rule of thumb is to set your body text anywhere relative to 16 pixels to 24 pixels.

Readers' eyes are usually a few feet away from the screen, so these larger sizes are

necessary for comfortable reading, whereas smaller text can strain and tire their eyes.

This range is diverse, too, as every typeface is different.

As we've seen before, the X-site of a typeface can greatly affect it's perceived size.

So, use what you've learned and make a judgment call on what works best.

When in doubt, lean towards the larger size to be safe.

As the design gets implemented with code, the text size will likely translate to a non-fixed unit.

While pixels make it easy to create exact designs with the Designs are viewed on a broad range of devices out in the wild.

But because this is a fixed unit of measure,

it can create more work with responsive typography, which scales text size up or down depending on the screen size.

So, Pixel should be swapped out with responsive units like M's and REM's, which are relative units for font sizing.

This is incredibly helpful, scalable, and powerful for responsive typography.

But need to act on that.

We'll work in pixels as we design, and if you decide to develop with code, you can do so with relative units and minds.

Once you've set your body text size, it's time to adjust the rest of the text.

Sizing your headings,

paragraphs, and other text elements may seem a little tricky, and it's not a great idea to just guess by shooting in the dark.

This can lead to inconsistent headings and paragraph sizes, which is why following a typographic scale can help immensely.

A scale gradually increases at a certain rate to ensure consistent proportions for your font sizes.

The classic typographic scale increases and intervals of 1, 2, 3, and then 12.

It's been used for centuries and is reliable to adhere to, especially if you're using 16 pixels as your base size.

16 pixels is great, but I'd like to enlarge the body copy to 20 pixels.

That size is not in the classic scale, but don't forget.

I'll look at TypeScale.com to build a TypeScale.

This site is incredibly helpful because you can set your base size, test different scales, and even import Google Web fonts.

Our base size is 20 pixels.

Let's choose the major third as I like its sizing, and we can change the font family to Alexandria.

Feel free to test out the different scales to see what they look like.

The perfect fourth and fifth are also commonly used.

We're now given some sizes and M's and pixels.

Focus on pixels for now.

M's are important when it comes to implementing it.

Now, let's set the font size for the headings.

Here's the order of the headings by text size, title, paragraph headings, and author name.

For simplicity, I'll round down to the nearest pixel.

Also, note that you don't need to use the largest text size.

You can start.

Anywhere within this scale, so long as you choose adjacent sizes.

The largest heading will be our H1 or heading one at 48 pixels.

The next will be our H2 at 39 pixels, and the third will be our H3 at 31 pixels.

Then, I'll set the body text to 20 pixels.

I'll go ahead and create a text style for each text.

This sets us up for quick edits later on, and it keeps the text sizes consistent.

Great!

We still have a ways to go, but getting a proper body size and scale is a great place to start.

Once we get a good size for our body text, we'll want to take a look at our measure in space.

We first talk about measure, which is also known as line length because it deals with how many characters fit on each line of text.

Then, we'll discuss the space between letters.

These two concepts both work together to create readable layouts, which give the type room to breathe.

In elements of typographic style, Robert Bringhurst recommends a measure of 45 to 75 characters per line for a single column.

A measure that's too long can tire out reader's eyes, as they have to travel far across the screen and back multiple times.

When shifting to the next line below, they can potentially lose their place.

A measure that's too short will have reader's eyes quickly jumping back and forth to the which is again quite exhausting and jarring.

A measure that's just right will be comfortable to the user creating an enjoyable reading experience.

Remember, 45 to 75 characters works well, with the mid-60s being ideal.

If you're working with multiple columns, you can shoot for the 40 to 50 character range.

In our Figma file, our layout currently isn't very readable.

The lines of text span the whole page, and the measure is well above what's recommended.

I've placed bold asterisks at the 45th and 75th.

We can remove this later, but this guides us and gives us a good idea about where our line should break.

To determine character counts, check out the teacher's notes for a tool.

If these two asterisks end up on the same line, then we know we need to fix our measure.

Now, let's determine a good width for this text.

A good place to start is to multiply your body font size by 30.

Since the body font size is 20 pixels, we could set a max width of 600 pixels.

The asterisks fall on two different lines, which is what we want, and the text width feels appropriate.

Always take time to read through a few paragraphs to make sure the measure feels appropriate or needs adjusting.

Although commonly confused, tracking and curning are two different techniques when it comes to typography.

They both deal with the space around the letter forms, but in different ways.

We'll examine each one along with general rules of thumb for both.

Tracking, also known as letter spacing, pertains to the amount of space between every character and a particular character.

You could increase or decrease the amount of tracking, which will affect the text as a whole.

Tighter tracking will result in heavier feel, whereas looser tracking gives it a lighter, airier look.

For example, let's set the title in all caps to make a Now, we'll want to tweak the tracking to make it easier to read.

We can set the tracking in our main title to be greater or less than the font's normal spacing.

Let's add 3% to the heading 1 style.

Notice how every space between every character is affected as it loosened up.

Now, let's change the value to a negative value of negative 3, which will track it inward.

Looks good.

Notice how this also affects how heavy the element fits.

Tighter letter spacing will result in heavier feel, whereas looser letter spacing gives it a lighter area look.

General rules of thumb are, slightly reduce the tracking and headings by 3-5%, as type gets bigger the tracking increases.

Sometimes in headings it appears two spaces.

Tightening the heading to be more compact makes it more solid and more closely resemble the spacing of body type.

This is also commonly done to logo types.

Do not change the tracking and body copy unless it's absolutely necessary to aid legibility.

Don't track your type out too much as words and spaces will get muddled.

Increase tracking in small caps or uppercase tax by 5 to 10 percent.

This generally applies to uppercase headlines, acronyms, and long series of digits.

If your design program gives you the option of metric or optical tracking, choose metric, which uses character spacing information inside the font.

This is valuable information the font designer included.

Optical spacing throws out that carefully crafted information and instead uses an algorithm

that tries to guess the kerning of every character and often gets it wrong.

Now, let's look at kerning.

Kerning deals with the amount of space between a specific character combination rather than the spacing of a whole body of text.

In a typeface,

a type designer sets the space for the left side of the letter and the right side of the letter so that it works best with all the other letters and their spacing.

Certain character combinations can come up that are either too far apart or too close together such as uppercase A V uppercase W A or uppercase T lowercase A.

With kerning, character pairs are adjusted to be evenly spaced with the rest of the typeface.

Generally, you wouldn't need to adjust kerning if you have a well-designed font.

If you find off-balance letters,

you can manually adjust the kerning, but if you find a lot, then consider switching to a more balanced font.

So, letter spacing affects the spacing of the text as a whole, whereas kerning deals with the space between a specific pair of letters.

Now, let's move into talking about ligatures.

Ligatures improve the appearance of text for letters that are too close together, like the F and the I.

They create a smoother transition between letters by connecting certain character combinations.

They can also give the text a nice touch.

Legatures are mostly found in serif and script typefaces because they aren't as necessary in sans serifs.

Just because a typeface does not have them, does not mean it's a bad typeface.

In order to utilize ligatures, you'll need a typeface that supports them.

Typeface specimen images will often showcase them, or you can look through the character map on a typeface to see if they're available.

Here, I'm viewing Brand in Text font on MyFawns.com.

Under open type features, I see it has ligatures.

To see it in action, I can type the word bigs.

See how the F and I letters combine?

The type designer decided to hide the dot of the I when it follows a lowercase F.

This helps legibility and simplifies the text.

That's it for horizontal space.

Stick for the next video where we'll delve into vertical space.

Now, let's address the vertical space in our design by adjusting our line heights and looking at vertical rhythm.

Letting, also referred to as line height or line spacing, deals with the vertical space between consecutive lines of text.

You might be familiar with it as single or double spacing and document editors like Word.

For reference, I've seen well-built typographic sites utilize line heights ranging from 135% to 185% for body text.

Every typeface is different, so line heights can vary.

150 tends to be a good starting place and is commonly used.

Figure out a good, comfortable letting for your body copy first because it will be paramount to establishing vertical rhythm.

I'll use 160% for the body text.

Before we get into rhythm, let's take a look at our headings.

I'll add a bit more text to make them break to the next line so we can set their line height.

A general rule of thumb is as heading sizes increase, your line height should decrease.

The line height that worked for the body would most likely be two spaceships for your bigger headings.

Here, I'm setting our heading 1 at 110 percent, our heading 2 at 120 percent, and our heading 3 at 130 percent.

Different font sizes and families require different values, so be sure to test what works best.

Great, now that those are adjusted, we can look at our vertical rhythm.

The space between paragraphs is decent.

However, there's more we can do with grids.

We'll get into that shortly.

The between lines of text creates a that can balance a layout and enhance readability.

When we read, we recognize patterns.

If a layout has a consistent line in paragraph spacing, we develop pattern recognition after reading a few lines of text.

This will help us identify other identical spaces as part of the same pattern.

An rhythm can disorient the reader.

Vertical rhythm balances the spacing and arrangement of text, as the user reads down the page.

Every bit of text has a baseline it sits on.

If each line of text sits on the rhythmic baseline, then you can say that it has consistent vertical balance or rhythm.

The concept of vertical rhythm applies first and foremost to paragraph text.

You can also utilize headings, subheadings, or images to flow and sync with your rhythm.

But it's often hard to perfectly execute unless the site's content is static.

Robert bring hers right.

Headings, subheads, block quotations, footnotes, illustrations, captions, and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines.

These can and should add life to the page.

image, but the main text should also return after each variation precisely on beat and in phase.

That means it's okay if the heading or image breaks rhythm a bit,

but most important is your paragraph text returning to its rhythm after that element is introduced.

This offers consistent predictable line spacing as the reader scrolls through the content Next, we'll create a consistent rhythm using a baseline grid.

Grids create a system for arranging content on a screen.

This results in layouts with an inherent rhythm.

When space is divided into boxes, content be contained in the rows and columns, or spread to fill multiple rows and columns.

There's a long history of grid systems in graphic design, and we see them in web and app design as well.

Designing for the web often involves creating a design that will work across multiple devices.

As such, Wallet website may allow for a multi-column design on a larger screen size such as a desktop.

The same website on a smartphone may render as a single column, so it's easier to read within a limited space.

Baseline grids divide the artboard in relation to the elements on the page.

We'll start by using Layout Grid and Figma.

First, the frame.

Now you'll see the Layout Grid module appear.

There are three different forms of grids to choose from.

Grid, Column, and Row.

Let's choose Grid, which is a uniform grid that includes columns and rows.

The size refers to how many pixels apart each baseline is.

This should correspond to the line height of our body text.

As mentioned before, our line height is 160%, and the text size is 20 pixels.

This means the line height comes out to be 32 pixels.

So, that's what we'll want to set our baseline to.

Notice how the lines of text are not sitting on the baseline, but rather in between them, and they're not consistently in the same place.

This is what we call poor rhythm.

Let's change that.

To start, let's get our title aligned.

Next, we need to adjust the rest of the text.

We're able to add 30 pixels of spacing in between paragraphs,

but that's the limit to the control we have if we keep all of this text in one text box.

So, let's break these pieces out into their own text boxes for more.

I've done that in this next artboard.

Now we can align them to the grid.

Just align them to the horizontal lines and don't worry about the vertical lines.

Where the planet Mars section starts, notice how I skipped two rows of spacing to give it extra vertical spacing.

This makes it clear a new section is starting, and keeps the headline close to its corresponding intro paragraph.

If I left one row before and after the heading, I'd run into a UX issue called, floating heading.

This occurs when the vertical spacing above and below a heading makes it difficult to tell which heading belongs to which series of paragraphs.

Alright, great.

We see our rhythm stays intact and we can easily notice where another paragraph starts.

A text indent is not necessary for leading paragraphs because their start already is noticeable.

Let's take the baseline grid away to get a final look.

This page has much better rhythm now.

Keep in mind if we were to change any font sizes, line heights, or margins that will affect vertical rhythm.

Grids are a tool to help us make good design choices, but it doesn't fail properly.

Something could be perfectly lined up to a baseline, but that doesn't mean it feels right.

Go with what it feels right.

This does take some tinkering, but don't lose sight of the forest for the trees.

Keep in mind your first priority is making sure your body's rhythm works well with its line height and paragraph structure.

And, as a final note, break the grid when necessary.

This a bold statement, and is a technique for making an element stand out.

Have fun with it!

Now that you have experience using a baseline grid, let's delve deeper into studying paragraphs.

There are two main options.

For option one, you can simply use an empty line to add space between the paragraphs.

That's how it is in our project right now.

As for option two, you can indent the first line.

Let's look at some pointers.

The amount of indentation is 1m, or, in other words, the base size of the body text.

Don't indent the first line of the first paragraph after a heading or after an image or any other figure.

Also, don't add extra space in between the paragraphs.

Now I have two paragraphs in the same text box, but I just want to apply paragraph indentation to the second paragraph.

Remember, leading paragraphs don't get indented.

So I'll split the second paragraph into its own text box.

Then I'll set the paragraph indentation.

Remember, this matches the body text size.

And for good measure I'll remove the paragraph spacing.

Then I'll turn the grid back on to align everything again.

It's up to you which option you prefer.

Just be consistent throughout the design.

If you can get all these concepts down, it'll be no time before you're creating typographically sound designs with good scale and rhythm.

Alright, I'll see you in the next stage where we'll get into the details of laying out type.

Alright, you made it this far, good work.

If all this talk about type hasn't gotten you excited already, then just do you wait.

In this stage we'll look at the different ways you can lay out type in a design.

First up is typographic hierarchy.

This concept is crucial to seamlessly guide readers through a page's content.

Hierarchy helps users understand what information is the most important to what's secondary, tertiary, and so forth.

In this video, we'll look at how to do this with weight, style, size, and position.

In the next, we'll continue on the theme of hierarchy with color and pairing typefaces.

Before we jump in, let's check out all of these concepts in action at CreativeMornings.com.

Let's say I wanted to watch this talk that Meg Lewis did in Minneapolis.

Immediately, I'm presented with an array of information that's been arranged with hierarchy in mind.

First, my eyes gravitate towards what's biggest, boldest, and darkest on the page.

This is the most important piece of information here, and Creative Morning lets you easily know it.

Next, my eyes naturally continue reading and move downward to the title of the talk.

This is of next importance after the speaker name.

It's smaller, but still prominent.

My eyes are then drawn to the bright block of color, holding the white text of the speaker.

It's a nice touch.

After I've taken all that in and considered if I'm still interested,

then I can make my way down to the smaller secondary information and read more about the speaker

and where exactly the talk was and some more information about what the talk was about.

We see bold type, multiple sizes, different colors, different positions, and different type bases, utilized to convey the hierarchy of information on the page.

The combination is not only useful to the user, it's also downright good looking.

These concepts can be incredibly powerful to create useful, beautiful websites.

But they can also get out of hand pretty fast if we don't know what we're doing.

Before you begin styling anything, it's smart to familiarize yourself with the site's content to get an overall big picture of everything involved.

It's often helpful to sketch out a wireframe and then go about numbering content elements starting with one,

what's of most importance, two, what's of next importance, and so forth until every piece of content has been labeled.

This system will inform us on how we can utilize typography to accentuate our different pieces of content.

We can create hierarchies simply by waiting certain blocks of text.

A reader's eyes will be drawn to the bolder elements on the page.

This hierarchy helps readers make connections between the content and relate certain sections.

Typography is as much about the treatment of the text as it is with the space surrounding the text, thus importance of white space.

White space is empty space without content, and it plays a key role in the readability of a design.

It gives the reader space to rest their eyes, which reduces the feeling of information overload.

Let's look at the whitespace of the left and right of our type.

Margins or padding should be used to give your type room to breathe.

If a sentence comes too close to another element, then it can disrupt the flow of reading.

Whitespace is often underutilized in web design, which results in cramped and cluttered layers.

Also, it should be noted that white space doesn't have to be white.

If you have a dark background with lighter text, we would still call that area around the text white space.

Let's check out a good example of white space.

Here's an article on It's NiceThat.com, a creative inspiration blog.

It's about polisher, a renowned graphic designer.

Notice how there are ample amounts of white space around the type.

The words are not closing in on borders.

They're given room to live and breathe.

As you can see, white space can clean up a design and give it an elegant professional feel.

It can also emphasize content by framing it with an empty space.

Now, watch as the white space changes as I resize the browser window.

The content shifts into one column and the white space is although, and different proportions to fit comfortably on the mobile.

Alright, now that certainly got me excited about hierarchy.

In the next video, let's explore what we can do with style, weight, size, and position.

Typographic hierarchy seamlessly guides readers through a page's content.

Bold wait text makes text stand out more while light text makes it received in comparison.

An italic style can also be utilized to denote emphasis or set apart the text.

For example, I can italicize the author's name to differentiate it from the other body text.

A different weight or italic style can be used to carry emphasis,

but if you overuse it, you can end up with an unbalanced hierarchy and layout where everything is important.

So, in turn, nothing is important.

Watch out for how dense your typographic color is on the overall Size is next,

and it can immensely help in guiding your readers through your content.

This is why headings have a larger text size than paragraphs.

While headings are often bold, a bold weight is not always necessary to convey hierarchy when size is utilized.

Base font sizes should be at least 14 pixels.

Lastly, let's look at how position can be utilized to present hierarchy.

When we're discussing position,

we're talking about the placement and space around the type in relation to the other elements or blocks of type around it.

Let's look at a site that does this well.

Here's a conference website for Black Futurism.

The name of the event is big and bold.

Then, my eyes are drawn to the dots where I can check out the program schedule.

The large days of the week make the daily schedules clear.

The spacing in between each session easily This is a great, practical, yet highly fun and bold take on conference website design.

Next, let's look at a more experimental design by Jen Simmons.

It utilizes the position of type to present hierarchy and difference.

When we arrive on this site, we immediately see the large Bauhaus headline.

Then, our eyes move to the German word for exhibition, which is rotated 90 degrees in position to the right of the red square.

The intention of this design was to position type in a bold and unexpected way.

while using the red square as a grounding focal point, which the typography dances around.

Let's jump back into our example now.

So we're actually already utilizing position to differentiate our content and minor ways

by separating our headings and paragraphs from one another when we looked at vertical spacing in the last stage.

I might want to accentuate our title and author name a bit more though, so let's see what we can do with its position.

I'll center align them and give them some more padding.

Great.

Because its position, a reader can now engage this as separate from the main text, which further establishes its hierarchy.

The center-aligned style is also nice because it feels akin to the title of an old book cover.

Positional hierarchy could also be accomplished with borders or line rules above,

around, or below the type, to separate a piece of content from the elements around it.

The possibilities are really countless with hierarchy, so remember to not make typographic choices just because.

A good designer knows when and why to say yes or no to a Have a reason behind why you're building or italicizing text,

or why you're increasing sizes, or why you're moving an element to a certain place.

While we're on the topic of positioning, let's cover alignment.

Text alignment can be justified or unjustified, but unjustified is typically more readable.

Justified text creates lines of text which evenly touch the left and right side of the column.

It's commonly used in newspapers since it's an efficient use of space.

However, this can create large, unsightly gaps throughout the paragraph.

These are referred to as rivers, because the end result might look like several rivers of white space flowing throughout the text.

This makes it difficult for people with dyslexia.

It's not clear where a line of text ends, which unfortunately causes them to switch to the wrong line.

If you must use justified text, turn on hyphenation, which allows words to break apart and prevent those awkward gaps.

Left align text is the default.

The words evenly align on the left to form a hard line, while the right edge is soft and ragged.

This allows the words to flow naturally.

But be aware of bad rags, such as a wedge shape that creates an unintentional shape.

Left text can sometimes create rags on the right side, which are uneven gaps often caused by long words.

Minor gaps are expected, but gaping holes should be taken into account.

There's really no easy way to prevent them, but we can sometimes avoid them by adjusting font sizes and line links.

Then there's right-aligned text.

This is when words are evenly aligned on the right, while ragged on the left.

Since English is red, left or right, left-aligned is more legible for this line.

While right-of-line text can be a novel change from the usual, it can be jarring.

Center text creates a ragged line on the left and the right.

If you use center text in a layout, it's generally advisable to consistently center align all the text.

For long-form text, it can be difficult to read.

Therefore, I recommend that you don't center aligned paragraphs longer than three lines.

That's it for the first part of typographic hierarchy.

I'll see you in the next video as we dive more into the subject and look at caps and color.

We just looked at how we can create typographic hierarchy through weight, style, size and color.

Now, we'll continue with that theme seeing how we can establish it through caps and color.

First, talk about caps and small cap characters.

Think about an email or text you received that was in all caps.

That probably felt like someone was either declaring something important or shouting at you, right?

Setting type in capital letters can create emphasis, authority, or hierarchy in your design.

If you overuse them or commit the hideous crime of setting all your body copy in them, then legibility and readability will seriously be compromised.

They're best used in small doses like a short headline or a title and a navigation to give an official look.

We can also utilize small caps to spice up an ad hierarchy to a design.

They're a little less in your face than all caps.

In case you're not familiar with small caps, they look like uppercase characters created near a lowercase side.

often slightly above the X height of a typeface.

They're not just scaled down versions of the uppercase.

Their weight and spacing have been finessed to match the overall font.

Some design programs have a way to fake the small caps, but I don't Like faux weights and styles, it ain't pretty.

Small are used for abbreviations like ASAP,

official titles like the President of the United States,

headings like the title for a post, or the opening line of a book chapter or blog article.

They work great with uppercase and lowercase letters along with old-style figures.

They also flow great in body copy because of their last obtrusive nature due to their height being closer to the X-height.

site.

She uses small caps to grade avail as she denotes the categories showcasing her recent work.

Here, she opens the paragraph with a line set in small caps.

And she also uses a nice job cap for the beginning letter of the text.

A drop cap is a large capital letter that typically spans the height of two or more lines of body text.

We'll take note of this to use an But first, let's look at small caps.

To use small caps, first make sure the font includes support for small caps.

The good news is that Allegria, the typeface we've chosen, has small caps available in its sister family, Allegria SC.

Let's use Jessica's site as inspiration and add small caps to the start of each paragraph.

Small caps are typically applied to the first line or simply just the first complete thought in the first line.

With the text selected, go to Type Details and choose small caps from the lettercase section.

Oh, yeah, this is starting to jive really well.

Let's add a drop cap to our tax to give it extra emphasis and style.

There currently isn't an easy way to do this in Figma.

You have to craft each piece.

I started by breaking out the N into its own text block.

Then I made its text size 108 pixels so it spans three lines of text.

Next, I duplicated the first part of the paragraph and cropped down the first three rows.

I positioned the rest of the paragraph underneath.

Now it appears as if it's wrapping around the drop cap.

It accentuates the first paragraph, but it's now the biggest piece of type on the page.

Don't worry, that'll soon change.

Let's look at how to utilize color with type.

First, you'll want to make sure the text color has good contrast with its background color.

If the contrast is too low, then the type and its background color will start to blend together, making it hard to decipher.

If it's too high, then it can tire out a eyes due to the bright nature of screens.

Pure black and white work well together in print,

but on the web you should stick to a subtle black when set on a white background and vice versa.

On this example page, the text has a hex color code of hashtag 333, which is a dark gray.

And the background is an off-white color at hashtag F9F9F9.

Almost all popular content-heavy websites utilize a light background with dark text for their main body copy versus a dark background with light text.

Don't forget to take an account, color blindness, and accessibility with this concept of contrast.

Look in the teacher's notes for a tool that will allow you to test for color contrast scores.

You'll want a score of AAA for maximum legibility,

which is especially helpful for long-form text to be read for a significant period of time.

A score of AA is a good goal for body text.

AA large is the lowest amount of contrast needed for headlines or texts around 18 pixels.

With typographic hierarchy, more contrast will grab attention, whereas subtler contrast will blend in.

Another way to think about this is the primary or important pieces of content should be easily noticed,

whereas secondary pieces can blend more with the design.

All right, let's jump back into the project.

I want to give our title and author name further distinction from To do this, I'll put a dark background color behind the title.

I'll use a rectangle, align it to the baseline grid, and set the fill to pound 1E1E1E, and more subtle black.

Then I'll set the color of the type to pound F9 F9 F9 in more subtle white

Then I'll just align this text back on to the baseline See how that looks Now,

I want to make the author name a bit less prominent by changing its color.

To do that, I'll set it to pound 999999, which is a mid-gray.

It's more subdued, yet still meets the accessibility guidelines for text contrast.

It scores at 5.85.

Great, now our title is further accentuated because it's color contrast is much higher than the author's name.

The page is getting there, but let's spice it up a little more by adding a burnt, arnish red color to our heading.

With Mars being the red planet, I think it's fitting.

This color has good contrast with the background and distinguishes our headings further while adding some variety to the design.

I'll set the body text to a dark gray Pound 333 Pure black on a white background is hard on the eyes,

and the gray gives it some nuance.

I'm going to stop here with color as I don't want to go overboard.

Too many colors can make it hard for users to understand typographic hierarchy, and it can clutter up the design.

Smart color hierarchy helps users recognize patterns Links should look like links, and other elements should not.

If similar colors are used, then users may think something is clickable when it, in fact, is not.

Keeping heading colors persistent can also aid readers in recognizing them correctly.

Just be sure to not only rely on color when signifying status or interactions.

Multiple indicators make your design more accessible.

That's it for hierarchy.

Remember, it's all about balancing and utilizing these different techniques wisely.

Block quotes, headings, metadata, navigation, and more are all at your disposal to style.

So wisely with a clear hierarchy.

To close this session, I want to give you some encouragement.

And then article on time.

Frank Chamero says,

I'd suggest that most great examples of fine typography are merely designs that have wise type-based choices,

savvy use of space, and a clear hierarchy that's echoed through the structure and presentation of the text.

You now know how to do all those things with what you learn from the past few stages.

It'll take some practice for sure, but the groundwork is there.

In the next video, I'll cover layout treatments.

Let's go beyond paragraphs.

Any time there's a list, you can opt to make it more engaging by styling it as a bulleted or numbered list.

And pull quotes help break up the monotony of long columns of tax while bringing emphasis to a mess.

Hanging punctuation requires characters to be positioned outside the margin edge.

This is commonly used for pull quotes and bulleted lists to create an even visual edge.

For example, hanging quotes keep the left alignment balanced so it increases readability in the text.

A quotation mark that is flush with the text,

like we see here, can interrupt the left margin and disrupt the rhythm for the reader compared to the one that is not.

To keep quotation marks clear of the edges,

we can give the text a negative text and a We also have the option to hang the list markers and lists,

which can help the flow of text because the margin edge is well defined and continuous compared to one that is indented.

Either one is acceptable, so it's really up to us to go with what feels right.

Text and list items should also be consistently aligned.

If a list item runs more than one line of text and isn't aligned well,

then reading flow can be interrupted because our eyes look for straight lines.

Make sure the list markers are away from the edges of text, which will make for a much cleaner reading experience.

Another trick is using horizontal rules to create clear sections of content.

A horizontal rule is a divider that can spread across the It can spread the full width or only cover a portion.

It can be a simple line or something more ornate.

Check out this example by Jules Forest.

The horizontal rule above and below the pull quote give the piece visual interest and emphasize the quoted text.

When combining text with an image, play around with how the text wraps around the image.

In addition to forming rectangular paragraphs around an image, you can make the text glide along the edge of the object in the image.

Check out this design by Jen Simmons.

The text forms a rounded edge which wraps around the tomato.

Finally, the last example I want to show you is Tables.

Tables an excellent way to show tabular data in columns and rows.

It helps readers compare content as it easily organizes data on the screen.

The trick with Tables is to use borders sparingly.

Check out the pricing table for Slack.

The columns are subtle, and the rows are more defined to help you compare the features.

Lastly, let's look at how we can establish hierarchy by pairing different typefaces.

We talked about how to choose a type based earlier,

so we're working under the understanding that we should pair it based on the text type based we've chosen.

Type based pairs aren't always necessary,

and beginners are sometimes encouraged to only use one type base in order to really learn the ins and outs of good typography,

until they're ready to start pairing type.

You can start by staying within a typeface and choosing different weights.

Or, you can pair a sans serif with a serif from the same family.

For example, FF meta and FF meta serif.

Typography gets harder to execute well once you throw two or more in the mix, but it's well worth the variety.

Here are some basic pairing rules to go by.

First, pair type bases with similar proportions.

This means taking into account what we learned about letter forms from our first stage.

A sans-serif type base with a similar x-height, proportions, and contrast to a serif type base can pair a base.

You can even utilize super families that have multiple weights of sands and serif counterparts that work great with one another.

Paratype bases with complimentary precision.

Besides the fact that it's incredibly helpful,

one of the things I really like about Hoflarenchos techniques for combining fonts is how they talk about their typefaces personalities or moods.

Check out the link in the teacher's notes.

As you pair typefaces, try to classify the mood each one is conveying, and see if they jive and play well.

Paratype faces from the same historical period, Jessica whose immersive article on typography is linked in the teacher's notes, has some great thoughts on this.

If you're building a site focused around a certain time period,

then research and find out as much as you can about typefaces in that area.

You might even find some pics of a storefront or sign with a great type-based pair for inspiration.

Pair type bases from the same designer.

Type designers often have a certain style that can be found throughout each of their faces.

The style forms a common bond that holds the two or more together.

This especially works in your favor if they have a vast array of families to choose from.

Lastly, explore more, try out different combinations.

Sometimes, you can stumble upon a type-based pair you wouldn't have imagined working.

It's like kale and frozen bananas.

You definitely thought they wouldn't work together, but old do they make a tasty smoothie.

A great sight I love to peruse is called fontsanduse.com.

It catalogs different typefaces used in print, web, and all types of media.

It's great for inspiration on different type combinations and pairs.

Take a few minutes to check it out.

Alright, now let's look at our project one more time.

I've chosen a typeface for the title of our page whose personality I think pairs well with the theme

of the content and our Sarah of Allegria.

It's called Pathway Gothic One and can be found on Google Fonts.

Notice that it doesn't have a bunch of weights or styles, but that's okay for this specific use.

I chose it due to its tall letter forms and no nonsense look.

I mean, if the worlds are at war, then we're not messing around.

It's tough and classy personality complements allegory as elegant and energetic letter forms.

I'll set the title in this font.

Then, I'll adjust our font size to 124 pixels as I want the title to really stand out on the page.

Looks great!

I really like this typeface pair and feel like the body copy keeps our book vibe intact while

the title gives it an authoritative look that fits the theme of the content.

It almost feels like a newspaper declaring a headline.

When you get back,

I'll be waiting for you in our next video on how to go even further with how to

We'll talk about how to translate all of this to different screen sizes through responsive design,

discover more grid systems, explore variable fonts, and get into some finer details of polishing or typography.

What might be a joy to read on a desktop quickly becomes a burden for readers on smaller screens.

White space quickly decreases, our large font sizes overtake the screen, and the content gets cramped.

In this video, we'll look at how to remedy those problems through responsive typography.

Responsive typography is a subset of responsive design, focusing solely on the typography as it responds to different screen sizes.

It's extremely important, and its details are often overlooked.

Creating pleasant reading experience for desktop browsers is great, but we also must account for the other ways someone may be viewing our site.

Here are some pointers for how type to change for mobile versus desktop.

First, text size.

Generally, for mobile, and large body text size.

Increasing the text size makes it easier to read on a smaller screen.

As for headings,

they're often too big on mobile,

so it's generally advisable to make them smaller for mobile to free up space and make more text that comfortably on one or two lines.

Tighten the letting.

Since the screen is smaller, you'll want to make the best use of that space by tightening the space between the lines.

Since line length is naturally shorter on the small screen, you get away with tighter letting.

Just be careful the letting is ample enough to be comfortable to read.

Pay attention to line length.

On mobile, the number of characters per line should generally fall within 30 to 40 characters.

Adjust padding You may notice the padding between paragraphs of text is ample on desktop,

but the same amount of space on mobile creates awkwardly wide gaps.

Ensure clickable elements such as links and buttons are large enough to tap with a fingertip.

In the human interface guidelines,

Apple recommends a minimum target size of 44 pixels wide by 44 pixels tall, and Android's Material Design Guidelines 48 by 48 DP is recommended.

DP stands for Device Pixels.

Pixels and DP are different but similar.

DP is the resolution in relation to the physical size of the screen.

Devices have different pixel densities.

Check out a link in the teacher's notes to read more.

In summary, as you practice responsive typography, adjust the text size, letting, line link, padding, and clickable areas necessary.

Your hierarchy might need rearranging, so be sure to translate it clearly at different screen sizes.

Lastly, your headings are prone to be too big at small screen sizes, so don't forget to give them some finesse.

I hope that clears up responsive typography for you, and it gives you some simple rules to guide you along as you practice.

Remember to trust your gut too on what looks right.

In the next video, I'll introduce more grid systems.

Earlier, you saw how to use a baseline grid to create rhythm in a design.

Now we'll cover some other types of grids.

Now that you know, text is easier to read when it's in a column, you may find yourself with designs that have white space.

How can you lay out the text and other content?

First up, the multicolumn grid.

Multicolumn grids allow you to create hierarchy and integrate text with photos or graphs.

You can define certain zones for photos, and you can allow content to span multiple columns.

Aim for an average of 40 to 50 characters per line.

Back to our project, here's an alternative way we could layout the type in a multi-column grid.

To create this, click the plus sign to add another layout grid.

You'll want to define the columns so they match up with the base of So, it's important to see both grids at once.

Select columns and set it to three columns.

For the margin, make it 64 pixels so it spans 2 32 pixels squares.

For the gutter, make it 32 pixels.

This will work best in order to lay out the type with good measure.

Then arrange the content to align the columns while maintaining alignment with the baseline grid.

For the headline, you'll need to adjust the line height and remove any paragraph spacing if that happened to be set on the text box.

I added a photo of Mars to spice up the white space.

As you work on it, it helps to hide the grids to check out how the layout looks without the red guidelines.

Second up is the hang line.

In the hang line grid, you can divide the page horizontally to designate a given area of the page.

This is called the hang line.

The area often contains images, footnotes, ascides, and so on that complement the main text.

Lastly, the modular grid.

These were popular among Swiss designers in the 1950s and 1960s.

In this style of grid, the art word is divided into consistent divisions horizontally and vertically.

Content can span across sections as you wish.

That's it for types of grids.

Keep in mind, when you design for the web, you want to prepare for a range of screen sizes.

For instance,

a mock-up for a responsive website design could be in three parts,

a desktop design with a three-column grid, a tablet design with a two-column grid, and a mobile design with a one-column grid.

If you're interested in learning more, check out Designer's Kirchner and Muller-Brockman for inspiration.

Stay tuned for the next video, where we'll look at the super cool world of variable fonts.

Variable fonts are another tool you can add to your responsive toolkit.

A variable font is a single font file that behaves like multiple fonts.

This is done with axes that can be adjusted to change aspects of the font.

Common axes include weight, width, optical size, italic, and slant.

A variable font can have a single axis or multiple axes.

Consolidating multiple fonts into one has a performance advantage as the file size is smaller and more efficient.

It also allows for more variations in type styles, dynamically on the screen.

One use case for this is adjusting the font depending on the reader's device.

For example, you could heighten the X height on smaller screens.

or you could condense and expand character widths as the viewport narrows and widens.

Let's see some variable fonts in action.

Four-Day has the ability to adjust between Serif and Sans Serif designs, as well as different weights.

DIVOTVOR oscillates between a geometric slab serif to a decorative and ornamental font, and it can get even more experimental.

Check out this font called, In the Pines, which looks like branches growing.

I hope that inspired you to check out more variable fonts.

There are so many creative typographers And I encourage you to be inspired by the fonts you can include in your next project.

I'll see you in the next video as we look into the finer details of typography.

Now, for the fine details of typography to really send your designs into a polished state.

Pay attention to data.

A dangly is a piece of text that awkwardly appears on its own line.

It can be a single word that wraps into the next line or a single line of text that flows to another column.

This imbalance can interrupt reader flow and impair readability.

Historically, these have been called orphans and widows.

Although, that's unkind terminology, so I've switched to this inclusive language coined by design leader, Mayley Ko.

For example, let's look at this static headline that describes a section on a website.

The last word wraps to a new line on a common desktop screen size.

Adjust the text box to allow it to flow in a single line.

Keep in mind, in a design program, we have a lot of control over the layout.

But when it becomes a live product that people use, it's not possible to fine-tune it for every situation.

For example, For example, we can set these blog article headlines to a reasonable text size so that most headlines fit comfortably on the cards.

But, in reality, headlines of various text links will be inserted here, and some will appear with a dangly.

In addition,

there are a wide range of screen sizes and device orientations, and it isn't feasible to perfectly plan the text wrapping for every scenario.

So, avoid danglies wherever possible for common screen sizes, but also accept that you can't completely eradicate them.

Use proper punctuation.

If comment pitfalls are not using the correct quotation mark, a postrophe mark and dash.

The preferred quotation mark is called a curly quote.

This differs from straight quotes which are using coding.

Notice how the open and closed Design programs have an automatic way of turning quotation marks into curly quotes.

In Figma, go to the menu in the top-loved corner, click Preferences, and make sure Substitute Smart Quotes is turned on.

Otherwise, you can manually insert smart quotes with your keyboard.

Check out the teacher's notes to see what keys to press.

If you need to interrupt the text, do not use a hyphen.

A is the short line on your keyboard which is used in hyphenated words such as part-time musician.

Then there are N and N In dashes are a bit longer than hyphens and are used to indicate a range of time or numbers

like one through ten.

In dashes are even longer and indicate a break in thought.

For example, it's such a beautiful day in the park.

Hey, is that squirrel wearing a fedora?

Check out the teacher's notes for the keystrokes.

Another feature of OpenType is stylistic alternates.

When a font has this feature, it means there is more than one option for a given character.

For example, a font can have several different M's to choose from.

Let's look at an example.

Railway is a Google font with this feature.

Go to Type Details and toggle on and off the stylistic set one.

See how the letter forms change, such as the uppercase W and G?

I put them next to each other so you can compare.

In summary,

we analyze the content,

chose a type-based pair to work with,

put together a color palette,

set up our web fonts and typographic scale,

laid out type with good measure and rhythm, created typographic hierarchy in the design, and polished it responsibly.

I hope y'all leave this course with a better understanding of typography and know how to execute it well.

Go forth creating designs with nice type.

In this practice session, you'll practice typography.

Here's a design for a news article.

We'll be using this design to practice typography skills.

Do you see anything that can be improved from a typography standpoint?

Think about how you might improve it.

Download the project files and you'll see a couple Figma files.

Open up the file that's labeled before and make the improvements.

If you haven't used Figma yet, you can open a free account.

When you have a solution, check out the next video and I'll share my solution.

How did you do?

Were you able to rework the typography?

did.

First, I noticed the text was set in a single font aerial.

This is a generic font, so it isn't giving the design much character.

It's also more dynamic to choose a pair of fonts that work together.

So, I knew I wanted a bold display text for the header and an easy to read font for the body text.

I landed on Patua 1 for the headline and Meriwether for the Body Text, which are both available for free via Google Fonts.

As a reminder,

to find an appropriate font for Body Text, look for a font family that contains a range of weights, including regular, metallic, and bold.

Also, look for low to moderate stroke.

meaning the text looks balanced and even with little variation and stroke width.

To further optimize for readability, look for large counters and a tall x-height.

For resources to find fonts and font pairings, check out the teacher's notes.

By the way, let's briefly chat about type scales.

When I changed the headline to Patua1, I increased the text size because I noticed the design had a low type ratio.

The type ratio is the difference between the largest and smallest font size.

So in this case, the largest was 30 pixels and the smallest was 12 pixels.

New sites are designed to grab attention.

Therefore, it's good to aim for high type ratio.

So, I made the headline 60 pixels.

Next, I wanted to make the body text even more readable by increasing the space between wrapped lines.

The 18-pixel body text was previously set to auto-line height, and I increased it to 30 pixels.

Generally, you'll want to set line height to 130 to 150% of text size.

Although, you can play around with it, as it's not a hard rule.

I also softened the body text color.

It was all solid black, which reads a bit harsh on the white background.

I knocked it down to a dark gray to retain the contrast while giving it a softer itch.

Next, I noticed the wide width of the paragraphs.

My eyes are working hard to scan back and forth over such a wide distance.

I shorten the paragraphs to a more comfortable width.

Then, I rearrange the images and related stories to fit in the white spaces created by the text columns.

At this point, it was looking much better, although I wanted to add more visual treatment to really spice it up.

I added a drop cap, which is a classy, old-timey print technique where the first letter of a paragraph is an enlarged capital letter.

The size typically spans two or three lines.

To ease the transition between the drop cap and the following text, I capitalize the first significant series of words.

It's best to use small caps for this since they're specifically designed to be uppercase letters, which scale down to lowercase height.

The Meriwether font doesn't support small caps, so I use regular capitals.

Regular cavitals make the text stand out a bit more than small caps,

but I like the charm this technique is adding to the design and is better than trying to do a faux small caps.

The last bit of flourish I added to the body text was the pull quote.

A pull quote is a statement that's emphasized in description.

This breaks up long bodies of text, making it more scannable and entertaining to read.

Finally, the last section I improved was the intro text.

The hierarchy of this text was unclear, making it feel out of balance and difficult to decipher.

I de-emphasize the date and time by making the text smaller and lightening the text color.

I chose a gray which is lighter than the primary text color, yet still dark enough to provide enough contrast.

I also moved it above the headline since I wanted to create a pattern which allows for wrap.

I didn't want this text to get in the way.

As for the author's name, I tucked it below the sub header to create a balanced layout and an appropriate hierarchy.

I also softened it by applying the secondary text color.

That's it for the changes.

By the way,

I recommend using style By defining text and color styles,

you can define styles once and allow them to trickle through the elements across multiple artboards.

This makes it much easier if you decide to switch fonts or tweak a color later on.

Instead of changing it for each individual element,

you can adjust the style in one spot For more info on this, check out the teacher's notes.

If my design looked really different from yours, don't worry.

Remember, there are lots of different solutions to this, and the important thing is to just keep practicing.

翻译语言

选择翻译语言

视频总结导出字幕口语评测

解锁更多功能

安装 Trancy 扩展，可以解锁更多功能，包括AI字幕、AI单词释义、AI语法分析、AI口语等

兼容主流视频平台

Trancy 不仅提供对 YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera 等平台的双语字幕支持，还能实现对普通网页的 AI 划词/划句翻译、全文沉浸翻译等功能，真正的语言学习全能助手。

支持全平台浏览器

Trancy 支持全平台使用，包括iOS Safari浏览器扩展

多种观影模式

支持剧场、阅读、混合等多种观影模式，全方位双语体验

多种练习模式

支持句子精听、口语测评、选择填空、默写等多种练习方式

AI 视频总结

使用 OpenAI 对视频总结，快速视频概要，掌握关键内容

AI 字幕

只需3-5分钟，即可生成 YouTube AI 字幕，精准且快速

AI 单词释义

轻点字幕中的单词，即可查询释义，并有AI释义赋能

AI 语法分析

对句子进行语法分析，快速理解句子含义，掌握难点语法

更多网页功能

Trancy 支持视频双语字幕同时，还可提供网页的单词翻译和全文翻译功能