IntroductionWelcome| 00:04 | Hi! I'm Laura Franz, and welcome to
Choosing and Using Web Fonts.
| | 00:09 | New Web fonts are released constantly,
so in this course, I'll show you what to
| | 00:13 | look for when choosing a font.
| | 00:14 | We'll look at historical context, which helps
explain why fonts look and feel a certain way.
| | 00:20 | I'll show you how letters written with
pen and ink have affected font design.
| | 00:24 | We'll also look at how fonts differ
from each other, and how subtle variations
| | 00:29 | can affect the look of a page.
| | 00:31 | I'll show you what to
avoid when choosing a font.
| | 00:33 | We'll cover what characteristics
don't hold up on screen, and what makes a
| | 00:37 | font harder to read.
| | 00:39 | We'll explore a wide range of
fonts, including serifs, sans serifs,
| | 00:43 | handwriting, and display fonts.
| | 00:46 | We'll even look at how to choose two
fonts to use together, whether you're
| | 00:49 | working with text, or a headline.
| | 00:52 | Throughout the course we'll use Google Web
Fonts, Typekit, and the @font-face syntax.
| | 00:57 | So let's gets started with
Choosing and Using Web Fonts.
| | Collapse this transcript |
| What you should know before watching this course| 00:00 | In this course, you'll be adding Web
fonts to files using Google Web Fonts,
| | 00:06 | Typekit, and the @font-face syntax.
| | 00:08 | In order to make the fonts work, you
need to have some experience with HTML and
| | 00:13 | CSS, either in a text editor
or in Dreamweaver.
| | 00:17 | If you aren't familiar with the
basics of HTML and CSS, you may find the
| | 00:22 | exercises go a little fast for you.
| | 00:25 | If that happens, I recommend you watch
a basic HTML and CSS course from the
| | 00:30 | Lynda.com Online Training Library first.
| | 00:34 | In addition, in order for Typekit
fonts to work, you'll need a server space.
| | 00:40 | You'll also need to know how to
FTP a file to your server space,
| | 00:44 | and you'll need to know your URL or domain
name so you can view the files you upload.
| | 00:49 | Typekit fonts do not work on your
Desktop unless it's set up as a local server.
| | 00:54 | This course does not require the use of
a specific text editor, so use whatever
| | 00:59 | authoring tool you're comfortable with.
| | 01:02 | I'll be using TextWrangler, but you'll
be able to do these exercises in the Code
| | 01:06 | view of Dreamweaver or any other HTML
or text editor you're familiar with.
| | 01:11 | All exercises can be completed using
free fonts, whether through Google Web
| | 01:16 | Fonts, Typekit's trial plan, or
by using the @font-face syntax.
| | 01:21 | I'll show you some fonts that aren't
free, and I'll even show you how the
| | 01:24 | exercise would look if we had used one
of these non-free fonts, but you're not
| | 01:28 | required to purchase any
fonts or plans for this course.
| | 01:32 | Finally, throughout the course, I
refer to things like legibility,
| | 01:36 | readability, hierarchy, and chunking,
all of which help create a page that's
| | 01:40 | pleasant and easy to read.
| | 01:42 | I do not go into detail on these topics.
| | 01:46 | If you'd like to learn more about
them, I recommend my previous course,
| | 01:50 | Typography for Web Designers.
| | Collapse this transcript |
| Using the exercise files| 00:00 | Exercise files are available to
premium subscribers of Lynda.com.
| | 00:05 | Simply download the exercise files
to your computer, and place them on the
| | 00:09 | Desktop for ease of use.
| | 00:11 | The exercise files are organized by
chapter number, but many of the early
| | 00:16 | chapters start with a file from
the original_city_site folder.
| | 00:20 | In these early chapters, I'll have you
work with the same file for two or three
| | 00:26 | lessons in a row,
so save your files as you go.
| | 00:28 | Toward the end of the course, when we
start working with more than one font, I
| | 00:33 | provide you with new
starting points for each lesson.
| | 00:36 | Whenever an exercise file is
available for a video, you'll see a yellow
| | 00:40 | overlay at the bottom of the screen
that indicates the location and the name
| | 00:45 | of the exercise file.
| | 00:47 | I also provide final files for each chapter.
| | 00:51 | Some of the final files, such as the
museo_sans_site in Chapter 09-08 uses the
| | 00:57 | @font-face syntax, and
requires font files to work properly.
| | 01:01 | Due to licensing issues, these
font files have not been provided.
| | 01:05 | You'll need to download the
files as shown in the lesson.
| | 01:08 | Other files with the tk in
their title use Typekit fonts.
| | 01:12 | The fonts in these files will not work
on your system, because the Typekit embed
| | 01:17 | code only works for the
domain name used in the course.
| | 01:20 | So to make these fonts work, you'll need
to set up your Typekit, and put your own
| | 01:25 | embed code in the file.
| | 01:26 | Still other files, like the Ubuntu site
in Lesson 10-04, use Google Web Fonts, and
| | 01:32 | will work from your system as is.
| | 01:34 | Working with the exercise files
can add value to the training.
| | 01:39 | However, if you don't have access to
the exercise files, you can still follow
| | 01:43 | along with the videos using your own files.
| | Collapse this transcript |
|
|
1. Getting StartedRecognizing the anatomy of letters| 00:01 | We're going to start this course by
zooming in and to looking closely at
| | 00:05 | the anatomy of letters.
| | 00:07 | I want to point out some of
the terms you need to know.
| | 00:11 | I'll use these terms throughout the
course when we compare and contrast fonts.
| | 00:16 | It's helpful to know the
vocabulary for other reasons too.
| | 00:20 | Type designers and font
providers use these terms,
| | 00:23 | and when you're reading about new
fonts, it will help you to know what
| | 00:27 | they're talking about.
| | 00:28 | In this course I'll focus on the
important anatomy; the parts that most
| | 00:32 | obviously change from font to font.
| | 00:35 | Paying attention to these parts can
help you narrow down your search when
| | 00:39 | looking for a new font to use.
| | 00:42 | Throughout the course, we'll be
looking at a variety of fonts.
| | 00:45 | I'll show them to you using a Web font
sheet, which is a page I use for testing fonts.
| | 00:51 | Let's zoom in on a Web font sheet comparing
Georgia and Verdana, two popular Web
| | 00:58 | fonts designed for the screen by Matthew Carter.
| | 01:01 | The fonts were designed for
maximum readability onscreen, and hold up
| | 01:05 | well cross-browser.
| | 01:06 | Throughout the course, I'll compare
other Web fonts we are considering to one of
| | 01:10 | these two fonts, so you'll see
these Web font sheets often.
| | 01:14 | Verdana and Georgia are very different.
| | 01:17 | To start with, one has
serifs and the other one doesn't.
| | 01:20 | Serifs are the little strokes that
come off the ends of stems and other
| | 01:25 | strokes in the letters.
| | 01:27 | You can see there are head serifs at
the tops of letters, and foot serifs at
| | 01:32 | the bottom of letters.
| | 01:34 | You can also see that
some fonts don't have serifs.
| | 01:38 | We call these fonts sans
serif, which means no Serif.
| | 01:42 | Related to the serif is the terminal.
| | 01:45 | Terminals are the shapes at the end of
rounder strokes, like at the end of the f,
| | 01:50 | a, and c. The x-height is the
size of the lowercase x in the font.
| | 01:55 | The x-height goes from the
baseline to the meanline in the font.
| | 02:01 | Most of the bowls also come up to the x-height.
| | 02:05 | The bowls are the round forms within letters.
| | 02:08 | If you look closely, you can see that
bowls actually extend slightly above the
| | 02:13 | meanline, and slightly below the baseline.
| | 02:16 | This is because rounder forms feel
smaller in text. That's because of all the
| | 02:21 | extra space around the curve.
| | 02:23 | In order to look the same size as other
letters, the bowls need to be slightly bigger.
| | 02:28 | Related to the x-height
and bowls are the ascenders;
| | 02:32 | they ascend above the meanline, and the
descenders, which descend below the baseline.
| | 02:38 | All letters have space inside of them.
| | 02:41 | This space is called a counter form.
| | 02:43 | When talking about counter forms, we
often call them counters, for short.
| | 02:48 | Counters can be closed like
this one, or open like this one.
| | 02:53 | The lowercase e has two
counters separated by a crossbar.
| | 02:58 | The crossbar doesn't look exciting, but it plays
a pretty important role early on in font design.
| | 03:03 | It also helps define how large
or small the closed counter is.
| | 03:08 | Also in the lowercase e is the aperture.
| | 03:11 | Much like counter forms,
the aperture is about space;
| | 03:14 | it is the opening in the letter.
| | 03:17 | You'll also find the aperture in
the lowercase a and the lowercase c.
| | 03:21 | I've been talking a lot about the space
and side letters, but it's also important
| | 03:27 | to look at the space between letters.
| | 03:28 | Letter spacing is not necessarily a part of
a letter, but it's still important to look at.
| | 03:36 | If letter spacing gets too loose or
too tight, it affects the readability of
| | 03:39 | a font on the screen.
| | 03:42 | Finally, you should know about stress.
| | 03:44 | Stress is the angle of the
thick strokes in the bowl.
| | 03:48 | You can find the stress by
drawing an imaginary line connecting the
| | 03:52 | thinnest parts of the bowl.
| | 03:55 | Stress varies from font to font.
| | 03:56 | Some, like Verdana, don't have any
stress if the stroke of the bowl is
| | 04:01 | a consistent width.
| | 04:03 | All of these parts of letters play a role
in classifying, choosing, and using fonts.
| | 04:09 | With time and practice, you can learn
how to use anatomy to choose and use the
| | 04:14 | best Web fonts available.
| | Collapse this transcript |
| Understanding font classification| 00:00 | Now we're going to pull back
and look at the big picture.
| | 00:04 | Let's talk about general categories of fonts.
| | 00:07 | There are many ways to classify typefaces,
and that none of them are perfect.
| | 00:12 | Typographers and type designers
themselves can't agree on one way to classify fonts.
| | 00:17 | This is because, unlike Biology,
type design is an art, not a science,
| | 00:22 | and everyone has their own
way of thinking about fonts.
| | 00:24 | But there is a traditional way of
classifying fonts; it's called the
| | 00:31 | five families of type.
| | 00:32 | In the top row, we have examples of old
style, transitional, and modern fonts.
| | 00:40 | Next, we have slab serif fonts,
and finally, sans serif fonts.
| | 00:46 | The five families of type is a great
place to start, but it's an imperfect system.
| | 00:51 | One problem is that it classifies fonts
in terms of historical shifts in font
| | 00:56 | design, but the fonts originally
designed during these historical periods only
| | 01:01 | span from the late 15th
century to the mid 20th century,
| | 01:05 | so the system leaves out the earliest
approaches to type design, as well as type
| | 01:10 | designed after the mid 1900s, which
means it leaves out the variety of fonts
| | 01:15 | designed since the advent
of the personal computer.
| | 01:18 | It's also imperfect because it's a bit broad.
| | 01:21 | For example, if we consider the term sans
serif it groups all sans serif fonts together,
| | 01:28 | but sans serif text fonts don't all look alike.
| | 01:31 | Finally, using fonts that mimic the
texture of personal handwritten text has
| | 01:37 | become popular as more
information is provided digitally,
| | 01:40 | so we're starting to need a category
for fonts that look more like handwriting.
| | 01:45 | In this course, I'm going to
expand on the five families of type.
| | 01:49 | We'll start by adding Venetian, which is
a type style earlier than old style fonts.
| | 01:54 | Venetian fonts aren't used as much in
page layout, and actually don't work well
| | 01:59 | on the Web yet, due to how
different browsers render type,
| | 02:01 | but browsers are constantly changing, and
there are a few good Venetian fonts out
| | 02:07 | there, so we'll cover them in this course.
| | 02:09 | A couple of years down the line,
there may be a great option for Web text.
| | 02:13 | Then, we'll keep the old style,
transitional, modern, and slab serif categories,
| | 02:21 | and we'll add a category of fonts to
act to sort of a catch-all for the fonts
| | 02:25 | that don't fit neatly elsewhere.
| | 02:27 | We'll call them other serif fonts.
| | 02:29 | Typographers don't have a common word for
these fonts; we just know they are out there.
| | 02:34 | We'll keep the sans serif category which
can also be called transitional sans serif.
| | 02:39 | But we'll expand it, adding
geometric sans and humanist sans categories.
| | 02:46 | Finally, we'll add a category
of fonts called handwriting.
| | 02:49 | Now that I've told you all the reasons
why classification is imperfect, I want
| | 02:55 | to be clear that classifying
fonts is important for three reasons.
| | 02:59 | One, it helps us talk about fonts.
| | 03:02 | Even if we don't agree on a perfect
classification system, most typographers and
| | 03:06 | font designers are familiar
with the five families of type.
| | 03:09 | We use it like a kind of shorthand.
| | 03:11 | You'll see where it's like old style and
transitional pop up in descriptions of fonts.
| | 03:16 | You can also use these words to
describe to someone else the kind of font
| | 03:20 | you're looking for.
| | 03:21 | Two, it trains our eyes
to look closely at fonts.
| | 03:24 | As James Craig says in Designing with
Type, there is no better way to train the
| | 03:30 | eye than to study the subtle
changes in typefaces over the centuries.
| | 03:34 | Three, learning about the five families
of type focuses on type history, which
| | 03:39 | in turn focuses on the shifts
and materials and technology.
| | 03:43 | As you'll see, this helps us understand
why fonts look the way they do, and why
| | 03:48 | they feel old, or elegant, or casual.
| | 03:51 | The five families of type, even with my
additions, is fairly general and easy to remember.
| | 03:57 | There are far more
complex ways to classify fonts.
| | 04:00 | One is the Panose system, which assigns
fonts a 10-digit number based solely on
| | 04:05 | their visual characteristics.
| | 04:07 | It's a complex system.
| | 04:09 | I personally do not teach it, or use it
myself, but if you're interested in a
| | 04:13 | more specific classification system, you
might enjoy learning more about it on your own.
| | 04:18 | Looking at this modified five
families of type, what we've got is a list of
| | 04:22 | categories for text fonts, that is,
fonts that theoretically can be used in
| | 04:27 | text, so you'll find some of them
don't work as well onscreen as others.
| | 04:31 | We'll use this list as our guide as
we move through the chapters on text
| | 04:35 | fonts in this course.
| | Collapse this transcript |
| Finding and testing web fonts| 00:00 | When you're ready, you can build your
font library by purchasing licenses to use
| | 00:04 | fonts on your Web sites,
| | 00:06 | but when you're first starting out, I
recommend working with a service that
| | 00:11 | provides a variety of fonts to choose from,
rather than individually licensing fonts.
| | 00:15 | In this course, we'll primarily
use Google Web Fonts and Typekit.
| | 00:20 | There are other sources for Web fonts
out there, and I share some of them with
| | 00:24 | you at the end of the course, but I
recommend Google Web Fonts and Typekit for
| | 00:29 | a couple of reasons. First is cost.
| | 00:32 | Google Web Fonts are free, and Typekit
has a variety of plans available, one of
| | 00:37 | which is a free trial plan.
| | 00:40 | While I require my students to
purchase the Portfolio plan, so they have more
| | 00:44 | fonts to choose from, I have done my
best to organize this course around fonts
| | 00:49 | that are available either in Typekit's
free trial plan, or via Google Web Fonts,
| | 00:54 | so you're not required to
purchase any plans for this course.
| | 00:58 | The second reason why I recommend these
two sources is access to a variety of fonts.
| | 01:04 | Having more fonts to choose
from means you can experiment more.
| | 01:07 | You can learn what kinds of fonts work for
the sites you're designing, and which ones don't.
| | 01:12 | Of course, having so many fonts doesn't
mean that they're all appropriate for text.
| | 01:17 | Many have designs that affect
readability. Others don't offer a variety
| | 01:21 | of styles and weights.
| | 01:23 | Still others don't retain the
readability cross-browser, but there are some gems
| | 01:27 | waiting to be discovered, and more
Web fonts being released every month.
| | 01:31 | As you find new fonts, and consider using
them, I recommend testing them thoroughly.
| | 01:36 | Of course, you need to find a testing
process that works for you, but here's a
| | 01:41 | little background on how I do it.
| | 01:43 | I use a Web font specimen sheet
that I've developed based on the sheet
| | 01:48 | created by Tim Brown.
| | 01:49 | My font specimen sheet uses text set
in English, since most of the sites I
| | 01:54 | design are set in English.
| | 01:56 | It also lets me see how text looks at
different sizes and line heights, what
| | 02:01 | the bold, italic, and bold italic look
like, and what it looks like set in all
| | 02:06 | caps, spaced 1 pixel.
| | 02:09 | Whenever I'm interested in using a
font, I make one of these sheets.
| | 02:12 | I keep them in a folder, and can
refer to them later for other projects.
| | 02:17 | If you're interested in making your own
Web font specimen sheet, Tim Brown, who
| | 02:21 | by the way, is the type manager for
Typekit, has posted his Web font specimen
| | 02:26 | sheet online here at webfontspecimen.com.
| | 02:30 | It's shared via a Creative Commons license.
| | 02:33 | Once I've created a font sheet, and
think I'm interested in using the font, I'll
| | 02:37 | test it via crossbrowsertesting.com.
| | 02:41 | I work on a Mac, so it's important I
make sure fonts look as good on other
| | 02:45 | operating systems and
browsers as they do on my own system.
| | 02:48 | I usually take screenshots of what
the fonts look like on various browsers.
| | 02:53 | I look at so many fonts, and testing
them takes a lot of time, so I try to keep
| | 02:57 | records of what fonts work best for me.
| | 03:00 | It saves me time in the long run.
| | 03:02 | I'll share some of my screenshots with
you throughout the course when I talk
| | 03:05 | about how fonts hold up cross-browser.
| | 03:08 | And there's one last reason why I
recommend Google Web Fonts and Typekit.
| | 03:13 | They take care of a lot of the
technical aspects of working with Web type,
| | 03:17 | so you don't have to.
| | 03:18 | You do need to know how to do some
basic HTML and CSS to get them to work,
| | 03:23 | especially on Internet Explorer,
but it's easier than doing all of the
| | 03:27 | @font-face syntax from scratch,
although you will use some @font-face syntax at
| | 03:32 | least once in this course.
| | 03:33 | It's important to know how to do it
for when you're ready to incorporate Web
| | 03:37 | fonts that are not offered by
Google Web Fonts or Typekit.
| | Collapse this transcript |
| Identifying common problems in fonts| 00:01 | As I test fonts looking for good ones to
use, the same problems come up again and again.
| | 00:07 | One is spacing.
| | 00:08 | If spacing is too tight, the
letters feel cramped together;
| | 00:13 | if letters are too loose, they feel
like they're floating away from each other.
| | 00:18 | Another problem is inconsistent spacing.
| | 00:20 | Inconsistent spacing creates an
awkward texture on the text, making it
| | 00:25 | more difficult to read.
| | 00:27 | Letters that are too tight or too loose
in words break the rhythm of the text.
| | 00:32 | Spacing that is too tight, too loose,
or inconsistent can make it a little
| | 00:37 | harder for people to read, and as always,
if a text is too hard to read, people
| | 00:42 | may choose to simply leave the page.
| | 00:45 | Fonts with a narrow bowl, even if they're
well designed, can be difficult to read in text.
| | 00:52 | Fonts that are too light
start to get lost on the screen.
| | 00:56 | Fonts that are too heavy start to
lose the spaces inside the letters.
| | 01:00 | We need both strokes and spaces to
easily recognize letters and improve
| | 01:05 | readability on the screen.
| | 01:06 | I won't go into this in-depth, but
if you'd like more information on how
| | 01:11 | strokes and spaces affect readability,
I cover it in my previous course,
| | 01:16 | Typography for Web Designers.
| | 01:18 | Another common problem with fonts is when
one or more letters in a font is too unique.
| | 01:23 | In text, the letter pops out and
says, look at me, I'm different.
| | 01:27 | Like here, the stress on the
o and d are at an odd angle.
| | 01:31 | The o looks like it's tipping
over and the d's bowl looks too thin.
| | 01:36 | Unique letters often look different
from the other letters, and can distract the
| | 01:40 | reader or impair legibility, either way,
making the text a little harder to read.
| | 01:47 | A final common problem to look out for
is punctuation that is not well-designed.
| | 01:52 | For instance, if you're interested in
the finer points of typography, and want to
| | 01:57 | use curly quotes, and appropriate
apostrophes, I recommend checking out a font's
| | 02:02 | punctuation from the beginning.
| | 02:03 | I'll be pointing out these problems
throughout the course, as well as problems
| | 02:08 | associated with specific styles of fonts.
| | 02:11 | If you avoid fonts with these problems,
you'll be well on your way to choosing a
| | 02:15 | great Web font for you project.
| | Collapse this transcript |
|
|
2. Venetian FontsUnderstanding Venetian fonts | 00:00 | When we categorize fonts for text,
we usually start with old style fonts,
| | 00:05 | but in order to understand old style fonts,
we need to understand where they came from.
| | 00:11 | We need to understand Venetian fonts,
| | 00:13 | and in order to understand Venetian
fonts, we need to step back a couple
| | 00:18 | of years, and start with the first
fonts in the first Western books printed
| | 00:22 | by Johannes Gutenberg.
| | 00:24 | In the 1430s, Johannes Gutenberg
started experimenting with casting metal type.
| | 00:29 | About ten years later, he built his first press,
| | 00:33 | and in 1455, his 42-line Bible was in progress.
| | 00:37 | Gutenberg's printed books looked a lot
like handwritten manuscripts at that time.
| | 00:42 | In fact, he thought people would be more
accepting of his work if it looked like
| | 00:46 | the handwritten materials they were used to,
| | 00:48 | so he even cast different
forms for some of the letters.
| | 00:51 | Here the top A is slightly
narrower, and has less detail on the bowl.
| | 00:57 | By creating slight imperfections in
some of the letters, the text looked more
| | 01:01 | varied; more like it was done by a human hand.
| | 01:05 | We often associate this kind of
lettering, called Blackletter, with Germany.
| | 01:09 | Not surprisingly, Gutenberg
was working in Mainz, Germany.
| | 01:13 | His fonts were based on a
writing style in Northern Europe.
| | 01:17 | Now, Blackletter is no longer
considered a standard, easy to read font.
| | 01:21 | How did fonts go from Blackletter to
Venetian, which is much closer to the kind
| | 01:26 | of Roman text we're used to
reading today, in less than 20 years?
| | 01:30 | Well, printers came to Mainz from
other parts of Europe to learn the new
| | 01:35 | printing technology.
| | 01:36 | After only a couple of years, Mainz
was ransacked, and the printers fled for
| | 01:40 | their safety and livelihood to other cities.
| | 01:43 | One such printer, Nicolas Jenson,
came from France to Mainz, but when he
| | 01:48 | left, he went to Venice.
| | 01:49 | The manuscript handwriting in Venice was very
different from the handwriting in the north.
| | 01:56 | Other printers also fled to Italy.
| | 01:58 | Most of them cast fonts that
closely resembled the Venetian forms of
| | 02:02 | manuscript handwriting.
| | 02:04 | Jenson, however, was inspired by his materials.
| | 02:08 | He saw the opportunity to move away
from handwritten forms, and to standardize
| | 02:12 | some of the shapes within in between letters.
| | 02:15 | Look at the lowercase a in the
manuscript, which was written in 1460 in Venice.
| | 02:21 | See how the bowl is bigger than the top stroke?
| | 02:24 | I can imagine a person with a
pen quickly writing that oval form.
| | 02:28 | In the middle image, printed in
Rome in 1472, the a retains much of
| | 02:34 | the manuscript form.
| | 02:35 | This printer based their
fonts on manuscript lettering.
| | 02:40 | Now, if we look at Jenson's, we can see the
overall structure of the letter has changed.
| | 02:46 | This is true of most of
the letters in his system.
| | 02:49 | Look at the u in the manuscript.
| | 02:50 | It feels inky, the head serifs are sort
of blobby, and the width of the strokes
| | 02:55 | change as the pen forms the letter.
| | 02:57 | In the middle image, the u still feels inky.
| | 03:00 | It doesn't have the same form as the
manuscript u, but the way the strokes
| | 03:04 | change width makes the letter
feel like it was written with a pen.
| | 03:07 | Jenson's U is refined.
| | 03:10 | The serifs are crisp; the
vertical strokes are straight and even.
| | 03:14 | And it's not just about refining the letters.
| | 03:16 | Jenson also refined how the letters
sat next to each other on the page.
| | 03:21 | If we look carefully at the
baseline in the middle image, we can see
| | 03:24 | it's slightly uneven.
| | 03:25 | Jenson's baseline is more aligned.
| | 03:28 | We've been looking at a detail of a
book printed by Nicolas Jenson in 1471,
| | 03:33 | only nine years after Mainz was ransacked;
only 16 years after Gutenberg printed his Bible.
| | 03:40 | The leap in font design from one
form to another is substantial.
| | 03:44 | Jenson's fonts are what we'd
call humanist or Venetian fonts.
| | 03:48 | There were other printers working at
that time, but it's Jenson's fonts
| | 03:53 | that pretty much set the stage for
the serif fonts that follow for the
| | 03:56 | next 450 years.
| | Collapse this transcript |
| Identifying a Venetian font| 00:01 | Nicolas Jenson's fonts are what
we'd call humanist or Venetian fonts.
| | 00:05 | Humanist fonts have forms that
were created by the human hand.
| | 00:09 | Today we have a Web font
available called Adobe Jenson Pro.
| | 00:14 | Let's take a closer look at it.
| | 00:16 | Immediately noticeable is how much smaller
Jenson Pro's x-height is compared to Georgia's.
| | 00:22 | We can also see that Adobe Jenson Pro looks
more like it was written with pen and ink.
| | 00:27 | Look at Jenson Pro's lowercase b;
look at where the bowl meets the stem.
| | 00:33 | We can imagine a pen being pulled up
out of the stem then around the bowl,
| | 00:37 | creating this ribboning effect,
| | 00:39 | and where the pen meets up with the stem
again, it would create this pool of ink.
| | 00:44 | Now compare it to Georgia's b, where the
wide stroke in the bowl is more uniform,
| | 00:49 | and there's a carefully designed
spur at the bottom of the stem.
| | 00:53 | Jenson feels more inky and handwritten.
| | 00:55 | You can see the same ribboning in the
c, and here in the e. The e is a dead
| | 01:00 | giveaway for a Venetian font.
| | 01:03 | It has a rising crossbar;
| | 01:04 | this is a Venetian characteristic.
| | 01:07 | Not all fonts with rising crossbars are
Venetian, because the characteristic has
| | 01:12 | been borrowed and recycled by
contemporary type designers,
| | 01:14 | but all Venetian fonts do have rising crossbar.
| | 01:18 | Now let's look at the original Jenson font.
| | 01:22 | Adobe Jenson Pro, like all digitized
versions of old fonts, tries to capture the
| | 01:27 | essence of the original font,
| | 01:29 | but capturing the essence is not
the same as creating an exact copy.
| | 01:33 | Look at the e. You can see that Adobe
Jenson has captured the rising crossbar.
| | 01:38 | It also has a similar stress to the original.
| | 01:41 | That is, the angle of the imaginary
line drawn between the thin parts is almost
| | 01:46 | the same from one font to another.
| | 01:48 | But Adobe Jenson Pro emphasizes the
little bit of ink coming off the crossbar.
| | 01:54 | If we look closely at the e's in
Jenson's original font, we can see a hint of
| | 01:59 | this form, but it's not as strong
as it is in the digitized version.
| | 02:03 | Also, look at the lowercase a. The
digitized version actually looks more
| | 02:08 | ribboned than the original.
| | 02:10 | Look at the terminal on the Adobe version.
| | 02:13 | It has a shape that
suggests a pen stroke ended here.
| | 02:16 | On Jenson's original, the terminal is
rounder, a little less pen-formed, and
| | 02:22 | some of the a's don't have
an extra terminal at all.
| | 02:25 | Finally, let's look at the lowercase n.
Jenson's original n has a thickening
| | 02:30 | where the stroke meets the left foot serif.
| | 02:32 | Adobe's version is thinner;
more delicate and refined.
| | 02:36 | But Adobe's version does keep the
shape of the right-hand foot serif.
| | 02:42 | See how it looks like a pen pulled down
and to the left, then moved to the right,
| | 02:46 | and lifted up off the page?
| | 02:48 | You can see the same form in Jenson's original.
| | 02:51 | These are just some of the characteristics
that make the font feel handwritten.
| | 02:56 | Venetian fonts are sometimes
called humanist fonts for this reason,
| | 02:59 | but it's important to remember the digitized
versions of old fonts are not a perfect match.
| | 03:05 | Let's back out and look at the two as text.
| | 03:07 | Adobe's version looks more
even, and a little heavier.
| | 03:12 | Next let's look at a more contemporary
version of a Venetian font, Calluna,
| | 03:17 | designed by Jos Buivenga.
| | 03:20 | The first thing you'll notice when
looking at Calluna is that it looks more like
| | 03:23 | Georgia than Adobe Jenson Pro did.
| | 03:26 | It has a similar x-height, and
the letters look more refined.
| | 03:29 | The letter strokes are less ribbony,
but you'll see references to forms
| | 03:33 | handwritten with pen and ink.
| | 03:36 | Let's look at the lowercase n.
There's that foot serif we saw in Jenson.
| | 03:40 | It looks like a pen was
pulled down, over, and back.
| | 03:43 | And Buivenga also added a similar
feature to the bottom of the descender on the
| | 03:48 | lowercase p. Look at the lowercase e,
and you'll see the rising crossbar, though
| | 03:53 | it's at less of an angle.
| | 03:56 | Calluna is what I would call a
contemporary or modernized Venetian font.
| | 04:00 | The rising crossbar and hand-drawn
serifs feel very Venetian to me, even though
| | 04:05 | the bigger x-height and more
stylized letters feel more contemporary.
| | 04:09 | If we back up and look at Calluna as
text, it is slightly lighter and more open
| | 04:14 | than Adobe Jenson Pro.
| | 04:16 | It also doesn't feel quite as
handwritten as the Adobe Jenson Pro does.
| | 04:21 | It's important to understand that just
because a font is classified a certain
| | 04:25 | way doesn't mean it will look like all
the other fonts in that classification.
| | 04:29 | We looked at Jenson's original
printed font, Adobe Jenson Pro, and Calluna.
| | 04:34 | There are specific similarities that
make them all Venetian, but each font
| | 04:39 | also has its own unique qualities that
affects how it looks when set as text
| | 04:44 | on the page.
| | Collapse this transcript |
| Understanding handwritten letters| 00:00 | In the last chapter, I talked about
handwritten letters, and how some forms
| | 00:05 | look like they were done with pen and ink.
| | 00:07 | I'm asking you to imagine how the
shape of a pen nib combined with ink formed
| | 00:12 | the characteristics of a letter.
| | 00:14 | To help you visualize this better,
we're going to take a quick break from fonts
| | 00:18 | while I show what I mean when I
talk about pen-formed letters.
| | 00:22 | Now, I'm not a calligrapher;
| | 00:24 | I've only taken a couple of workshops
to help me understand letters better,
| | 00:28 | so these letters won't be
award-winning, but they'll do.
| | 00:32 | I'm using a C1 nib, which is
flat and has a slight angle.
| | 00:37 | The shape of the nib is
what makes it a C nib.
| | 00:40 | The size of the nib is what makes it a C1
nib. A C2 would be a smaller, narrower nib.
| | 00:45 | I've marked out a template for my baseline,
meanline, cap height, ascender, and descender.
| | 00:51 | Now, in this day and age, many of
us have learned to draw forms in a
| | 00:55 | vector-based software.
| | 00:57 | When we do that, if we want to draw an
O, for instance, we would draw the outer
| | 01:02 | edge, then the inside edge, then
we'd fill in the shape in between.
| | 01:06 | When we draw a letter this way, we
have to make very careful decisions about
| | 01:11 | where to put the outer and the inner
edges, so we can get the shape we want.
| | 01:15 | But when we write with a nib like
this one, the shape is created by the nib.
| | 01:21 | I'll draw the left side,
come up, and draw the right side.
| | 01:25 | It's important to always pull the pen, so
they always actually made out of two strokes.
| | 01:29 | Notice the ribboning effect. The
stroke changes rather abruptly from thick, to
| | 01:34 | thin, to thick again.
| | 01:35 | It was created by the
angle of the pen on the paper.
| | 01:39 | I can vary it by changing the angle of the pen.
| | 01:43 | The nib does all the work.
| | 01:45 | I can change the angle of the pen, and
write another O. The stress of the O,
| | 01:51 | represented by a line drawn between the
two narrowest parts of the bowl, shifts
| | 01:56 | depending on the angle of the pen.
| | 01:58 | I'll move the paper over, and use the
nib to make another letter; an e. I can
| | 02:05 | also make a head serif, and a stem,
then add a bowl, and make the letter b. I
| | 02:13 | can make an a one of two ways;
drawing the right stroke first, then adding
| | 02:18 | the closed counter, or writing a spine like a
backward s, then finishing the right stroke.
| | 02:27 | Notice how I actually wrote pretty structured
letters; the pen and ink added the ribboning.
| | 02:32 | Even this stroke, which looks the
least structured, is a vertical line.
| | 02:36 | The slight curve is because I accidentally
tipped my pen off the paper while I was writing.
| | 02:41 | The pen and ink created the details.
| | 02:44 | Finally, when we looked at the
Venetian fonts, there was a special foot serif
| | 02:49 | that looked hand-done.
| | 02:50 | The pen pulled down, then
over, then back to the right.
| | 02:55 | I'll do it again on the other side.
| | 02:58 | Pen nibs come in different shapes and sizes.
| | 03:01 | When letters are written with a C
nib, they get a ribboning effect, and
| | 03:05 | create pen-formed serifs.
| | 03:07 | Venetian fonts include
elements that look pen-formed.
| | 03:11 | If you have the opportunity to take a
calligraphy workshop, I highly recommend it.
| | 03:16 | Carefully writing letters with
different nibs will give you a more intimate
| | 03:20 | understanding of fonts.
| | Collapse this transcript |
| Choosing a Venetian font| 00:00 | So now that we know what a Venetian font
looks like, we need to pick one to use.
| | 00:05 | The first Venetian font to
consider is Adobe Jenson Pro.
| | 00:09 | It is available from
Typekit in their Portfolio plan.
| | 00:12 | This makes it a little out of reach for
this course, so we probably won't use it,
| | 00:17 | but let's look at it anyway.
| | 00:18 | Adobe Jenson Pro has a very small x-height.
| | 00:22 | Look at the body size compared to Georgia.
| | 00:25 | This makes text set in Adobe
Jenson Pro look very small.
| | 00:29 | Here, I've set the text to
19 pixels to make it readable.
| | 00:33 | It's a beautiful font. It has the
details that make it feel hand-lettered.
| | 00:38 | The characters work together in a
system, all the letters feel like they
| | 00:41 | belong together, and the spacing is
good; not too tight, not too loose.
| | 00:46 | But I find it a little
hard to read onscreen.
| | 00:50 | The closed counters on
the a and e are very small.
| | 00:54 | My eyes get tired more easily when I
read text on the screen set in Jenson.
| | 00:59 | In addition, the thin rising crossbar
on the e gets lost in Internet Explorer 7
| | 01:05 | and 8, making text even
harder to read when set in Jenson.
| | 01:09 | I love this font, but it's not going to
help visitors read my Web site, so we're
| | 01:14 | going to keep looking. Next is Calluna.
| | 01:19 | It's available from Typekit in their trial plan.
| | 01:21 | Though it feels less old and pen-formed
than Jenson, it has a larger x-height,
| | 01:27 | and feels bigger and more open in text.
| | 01:30 | It has a lovely italic and bold.
| | 01:33 | The closed counter forms on a and e
feel a little bigger, and make the text a
| | 01:38 | little easier to read.
| | 01:40 | Unfortunately, when we test Calluna
cross-browser, it has the same problems on
| | 01:45 | Internet Explorer 7 and 8, as well
as Safari, and Firefox on Windows.
| | 01:51 | It's a great font, but the old forms
are too complex for the screen, and don't
| | 01:55 | render well if they're lightened.
| | 01:57 | Let's look at one other
possible Venetian font I found.
| | 02:02 | I wouldn't use this font.
| | 02:04 | For one thing, it's not as
Venetian as I'd like it to be.
| | 02:07 | It has the rising crossbar, but if I
look at the o in the heading, there isn't
| | 02:12 | any ribboning in the bowl at all, and
the foot serifs on the end, they don't look
| | 02:17 | as pen-formed as I'd like. Now this is fine.
| | 02:21 | The designer obviously wasn't going
for the same kind of old-looking Venetian
| | 02:25 | font that I want to use,
| | 02:26 | but what concerns me more is the
letter spacing. It's too tight.
| | 02:31 | Read the first sentence; For decades,
critics have predicted the end of the written word.
| | 02:37 | Now look at the word predicted.
| | 02:40 | The letters in the word are so
close together they actually touch.
| | 02:43 | When letters are this tight, it
makes it more difficult to immediately
| | 02:47 | identify letters and words.
| | 02:49 | Visitors have to work a little harder
to read the text on your site, and if we
| | 02:53 | want to create the most pleasing
experience possible, so readers will stay
| | 02:57 | awhile, and maybe keep coming back, we
don't want to use a font whose letter
| | 03:02 | spacing is so tight.
| | 03:03 | So now we have a problem.
| | 03:05 | We have two fonts that
could work: Jenson, and Calluna.
| | 03:09 | Calluna is a little
easier, in my opinion, to read,
| | 03:13 | but Jenson has that real handwritten quality.
| | 03:16 | The problem is, neither one of them
holds up cross-browser, so we really
| | 03:20 | shouldn't use either one
of them for text on the Web.
| | 03:23 | But browsers in operating
systems change constantly.
| | 03:27 | New fonts come available all the time.
| | 03:29 | A day will come when you'll be able to
use a Venetian font with confidence that
| | 03:33 | will work cross-browser.
| | 03:35 | So I'm going to show you how to use
a Venetian font in a Web site anyway.
| | 03:38 | I'll show you what to look for, and how
to think about sizing and hierarchy, and
| | 03:42 | we'll use Calluna, since it's
available in the trial plan on Typekit.
| | Collapse this transcript |
| Creating a Typekit account and building a kit| 00:00 | Before we can start using Calluna in
our site, we need to create a Typekit.
| | 00:05 | To do this, go to Typekit,
and click on Register.
| | 00:10 | As you can see, there are
multiple plans to choose from.
| | 00:13 | For this course, we're
going to use the Free plan.
| | 00:17 | With the Free plan, you can use up to two
fonts, and you can use them on one site,
| | 00:22 | and you can use all the fonts that
are available in the trial library.
| | 00:25 | The trial plan requires the use of
Typekit badge, which tells visitors to your
| | 00:30 | site that the fonts are from Typekit.
| | 00:33 | Other plans allow you to choose whether or
not to use the Typekit badge on your sites.
| | 00:37 | So let's go ahead and sign up for the plan.
| | 00:40 | If you already have an Adobe
ID, you can sign in to Typekit.
| | 00:45 | If not, you will need to create an Adobe ID.
| | 00:49 | You can use your e-mail address, and set a
password, and your date of birth, and you
| | 00:56 | can create an account.
| | 00:57 | You can read the Terms of Use and
Privacy Policy on your own, and you come to a
| | 01:02 | page that gives you information on
where to get help, and how to use Typekit.
| | 01:08 | We don't need to look at
this information right now.
| | 01:11 | I'll show you everything you need to
do the exercise files in this course.
| | 01:15 | If you want to learn more about
Typekit than I show you in this course, I
| | 01:19 | recommend taking a look at another Lynda.com
course called Up and Running with Typekit.
| | 01:24 | For now, let's get started.
| | 01:27 | First you'll be asked to create a kit.
| | 01:30 | A kit is a bundle of fonts
you want to use on your site.
| | 01:34 | You can always change
anything you set up on this page.
| | 01:37 | Let's call the kit Choosing and Using
Web Fonts, and then you'll need to choose
| | 01:43 | the domain where the fonts will be used.
| | 01:46 | Kits will only work on one domain,
and the subdomains associated with it.
| | 01:50 | If you're running a server off your
computer, you can also set the kit to
| | 01:53 | work on local host.
| | 01:54 | We're not going to run a server off our
computers in this course, so you need to
| | 01:59 | supply the domain where your
files for this course will live.
| | 02:02 | For example, I'm going to upload
all my files to goodwebfonts.com.
| | 02:07 | So I will type that domain in here.
| | 02:12 | You should type in the name of your domain.
| | 02:14 | Hit Continue, and next Typekit supplies
the JavaScript code you need to use Typekit.
| | 02:20 | It allows Typekit to serve
the fonts to your Web pages.
| | 02:24 | Typekit will only serve the fonts from
your kit to the domain you designated,
| | 02:29 | and they will only serve the fonts
you put in the kit to pages with this
| | 02:32 | JavaScript code in the head.
| | 02:35 | That means if you have a site with ten
pages, and you want all ten pages to use
| | 02:39 | the fonts in the kit, you have to put the
JavaScript code in the head of all of ten pages.
| | 02:45 | This may seem like a bit of extra
work, but it's great if you want to use
| | 02:49 | different kits and different fonts
on different pages in the same site.
| | 02:53 | Don't worry about forgetting this code.
| | 02:55 | You can always access
it again through your kit,
| | 02:57 | but if your site gets complex, you
might want to keep track of what code
| | 03:01 | goes with what kit.
| | 03:02 | That way you don't have to keep
looking up the code through the Web site.
| | 03:06 | So let's copy this code.
| | 03:10 | I usually keep a Word
document with my codes in it.
| | 03:13 | Type in Choosing and Using
Web Fonts, and paste the code.
| | 03:22 | And then I recommend saving this file
as Choosing and Using Web Fonts Typekit codes,
| | 03:31 | and I would put it in with my exercise files.
| | 03:36 | Back in Typekit, we can hit
Continue, and we're all set.
| | 03:40 | We can go and find some fonts.
| | Collapse this transcript |
| Adding a Venetian font (Calluna) to your kit| 00:00 | On the Browse Fonts page, you can
see all the fonts available to use.
| | 00:05 | If you click on one of these fonts,
such as Museo, you will see you could add
| | 00:10 | this font to your kit. That's
because it's included in the trial library.
| | 00:15 | If you try to add a font not available
in your plan, it would tell you here in
| | 00:20 | this corner what plan the font is
available in, and then this button would change
| | 00:24 | and give you the option to upgrade your plan.
| | 00:26 | We know what font we want to use,
so we don't have to browse for it,
| | 00:31 | we can search for it, and
we are looking for Calluna.
| | 00:36 | Here it is; this is the font we want
to use, and we can add it to our kit.
| | 00:41 | You can see up here that we have the
Choosing and Using Web Fonts kit activated.
| | 00:46 | If you had more than one kit, you'd be
able to move between them here, and if you
| | 00:51 | had a plan that is not the trial
plan, you'd be able to add a new kit.
| | 00:54 | But since we have the trial plan, if we
try to add a new kit, it will give us a
| | 00:59 | message that says with a trial
plan, you may only create one kit.
| | 01:04 | So let's add this font to our kit.
| | 01:08 | And this is what the kit looks like, and
we can see that Calluna is in the kit.
| | 01:13 | We can have up to two fonts in this kit, and
if we had two fonts, they'd both be listed here.
| | 01:18 | On the left, you can see the Weights &
Styles of Calluna that we can put in our kit.
| | 01:23 | Right now, Regular, Italic, Bold,
and Bold Italic are all selected.
| | 01:29 | The more weights and styles you have
selected, the bigger your kit will get.
| | 01:32 | If we look down here at the bottom, we
can see that our Kit Size is 112K, and
| | 01:38 | that we are in the
Choosing and Using Web Fonts kit.
| | 01:41 | Because each weight and style adds to
the size of the kit, don't select any
| | 01:46 | weight or style that you
do not expect to use.
| | 01:49 | So the file I'm going to have you work
with doesn't necessarily use a Bold Italic,
| | 01:54 | so let's turn off that option.
| | 01:56 | And then you can see our Kit
Size has gone down even further.
| | 02:01 | On a side note, Typekit
recommends keeping kits below 400K.
| | 02:06 | If a kit ever gets bigger than that,
they'll notify you, and recommend that you
| | 02:10 | reduce the kit size.
| | 02:11 | Now, above the Weights &
Styles is our Language Support.
| | 02:15 | I recommend using the Default.
| | 02:17 | Next, we need to publish the kit.
| | 02:19 | Changes won't take effect
until you click the Publish button.
| | 02:24 | Now Publish is a bit of a misnomer;
| | 02:27 | clicking Publish does not publish your page.
| | 02:30 | Clicking Publish basically makes your
type choices official, and tells Typekit,
| | 02:36 | my kit called Choosing and Using
Web Fonts contains these fonts.
| | 02:41 | If you ever come back to the kit and
change the fonts, you need to republish
| | 02:45 | your font choices, so
Typekit knows what is in the kit.
| | 02:48 | And now we're ready to add
the fonts to our Web site.
| | Collapse this transcript |
| Applying Calluna to your web site| 00:00 | Let's take a look at the page
we're going to add these fonts to.
| | 00:04 | This is the original site for the
course called georgia_site.html.
| | 00:10 | It's a site for a city
called Springfield, Rhode Island.
| | 00:13 | The site uses Georgia Regular for
the text, links, and some headings.
| | 00:18 | It uses Bold for other headings, and over
here on the side, it uses Italic for a quote.
| | 00:24 | So for now, these are the
weights and styles we're going to use.
| | 00:28 | We're going to change the
site, so it uses Calluna.
| | 00:31 | Open the original Georgia
site in your text editor.
| | 00:39 | I use TextWrangler, but you can
use any text editor you prefer.
| | 00:43 | If you're using Dreamweaver, I
recommend working in code view.
| | 00:47 | We'll start by re-saving the file.
| | 00:52 | Save it as calluna_tk_site.html.
| | 00:59 | You can save it in the original folder,
since we won't rewrite anything, and we
| | 01:05 | won't be touching the images or CSS
for the site, nothing will get rewritten.
| | 01:09 | But now let's take a look at the code.
| | 01:11 | Usually, I put all the CSS in a CSS
file, and then connect the HTML documents,
| | 01:18 | but for this course, I've put all the typography
related CSS into the head of the HTML document.
| | 01:24 | There is quite a bit there.
| | 01:26 | And after the CSS, you can
see that the HTML starts.
| | 01:30 | The rest of the CSS is contained in a
CSS document called springfield.css, and we
| | 01:36 | won't be making any changes to that file.
| | 01:39 | What we need to do is add Calluna
to this file, so the browser pulls in
| | 01:43 | Calluna, not Georgia.
| | 01:45 | So the first thing we need to do is
grab the JavaScript code from Typekit.
| | 01:49 | Now, I had put my kit editor away, and if
you ever do that, you can just click on the
| | 01:54 | screen button called Launch Kit Editor,
and go to Embed Code, and then you can
| | 01:58 | highlight and copy the code here.
| | 02:01 | We did also put this code into a Word
document, so if you wanted to, you could get
| | 02:05 | the code from there as well.
| | 02:07 | Now, back in the HTML document,
| | 02:10 | we put that code as the
first item in our head.
| | 02:13 | So I put it above the title, pasting
it in, and now I have a code that tells
| | 02:18 | Typekit to use fonts from that kit in
this file, but I haven't told it yet which
| | 02:25 | fonts I want to use.
| | 02:27 | You can see here in my universal
selector that the file is still using Georgia.
| | 02:31 | So now we need to go and get
the font family name for Calluna.
| | 02:37 | Click on the link called Using
fonts in CSS, and we can see that the
| | 02:41 | font-family is simply Calluna.
| | 02:43 | I highlight that, including the quotation
marks, and copy it, and paste it into my
| | 02:49 | CSS, including a comma, so
that I now have a font stack.
| | 02:54 | If for any reason Calluna doesn't work, the
site will use Georgia, or a default serif.
| | 02:59 | Now we need to set our bold and italic properly.
| | 03:02 | Let's go back over into Typekit,
scroll down to a link here called Using
| | 03:06 | Weights & Styles in CSS,
| | 03:08 | and we can see that the Regular
Calluna is 400, and the Bold is 700.
| | 03:14 | Now, these are default font weights,
so if you want to just keep your normal
| | 03:18 | fonts set to normal, that's fine.
| | 03:20 | The browser will look for the normal
weight version of the font, and will pull in
| | 03:24 | the closest weight, which is 400.
| | 03:26 | The 700 means Bold.
| | 03:28 | So if you just keep it set as Bold in
your CSS, the browser will look for the
| | 03:32 | Bold version of Calluna, and if it
doesn't find one, it will use the closest
| | 03:36 | thing, which is the 700 weight.
| | 03:38 | So you could theoretically keep them
set as Normal and Bold in your CSS, but
| | 03:43 | it's a good habit to use numerical
values when you're using Web fonts with
| | 03:47 | multiple weights and styles, because
some fonts, as we'll see in this course,
| | 03:51 | don't follow the 400, 700
rule for regular and bold.
| | 03:55 | So you should always check these
numbers, and use them in your CSS.
| | 03:58 | So back in the CSS, we're going to set
the universal selector to 400, and then
| | 04:03 | the places where we use bold are in the
h4, we'll change that to a 700, and then
| | 04:09 | the strong, we'll change
that to a 700, and that's it.
| | 04:13 | I'll save this, and then go over to the
browser and take a look at it. And I'll
| | 04:19 | reload, and it's still Georgia.
| | 04:22 | That's because Typekit can't interact
with your page and serve the fonts unless
| | 04:26 | your file is on a server.
| | 04:28 | So we need to put our file on
a server. I'm using Mozilla.
| | 04:31 | I like the drag and drop capabilities,
but you should use whatever FTP
| | 04:37 | application you prefer.
| | 04:39 | On the left is my server space, and
on the right is the exercise file.
| | 04:44 | We need to put our Calluna file over
into your server space, and we'll also need
| | 04:50 | the springfield.css file and
the images so it will work.
| | 04:56 | Then we need to go and view the page
from the server, and it's now in Calluna.
| | 05:02 | It's a very slight shift, but you can
tell -- I'll zoom in here -- you can see
| | 05:08 | how the crossbar on the e is now rising.
| | 05:12 | I'll zoom back out. So we have
Calluna working in our site.
| | 05:15 | You'll remember I had you name your file
with a tk in it; the tk stands for Typekit.
| | 05:22 | This is a habit I've gotten into,
because all the other fonts I use will load
| | 05:27 | when the files are on my Desktop, and I
used to freak out when I try to view a
| | 05:31 | site, and the fonts didn't work.
| | 05:33 | I had to remember to put my
files on my server.
| | 05:36 | So now when I'm creating a new
site, I'll often add the tk somewhere.
| | 05:41 | Usually I put it in the folder name, or
in a text file inside the folder, so the
| | 05:46 | people viewing the site don't see the tk,
but it helps me to remember to upload
| | 05:50 | my files to the server
in order to see the fonts.
| | Collapse this transcript |
| Troubleshooting Typekit fonts that don't load| 00:00 | Our Typekit font Calluna loaded great,
but sometimes your Typekit fonts don't
| | 00:06 | load when you expect them to, especially
when you go into your kit editor, make
| | 00:11 | a quick change, and republish the kit.
| | 00:13 | There can be a 15 second to 15 minute
lag time between when you publish a kit,
| | 00:19 | and when it's ready to work.
| | 00:21 | So usually it's just a matter of waiting
and refreshing your page until the fonts load,
| | 00:26 | but here are some things you can double
check while you wait, just to make sure
| | 00:29 | the problem isn't on your end.
| | 00:31 | First, we're going to make sure that
the JavaScript code is pasted as the first
| | 00:36 | item in the head of your document.
| | 00:38 | Second, and this is especially
important if you're using more than one kit,
| | 00:42 | we're going to make sure that we're using
the correct embed code in the correct file.
| | 00:48 | So here I can see qcm4xwt,
| | 00:56 | and it's qcm4xwt, so I am
using the correct embed code.
| | 01:03 | Third, we're going to make sure that the
kit that we're using specifies the same
| | 01:07 | domain as the one that we're working on.
| | 01:09 | Here in Kit Settings, I can see that
my kit is set to work on the domain
| | 01:16 | goodwebfonts.com, and
that's the domain I am using.
| | 01:19 | I once spent about ten minutes
losing my mind before I realized that I was
| | 01:23 | working on one domain, but had
accidentally specified a different domain on my
| | 01:27 | kit. I'm going to Cancel that.
| | 01:30 | The fourth thing you should double check
is that you really did publish this kit.
| | 01:34 | Now, there's no way to be sure that you
published it, but if you're not positive,
| | 01:38 | it doesn't hurt to click Publish again.
| | 01:40 | And then the last thing we're going to
do is we're going to make sure that we
| | 01:44 | truly used the correct font family.
| | 01:46 | This is Calluna, and in TextWrangler,
or your Text Editor, we can see the
| | 01:51 | font-family is Calluna, so
that is specified correctly.
| | 01:54 | Once you've checked all these things, and
you know everything is correct, all you
| | 01:59 | can do is wait for Typekit to catch up with you.
| | Collapse this transcript |
| Changing styling as necessary to improve the readability of the text| 00:00 | So we have Calluna working in our site.
| | 00:03 | We can see up here that it is on the
server, because we are using a Typekit font,
| | 00:08 | and it will only work on the server.
| | 00:10 | But I want to take a moment and
compare it to our original file,
| | 00:14 | and this is from the exercise folder
on the Desktop, because we don't have to
| | 00:19 | have this one on our server;
it's not using a Typekit font.
| | 00:22 | And you'll notice that the type in
Georgia looks a little bigger than the type
| | 00:26 | in the Calluna version, and that's
because, even though it's set at the exact
| | 00:30 | same size, Calluna has a smaller x-height,
so it's a little smaller and harder to read.
| | 00:36 | So we're going to go in and
change some of the sizing.
| | 00:40 | In the universal Selector, I'd
like you to change that to 16 and 23.
| | 00:43 | We'll save that, and then in order to
see changes, you will need to reload your
| | 00:50 | Calluna site onto your server, and we can
refresh this, and now it's a little bit
| | 01:00 | bigger. That's good,
| | 01:01 | but now the h2, which is the
headings for the columns of links down here --
| | 01:05 | Popular Searches, and What's Happening -- that
feels a little bit small compared to the links.
| | 01:11 | And the h4, which is the article and
event headings, they also feel a little bit
| | 01:16 | small in comparison to the text,
| | 01:19 | and they should have more presence on the page.
| | 01:21 | So we're going to go back into the text
editor, and we're going to bump those up by a pixel.
| | 01:25 | So our h2s, and our h4s, and let's go
ahead and save that, and Reload it.
| | 01:40 | Back in Firefox, refresh, and
now the headings look better.
| | 01:46 | They're stronger, which they need to be.
| | 01:49 | But the h4, the article and event
headings, now they feel a little bit too far
| | 01:54 | away from the text below them,
like they're slightly floating away.
| | 01:58 | Do you see that little bit of space there,
and again here under Library Used Book
| | 02:02 | Sale? The bottom margin on this heading
worked in Georgia, but it does not work
| | 02:06 | with Calluna, so we need to change that.
| | 02:09 | So I'll go back into the text editor
and on the h4, let's change our bottom
| | 02:13 | margin from a 4 to a 2. We'll Save
that, reload it, refresh it, Command+R
| | 02:24 | on Mac, and that looks good.
| | 02:27 | Now the h4 looks more like it
belongs with the text underneath it,
| | 02:32 | but there are just a couple of more changes.
| | 02:34 | The quote looks a little bit too small
to me compared to the rest of the text,
| | 02:38 | and the Calluna italic is a little bit
narrow, so it's a little hard to read.
| | 02:44 | So we're going to bump that up in size.
| | 02:47 | Let's do that to a 16 on 23, we'll save, we
upload it, refresh, and now it looks better.
| | 02:59 | And then last, but not least, the main
heading on the page, Springfield, Rhode
| | 03:05 | Island, could be a bit bigger, and it's
also feeling a little too tight between
| | 03:09 | the lines, especially right next to
the word space between Rhode and Island.
| | 03:15 | Rhode begins to feel more like it belongs
with Springfield instead of with Island.
| | 03:20 | So let's go back into the text editor,
and let's change this to a 32 on 36.
| | 03:26 | I'm going to save it
again, and refresh it again
| | 03:36 | after we've reloaded it up on to
our server, and that looks great.
| | 03:40 | Everything feels really well-balanced.
| | 03:43 | So what we've been doing here is
finding a good hierarchy and visual
| | 03:47 | organization to the page.
| | 03:49 | We've been making sure that headings
have strong enough hierarchy, and that
| | 03:53 | elements that belong
together are spaced appropriately.
| | 03:56 | Good hierarchy and visual chunking of
information can help readers scan your
| | 04:00 | Web pages more easily.
| | 04:02 | It helps them find what they're looking for.
| | 04:04 | If you're interested in learning more
about hierarchy and chunking information,
| | 04:08 | I go into it in much more depth
in Typography for Web Designers.
| | 04:13 | But for now, what I'd like you to
notice is that as soon as we changed the
| | 04:17 | font, we had to look at, and
sometimes fix other things in the typography;
| | 04:22 | mostly size and spacing.
| | Collapse this transcript |
| Working with more than four styles in Typekit| 00:00 | Now that we've fixed the size and spacing
on the text, this page looks pretty good.
| | 00:05 | We could leave it as it is and call it
done, but I'd like to take advantage of
| | 00:11 | the various weights and
styles available for Calluna.
| | 00:13 | So let's go back to Typekit.
| | 00:14 | We're going to launch the Kit Editor,
and I'd like to add the Light and Semi
| | 00:20 | Bold Italic to our kit.
| | 00:22 | We'll make sure that we Publish
it so that the changes take effect.
| | 00:27 | Now, notice that we have
five Weights & Styles selected.
| | 00:32 | This is going to cause problems with
Internet Explorer, which only recognizes
| | 00:37 | up to four Weights & Styles per font, but
Typekit has a workaround for this problem.
| | 00:43 | Scroll down and click on the Using
weights & styles in CSS, and we're going to
| | 00:49 | want to click on the variation-specific
font-family names here at the bottom.
| | 00:53 | And you can see that each weight and
style now has a specific font-family
| | 00:59 | name associated with it.
| | 01:01 | So let's look at calluna Regular, calluna-n4,
which stands for normal style, not
| | 01:06 | italic, and 4 is for 400.
| | 01:08 | I'm going to select that, and copy it,
and we're going to need to put these
| | 01:13 | variation-specific font-family
names into our CSS.
| | 01:17 | Back into our editor, the universal
selector, we can add calluna-n4, and then
| | 01:26 | keep the regular calluna, georgia,
serif, with a font-weight of 400.
| | 01:30 | Now, we're going to have to use this
anytime we make a change, including using
| | 01:36 | italics, bolds, or the light version.
| | 01:39 | So let's go ahead and select this
whole line, I'm going to copy it,
| | 01:42 | and in the h1, I would like to use the
light version; make it a little bit lighter.
| | 01:49 | So I add the font-family, and now I'll
call it n3, normal style, 300 weight, and
| | 01:55 | then I also have to add a
line called font-weight:
| | 01:57 | 300, so that the h1 will
come in at the 300 weight.
| | 02:03 | We also need to add a variation-specific
font-family name any time we use the italic.
| | 02:11 | And we'll change calluna-n4 to i4 for italic in
the tagline, and in the em, and in the quote.
| | 02:26 | Now let's go back and make
sure we do the same for our bolds.
| | 02:29 | Our h4 uses a 700 weight,
so I'll change that to n7.
| | 02:35 | And the same is true with our
strong; uses an n7, 700 weight.
| | 02:43 | So that should be good, and let's
save this, and re-upload it to the server,
| | 02:51 | and let's reload that. Nice!
| | 02:55 | So we can see that the main heading is
now a little bit lighter, which is good.
| | 03:00 | Even when you're using a regular
weight font, when it gets this big, it can
| | 03:04 | sometimes feel a little bit bold.
| | 03:06 | We can particularly see that over here
where it says Save the Date, how Save
| | 03:11 | the Date feels like it's a little
bold, even though it's not, and that's
| | 03:15 | because it's so large.
| | 03:16 | In fact, I'm thinking we should go in
and make the Save the Date and Around Town
| | 03:21 | headings also in the 300 weight.
| | 03:23 | And the other thing I'd like to do is
we haven't used the Semi Bold Italic yet,
| | 03:29 | and I'd like to use that here in this
sentence for the Bay Road businesses.
| | 03:33 | We could just use a regular bold italic,
but I think it would be a little too
| | 03:38 | heavy, and since we have the
Semi Bold, we might as well use it.
| | 03:42 | So let's go back into our TextWrangler,
and for our h3, that is our Save the Date
| | 03:48 | heading, let's make that and
an n3, so it's a 300 weight.
| | 03:53 | And then we have to add the font-weight:
| | 03:55 | 300, and then down in the strong,
where we're currently using a bold weight
| | 04:03 | to set the sentence about the Bay Road
businesses, let's turn that into an Italic Semi Bold.
| | 04:12 | We'll change the font-weight to
600 and the font-style to italic.
| | 04:18 | I'm going to save this, and then I'm
just going to double-check that 600 is the
| | 04:23 | correct weight for that semi bold,
because different fonts use different
| | 04:28 | numbers for semi bold.
| | 04:31 | Semi Bold Italic is 600, so it's perfect.
| | 04:36 | Go back into TextWrangler, double
check that I've used an italic 600 for Semi
| | 04:41 | Bold Italic, and I have. I can save this.
| | 04:45 | I'm going to drag my Calluna page
back over to my server, and let's reload
| | 04:54 | that, and there we go.
| | 04:57 | So the Save the Date is
now a little bit less bold.
| | 05:00 | It looks more like the
regular size; that's nice.
| | 05:03 | We can see here the sentence about the
Bay Road businesses being opened during
| | 05:07 | construction is slightly
bolder than the text, and its italic.
| | 05:11 | So everything looks good, and
since we used the variation-specific
| | 05:14 | font-families, the light headings and
the Semi Bold Italic sentence will show
| | 05:19 | up on Internet Explorer.
| | Collapse this transcript |
| Looking at how using a Venetian font affects the look and feel of a web page| 00:00 | Now that we've finished the Calluna
site, let's take a look at how using
| | 00:04 | Calluna, a Venetian font,
affects the look and feel of the site.
| | 00:08 | We'll start by comparing
Calluna to Times New Roman.
| | 00:13 | Now, you don't have a Times New Roman
version of this site; it's one I made just
| | 00:17 | for comparison purposes.
| | 00:19 | And if you just sort of relax your eyes,
don't look at the detail, but look at
| | 00:24 | the overall texture of the page,
Calluna on our left looks more open and round.
| | 00:29 | Times New Roman on the
right looks a little bit darker.
| | 00:33 | That's because the Times New Roman
letters are a little narrower, so the words
| | 00:38 | feel a little more squished together.
| | 00:40 | You'll also see a difference in the numbers;
| | 00:42 | Times New Roman uses lining figures.
| | 00:45 | If you look at the article about the
new restaurant, and you look at the phone
| | 00:49 | number, you'll see that all the
numbers look like they're uppercase.
| | 00:52 | They sort of stand out from the text,
versus over here in the Calluna, where
| | 00:58 | the numbers are what we call old style; that
is, the numbers have ascenders and descenders.
| | 01:04 | They fit in better with the text,
and they feel a bit more elegant.
| | 01:06 | Now, Times New Roman doesn't have a
Semi Bold Italic, so the sentence about the
| | 01:12 | Bay Road businesses is a little bit
darker, a little heavier, and it begins to
| | 01:17 | compete with the heading for that article.
| | 01:21 | Over here in Calluna, that Semi Bold
Italic stands out from the text, but it
| | 01:27 | isn't as strong as the heading.
| | 01:28 | Now, the main heading, Springfield,
Rhode Island, is also a bit heavier in the
| | 01:33 | Times New Roman, because Times New
Roman doesn't have a light weight.
| | 01:38 | Over here in the Calluna, that main
heading, it's lighter, it's delicate, and
| | 01:42 | again, it's a bit more elegant.
| | 01:44 | Now we're going to look at a small detail,
and that's the comma in the main heading.
| | 01:49 | The comma in the Times
New Roman is a bit bubbly.
| | 01:53 | It's very round before
it goes down into the tail.
| | 01:56 | You can see here in the Calluna, it has
a more calligraphic feeling that works
| | 02:02 | with the text itself.
| | 02:03 | Now, a comma is not something you
really need to pay attention to as much in
| | 02:07 | text, but when you're using one in a
main heading, it's good to take a look at
| | 02:11 | how it works with the text.
| | 02:12 | I'll zoom back out and now
let's compare Calluna to Georgia.
| | 02:17 | Now, Georgia is not a Venetian font,
but it feels more like the Calluna version
| | 02:22 | than the Times New Roman did, because
Georgia has the old style figures for the
| | 02:27 | numbers, and it also has a slightly rounder
and lighter look than Times New Roman did.
| | 02:33 | But again, Georgia does not have
the variety of weights Calluna has.
| | 02:38 | So we lose the light calligraphic
feeling up in the main heading, but other than
| | 02:42 | that, it still feels pretty elegant.
| | 02:44 | We have a nice italic, and the serifs,
which relate back to what we've seen
| | 02:49 | here in the Calluna.
| | 02:50 | Of the three versions, I prefer Calluna.
| | 02:53 | I enjoy having the extra weights
to work with, but I wouldn't use it.
| | 02:56 | Calluna is a beautiful font, but as we
saw in the video, choosing a Venetian
| | 03:01 | font, it doesn't hold up cross-browser.
| | 03:03 | This is not a problem with Calluna.
| | 03:06 | None of the Venetian
fonts hold up cross-browser.
| | 03:08 | They all lose that crossbar on the
E, making the text harder to read.
| | 03:14 | So how fonts render cross-browser has
to be an important part of our decision
| | 03:18 | making as Web designers, no matter
how much we like using a certain font.
| | 03:23 | So until there are some developments
made in how browsers render Web fonts, if I
| | 03:28 | had to choose, I would still choose Georgia.
| | Collapse this transcript |
|
|
3. Old Style FontsIdentifying an Old Style font| 00:00 | From 1530 to 1750, printers all over
Europe and in the colonies created fonts we
| | 00:07 | call old style fonts.
| | 00:09 | Old style fonts continued to
reference the human hand behind the letters.
| | 00:14 | That is, they continued to have characteristics
related to letters written with pen and ink,
| | 00:19 | but the type designers also embraced
the materials of printing technology.
| | 00:23 | They moved further away from the
calligraphic forms we saw in Venetian
| | 00:27 | fonts, like Jenson.
| | 00:29 | They were inspired by what they
could do with metal. Letters became
| | 00:32 | crisper; more refined.
| | 00:34 | If we were to look at fonts from
France, Italy, Holland, and England, we'd
| | 00:39 | see each region had their own idiosyncratic
forms influenced by aesthetics as
| | 00:44 | much as technology.
| | 00:45 | There is a range of what old style
fonts look like, and unfortunately, I can't
| | 00:50 | show you all of them.
| | 00:51 | Today, we're going to look at three
different old style fonts, starting with the
| | 00:55 | work of William Caslon, an English type
designer who was influenced by Dutch type design.
| | 01:01 | This is a portion of a specimen
sheet printed by Caslon in 1728.
| | 01:07 | If we look closely at the letters, we can see
some of the characteristics of an old style font.
| | 01:12 | First, while the stress is a little less
angled, the bowls still look pen formed.
| | 01:18 | You can see that clearly in the
lowercase e, b, p, q, and the d. But Caslon's
| | 01:24 | lowercase o has a more vertical
stress compared to the other bowls.
| | 01:29 | The stress isn't consistent
across bowls showing a departure from
| | 01:33 | pen-formed letters.
| | 01:35 | The aperture on the e is much smaller
than on a Venetian font, because the
| | 01:39 | crossbar is now horizontal.
| | 01:41 | But the aperture remains fairly open, partially
because the closed counter on the e is so small.
| | 01:47 | Small closed counters on the a and e
is characteristic of old style fonts.
| | 01:53 | Old style fonts usually
have pen-formed terminals.
| | 01:56 | That is, they looked like the
shape a pen would make on the paper.
| | 02:00 | The head serifs looked pen-formed too.
| | 02:02 | Head serifs have a wedge shape, and both
the head and foot serifs flow into the stem.
| | 02:07 | The thin strokes here on Caslon are quite
a bit thinner than what we saw in Jenson.
| | 02:12 | The letters feel less inky.
| | 02:14 | Most old style letters have a thicker
thin stroke than what we see here.
| | 02:18 | That's probably because Caslon's work
comes towards the end of the time we
| | 02:22 | associate with old style fonts.
| | 02:24 | He was probably influenced by some of
the work we'll see being done by the
| | 02:27 | transitional font designers in the next chapter.
| | 02:29 | Yet if you look very closely at the
closed counter form of the e, you can see
| | 02:34 | there's a round edge here at the
right side almost like the ink caught and
| | 02:39 | pooled a little on this corner instead
of creating a crisp corner between the
| | 02:44 | bowl and the crossbar.
| | 02:45 | Notice William Caslon's font
comes with an italic version.
| | 02:49 | Nicolas Jenson's font did not.
| | 02:51 | Early fonts did not have
a bold or italic version.
| | 02:54 | In fact, the first italic font wasn't
even developed until 1506, 35 years after
| | 03:01 | the example of Jenson's work
I showed in the last chapter.
| | 03:04 | The first italic font was
developed for Aldus Manutius, who published
| | 03:09 | affordable books for students.
| | 03:11 | With an italic font, he could fit
more words on each page, and save money
| | 03:15 | on production costs.
| | 03:16 | Once italics started being produced,
if a printer wanted to created emphasis
| | 03:20 | with an italic, they'd use a separate italic
font that worked well with their Roman font.
| | 03:25 | But by the time Caslon was working in
the 1720s, it was not unusual for a font to
| | 03:30 | include in italic version, though old
style fonts did not have a bold weight.
| | 03:35 | As with Jenson, Adobe has a
revival font called Adobe Caslon Pro.
| | 03:40 | It was designed by Carol Twombly in 1990.
| | 03:43 | She studied William Caslon's specimen
sheets during the design process, but made
| | 03:47 | some subtle changes that impacted
the overall feeling of the font.
| | 03:52 | In fact, while Caslon's original
font is considered an old style font;
| | 03:56 | many typographers today considered
the digital version a transitional font.
| | 04:01 | And let's look at the digital version of Caslon.
| | 04:03 | You can see the stress remained angled, but
the inky shape in the e has been cleaned up.
| | 04:09 | As for the serifs, they're more stylized.
| | 04:11 | The head serif of the d still flows
into the stem, but it's lost the concave
| | 04:16 | shape along the top edge, and the
foot serifs are crisper and thinner.
| | 04:20 | But Adobe Caslon Pro didn't
completely leave the old style category.
| | 04:25 | You can see the spurs on the u and d
still feel like they were made by a pen
| | 04:29 | being picked up at the end of the stroke.
| | 04:31 | These angular spurs are an
old style characteristic.
| | 04:35 | Now let's look at Minion, which
is another Adobe old style font.
| | 04:39 | It was designed by Robert
Slimbach and released in 1990.
| | 04:43 | Here you can see a more traditional
older approach to old style fonts.
| | 04:47 | Minion looks more pen-formed
than either of the Caslons.
| | 04:51 | The terminal on the a, the way it
ribbons into the rest of the letter, the thick
| | 04:55 | stroke on the bowl of the a;
it just looks more pen formed.
| | 04:59 | Even the e has a bit more ribboning to it.
| | 05:01 | It almost creates a corner
along the bottom of the bowl.
| | 05:04 | The stress remains angled, and even
the O has a bit more angle to it.
| | 05:09 | Minions head serifs are slightly concave
along the top, where Adobe Caslon Pro's are not.
| | 05:15 | And Minion's foot serifs on the n are a
bit thicker, and flow into the stem more.
| | 05:20 | The last old style font we're
going to look at is Crimson Text.
| | 05:24 | Crimson Text is a contemporary old
style font designed by Sebastian Kosch, and
| | 05:29 | published under the terms
of SIL's open font license.
| | 05:32 | Crimson Text has the usual old style
features, like an angled stress, and serifs
| | 05:38 | that flow into the stem.
| | 05:39 | Of course, Crimson Text has
its own unique qualities too.
| | 05:43 | The head serifs on the l, b,
and d feel more pen-formed.
| | 05:48 | It feels like there's a slight blob of
ink right at the top of the serif, and the
| | 05:52 | shoulders, which is where the curved
stroke meets the stem in letters like m, n
| | 05:57 | and u, are thicker than in the other fonts.
| | 06:00 | This gives Crimson a
slightly varied texture on the page.
| | 06:05 | The counter form in the e is larger, and
this makes the aperture a bit smaller.
| | 06:09 | Finally, sometimes it helps to see what
something is by looking at what it's not.
| | 06:14 | Let's take a look back at the Adobe
Jenson font, which is a Venetian font.
| | 06:18 | Compared to Jenson, you can really
see how old style fonts have become
| | 06:22 | crisper and more stylized.
| | Collapse this transcript |
| Choosing an Old Style font| 00:00 | So now that we know what an old style
font looks like, we need to pick one to use.
| | 00:06 | I'm interested in using something that
feels old and pen-formed, like Minion.
| | 00:11 | Minion is beautiful font.
| | 00:13 | It has a consistent texture, it's not
too loose, and while it's a bit tighter
| | 00:17 | than I usually prefer, it's not too tight.
| | 00:20 | The only drawback I see is the x-height
is a bit small, as are the closed
| | 00:26 | counters on the e and the a. So I have to set
this font a little bit bigger to be legible.
| | 00:34 | Set it 17 on 23 here on this page.
| | 00:38 | This could cause a problem with the fallback
font, but it's not a deal-breaker for me.
| | 00:43 | I tested Minion cross-browser,
and it performs beautifully.
| | 00:47 | It's available through Typekit's
Personal plan and higher, so we probably won't
| | 00:51 | use it in this course, but
you should know it's out there.
| | 00:55 | Next, let's look at Sirba Web.
| | 00:58 | This one is also available through
Typekits Personal plan, so we probably won't
| | 01:02 | use it, but if you have access to it,
you might want to give it a try.
| | 01:06 | I've tested it cross-browser,
and it holds up beautifully.
| | 01:10 | The letter spacing, again, is a bit tighter
than I usually prefer, but it's not too tight.
| | 01:15 | The text is still comfortable to read.
| | 01:17 | Sirba has a larger has a larger x-height
than Minion, which makes it a little
| | 01:21 | more readable on the Web.
| | 01:22 | It also has a darker,
inkier quality that I enjoy.
| | 01:25 | Looking at the title, you can really
see the ribboning in the letter b. The
| | 01:30 | organic shapes of both the head and
foot serifs almost looked Venetian.
| | 01:37 | Next is Crimson Text.
| | 01:38 | We looked at Crimson Text in the last video.
| | 01:42 | Like Minion, Crimson Text has a small
x-height, and a small closed counter on the
| | 01:47 | a, so it needs to be set larger than
I personally feel comfortable with.
| | 01:52 | If the font doesn't load, the
fallback font will look quite large.
| | 01:56 | I'm also not a fan of
Crimson's bold italic.
| | 02:00 | It looks a little dark and narrow to me,
but this isn't a problem if we don't
| | 02:05 | need to use a bold italic.
| | 02:06 | I've tested Crimson Text cross-browser,
and it holds up fairly well
| | 02:11 | and remains legible.
| | 02:12 | It has a slightly looser
letter spacing which helps,
| | 02:16 | but it does have some problems related to
hinting, which bother me as a typographer.
| | 02:21 | Crimson Text, when set at 20 pixels,
| | 02:24 | gets these little dots at the tops of
the letters, and at 18 pixels, the X gets
| | 02:31 | larger, so it's now
runs above the main line.
| | 02:33 | At 15 pixels, it gets a little bit
lighter, with these little sorts of blobs of
| | 02:39 | dark strokes in the text.
| | 02:41 | Now, all of these sizes remain
legible, there're just slight problems,
| | 02:46 | and also, this doesn't have to be a
deal breaker if we avoid certain sizes
| | 02:50 | when using Crimson Text.
| | 02:52 | In fact, the font is actually quite
pleasing if you use it at 19 pixels, and 17
| | 02:57 | pixels; there are no problems
at those sizes.
| | 03:00 | In addition, Crimson Text is available
on Google Web Fonts, which means we
| | 03:05 | all have access to it,
| | 03:07 | so that makes this a strong
candidate for this course.
| | 03:09 | But I did want to show you a
couple of other fonts as well.
| | 03:14 | Another font I looked at had a
couple of overly unique letters in it,
| | 03:18 | so I wouldn't use this one.
| | 03:19 | The stress on the o, b, d, and
other bowls is just far too angled.
| | 03:25 | In fact, the O in the title feels like
it's tipping over to me here, and then
| | 03:30 | also here in the capital O. Also, I'm
not a fan of the lowercase a. The terminal
| | 03:36 | is a bit too pointy, and the stroke going
down to the terminal is parallel to the
| | 03:41 | stroke in the closed counter.
| | 03:44 | We can see that here;
those parallel strokes.
| | 03:47 | It creates a form that sort of jumps
out at me when I'm reading the text.
| | 03:51 | Finally, another font I
looked was just too dark.
| | 03:54 | I wanted to take a closer look at
this font, because I like the inky,
| | 03:58 | old pen-formed quality.
| | 04:00 | It reminds me of Sirba, but the strokes
are just a little too heavy, the letter
| | 04:04 | spacing is just a little too tight,
| | 04:06 | so it's harder to read, and I always try
to use fonts that are easy on the eye.
| | 04:11 | I want to create the most
pleasing reading experience possible.
| | 04:15 | So looking over all these fonts, we're going to
use Crimson Text for the rest of the chapter.
| | 04:20 | It has some minor problems cross-browser,
but none of that interferes with readability,
| | 04:25 | and since it's available via Google
Web Fonts, we all have access to it.
| | Collapse this transcript |
| Applying Crimson Text to a web site using Google web fonts| 00:00 | Now that we've picked an old style
font, it's time to apply it to our Web page.
| | 00:05 | Start by opening the original_city_site
file georgia_site.html in your
| | 00:11 | preferred text editor.
| | 00:13 | We're going to save this file as
crimson_site.html, and you can save it in the
| | 00:20 | same folder, because we
won't be overwriting anything.
| | 00:24 | Now we have crimson_site.html.
| | 00:26 | Now, I like to be able to see the files
that I have open in my text editor,
| | 00:31 | so I'm just going to go ahead and do
that, because what I'd like to do is load
| | 00:36 | your HTML document into your
browser, and take a look at it.
| | 00:39 | Right now, even though it's the crimson_
site.html, it is still showing up in Georgia.
| | 00:44 | So what we need to do is go to Google.
| | 00:46 | We're going to use the Google Web Font
here, and we can see there are hundreds of
| | 00:51 | fonts to choose from,
| | 00:52 | but we know which one we want;
we want Crimson.
| | 00:55 | We can see that it has six fonts
and styles, including a semi bold, and a
| | 01:00 | semi bold italic, which is very nice,
because I didn't care for the bold italic
| | 01:04 | when we first looked at this font.
| | 01:06 | So I am going to click on this again to
just close it up and then we're going to
| | 01:11 | Quick-use this font, so click on Quick-use,
and we can choose what styles and
| | 01:14 | weights of the fonts we want to use.
| | 01:17 | We need normal, and normal italic,
and let's try the semi-bold italic for
| | 01:21 | the sentence about the Bay Road businesses,
and then let's try the bold for our headings.
| | 01:26 | And those are the weights and
styles we want to use in the font.
| | 01:29 | Now, if you look over here, you can see
that the page load is in the red zone.
| | 01:34 | That means this is a
pretty memory intensive font.
| | 01:36 | If we go and turn off one of our weights
or styles, we can see over here that it
| | 01:41 | is still in the red zone.
| | 01:42 | So we need to keep an eye on this.
| | 01:44 | If the font loads too slowly in our page,
we might want to go back and choose a
| | 01:48 | different font, but I think we'll be
okay with only one memory intensive font.
| | 01:52 | We just would not want to pick two
or three to put on the same page.
| | 01:56 | If you scroll down, you can see that
Google Web Fonts gives us some syntax to use
| | 02:01 | so that the fonts will work.
| | 02:03 | I've selected it, and I'm using Command+C
to copy, and let's go back into our text
| | 02:08 | editor here, and we need to put that
code into our document, and again, it should
| | 02:15 | be the first item in the
head of your HTML document.
| | 02:19 | Go ahead and save this.
| | 02:21 | Now we're telling the browser that it
should go to Google Web Fonts and get this
| | 02:25 | font for us, but we haven't told
it yet to actually use the font.
| | 02:30 | We're still using Georgia down here.
| | 02:31 | So let's go back to Google Web Fonts,
scroll down a little bit further, and we
| | 02:35 | can get the font family name here.
| | 02:37 | Crimson Text, and I also grab the
comma, I'm copying it, and back into the
| | 02:43 | text editor with the font family.
| | 02:45 | So now the universal selector has been
changed so that the font used in this
| | 02:50 | page will be Crimson Text, and if it
doesn't work, then Georgia will load.
| | 02:55 | Go ahead and save this again.
| | 02:56 | We can go back into our browser.
| | 02:58 | We can go to our tab here for this
page, and we can reload it, and it works.
| | 03:05 | Everything is set in Crimson.
| | 03:07 | That was easy!
| | Collapse this transcript |
| Changing styling as necessary to improve the readability of the text| 00:00 | Now that our site is using Crimson Text
it looks pretty good, but the text is a
| | 00:06 | bit small; a bit hard to read.
| | 00:08 | That's because Crimson Text has
a smaller x-height than Georgia.
| | 00:11 | Also, we chose a semi-italic bold to
use for the sentence about Bay Road
| | 00:16 | businesses remaining open, but it's
still set as plain bold in the HTML.
| | 00:21 | Let's change these things.
| | 00:22 | Using the HTML file from the last lesson,
we'll start by increasing the type size.
| | 00:27 | In our CSS, let's change the universal
selector to 16 pixels, and a 23 pixel line height.
| | 00:35 | Save this, and reload it in the browser.
| | 00:38 | That looks pretty good, but it's still
too small, and the lines of text feel a
| | 00:43 | little bit too far apart.
| | 00:44 | So back in the CSS, let's change our font size
to 17 pixels, and keep the line height at 23.
| | 00:51 | We'll save this, and refresh in the browser.
| | 00:54 | I'm using Command+R to
refresh. That looks better.
| | 00:57 | Now, you may have noticed in an earlier
video when we were choosing an old style
| | 01:02 | font that Crimson was at 19 pixels,
and it was a comfortable reading size.
| | 01:07 | Here we're using it at 17 pixels, and
it's also a comfortable reading size.
| | 01:12 | So how can the same font feel
right at two different sizes?
| | 01:15 | Well short, easy to read blurbs of
texts with shorter line links, like the text
| | 01:20 | on this site, can be set a little
smaller and still be easy to read.
| | 01:23 | You'll find that more theoretical or
instructional text with a longer line
| | 01:27 | length needs to be set a little bit larger.
| | 01:29 | So we've got our text type size set, but
now everything else looks a little bit weak.
| | 01:34 | The article and event headings are a
little too small, and so is the quote in
| | 01:38 | the right-hand column.
| | 01:39 | Let's go in and bump everything up
by two pixels and see what happens.
| | 01:43 | So back in our editor,
we'll make our h1 32 and 34.
| | 01:46 | We'll make our welcome to 16.
| | 01:50 | The h2, we'll change to 19 and 19.
| | 01:55 | The h3, we'll change to 26 and 26.
| | 02:00 | The h4, we'll change to 18 and 18.
| | 02:08 | The quote, we'll change to 17 and 24.
| | 02:13 | And the acronym -- that's the AMs and
PM's within the text -- we will change to 15.
| | 02:18 | Go ahead and save this, and
refresh it in the browser,
| | 02:23 | and that looks a lot better.
| | 02:25 | I'm still not crazy about the
article and event headings, though.
| | 02:28 | They're a little too far from
the text that they belong to.
| | 02:31 | You can see the space there,
and then there.
| | 02:33 | And in fact, the heading Library Used
Book Sale looks like it belongs more with
| | 02:38 | Save the Date than it does with the
date and time information underneath it.
| | 02:42 | So in the CSS, let's find our h4,
and change that margin to 2 pixels.
| | 02:47 | I think we're also going to change it to
a 19 and 19 size and line height, so it
| | 02:53 | can be a little bit bigger,
and then try refreshing it.
| | 02:56 | Well, the headings definitely feel more
like headings, but I think they're still
| | 03:00 | a little bit too far away from their texts.
| | 03:03 | So let's go back into the CSS, and let's
change that margin even smaller, bottom
| | 03:09 | margin to 1 pixel, I'll save this,
and refresh it, and that's looking better,
| | 03:14 | but I wish that the Library Used Book Sale
was a little bit further from Save the Date.
| | 03:19 | So let's go and change that.
| | 03:20 | The h3, right now it's got an 8
pixel margin bottom, and we're going to
| | 03:25 | change that to 12 pixels.
| | 03:26 | I saved, and now refreshing
it, and that looks better.
| | 03:31 | The Library Used Book Sale now looks
like it belongs a little bit more with the
| | 03:36 | date and time information after it
instead of with the heading above it.
| | 03:39 | I'm still not crazy about the h4, but
let's move on to some other areas of the page,
| | 03:44 | and as I fix other things, we might
be able to figure out how to fix the
| | 03:49 | article and event titles.
| | 03:50 | So first of all, let's try getting rid
of the bold for the sentence about the
| | 03:54 | Bay Road businesses.
| | 03:56 | I'm using the strong to set that sentence,
and right now it's using just bold, and
| | 04:01 | I want to use a semi-bold italic here.
| | 04:03 | I think we would use a font weight of
600, and a font style of italic, but I do
| | 04:09 | want to go back into Google
Web Fonts and make sure that
| | 04:13 | that is how they set it.
| | 04:17 | Yes, semi-bold italic is 600. Excellent.
| | 04:22 | I can see here, we've done it a 600 italic,
save this, and let's refresh that in our browser.
| | 04:30 | Excellent; it worked.
| | 04:31 | There we go. Bay Road
businesses are open during construction.
| | 04:34 | Now, one other thing I'm starting to notice
about Crimson Text is how narrow its italics are.
| | 04:40 | The italics feel a little smaller
than the Roman text, and they're also a
| | 04:44 | little harder to read.
| | 04:45 | It might not be a problem for this
single sentence here about the Bay Road
| | 04:49 | businesses, since most people only need
to read the first four words anyway,
| | 04:54 | but over here, the quote feels quite
small, and it's tight, and I usually like to
| | 04:59 | think of quotes as being
meaningful and inspirational,
| | 05:02 | so I'd like it to be a bit
bigger and to have more presence.
| | 05:05 | So let's go in and bump that up a bit.
| | 05:08 | Let's change this so it's on 18 pixels,
and we will keep the line height; that
| | 05:12 | should work. Saved it.
| | 05:13 | Okay, that's a little bit better.
| | 05:17 | I'd still like to do something about
those articles and event headings though.
| | 05:21 | The bold just feels too heavy for my taste.
| | 05:24 | It occurs to me that the old style
fonts didn't have bold weights, and I'm
| | 05:28 | looking at this old, elegant font, and
I'm wondering if maybe I should create a
| | 05:33 | heading more in line with how headings
would have used to have looked back when
| | 05:37 | old style fonts were originally used.
| | 05:39 | So an old style font would often have
been set in all caps with a little extra
| | 05:44 | letter spacing, and that would help them
look refined and elegant. So let's try that.
| | 05:49 | So with the h4, let's get rid of the
bold, and do a text transform to uppercase,
| | 06:01 | and add some letter spacing.
| | 06:04 | Just one pixel, save that,
and let's see how it looks.
| | 06:08 | Well, it definitely feels more elegant, but
there are some problems doing it this way.
| | 06:13 | For instance, over here with the Library
Used Book Sale, it's now on two lines, as
| | 06:18 | is the Raynor Pond Clean Up.
| | 06:20 | So this isn't going to work for us.
| | 06:23 | One thing we could try is maybe getting rid
of the letter spacing and see if that works.
| | 06:27 | Let's go back into the editor and
refresh, and that didn't really help.
| | 06:35 | It looks a little bit darker, which
would be good, but it didn't solve the
| | 06:39 | problem with the Library Used Book
Sale, or with the Raynor Pond Clean Up,
| | 06:43 | so I don't think using all
caps is going to work for us.
| | 06:46 | So the next thing I'm wondering is
maybe instead of using all caps, we can go
| | 06:52 | back, choose regular case, but try
using the semi-bold instead of the bold, and
| | 06:56 | that might be more in line with the
sort of old style, traditional, elegant look.
| | 07:01 | So back in the text editor, I'm going
to go ahead and get rid of the uppercase,
| | 07:05 | and I want to use a font weight 600, so
that will be the semi-bold, but then, I
| | 07:11 | also need to go back into my browser
to Google Web Fonts, because we didn't
| | 07:17 | choose semi-bold to begin with.
| | 07:19 | So let's select semi-bold, and turn off
the bold, because this is such a memory
| | 07:24 | intensive font, and really for any Web
fonts, only choose the weights and styles
| | 07:29 | you know you're going to use.
| | 07:30 | Then we will have to go down and
reselect, and recopy this code, because it will
| | 07:35 | have changed since we've changed what
weights and styles we're going to use.
| | 07:40 | Back in the text editor up at the top
let's replace that code, and save it, and
| | 07:47 | refresh, and that's working better.
| | 07:51 | It's not quite as heavy using the
semi-bold instead of the bold for the event
| | 07:56 | and article headings, but now I'm no
longer thrilled about the amount of space
| | 08:01 | underneath the headings.
| | 08:02 | When we used the bold that, they felt
too far away from the text, and using the
| | 08:06 | semi-bold, they look a
little too close to the text.
| | 08:09 | There must be a built-in vertical
spacing that's a little bit different from one
| | 08:14 | weight to the other.
| | 08:16 | So we're going to have to
go back in and fix that.
| | 08:19 | Down in the h4, let's set our margin
bottom back to 2 pixels, and let's save this,
| | 08:27 | and refresh it, and that's better.
| | 08:30 | There's a little bit more space there.
| | 08:32 | I think that we've got it.
| | 08:33 | Well actually, no.
| | 08:34 | I'm also noticing now that there's that extra
space after Save the Date, which I had
| | 08:39 | also added when we were using the bold.
| | 08:42 | We should take some of that out.
| | 08:44 | It was at 12 pixels; we
changed that to 12 pixels.
| | 08:47 | Let's bring that back down to, say,
10, or even 9 pixels. There we go.
| | 08:55 | That's better.
| | 08:55 | Now it's not quite so far away.
| | 08:57 | I do think we've got it.
| | 08:58 | It looks pretty good.
| | 08:59 | So make sure you keep this
file for the next lesson.
| | 09:02 | We had to do a lot more noodling with
the Crimson Text version of this page.
| | 09:07 | Every font is different, not just in
terms of how the letters look, but also in
| | 09:11 | terms of how heavy their bold weight is,
how narrow their italic, and even how
| | 09:16 | spacious the font feels, both
horizontally and vertically.
| | Collapse this transcript |
| Making various weights and styles work correctly across different browsers| 00:00 | Looking at the refined Crimson Text
version of our Web page, it looks like we're
| | 00:05 | done, but we're not.
| | 00:06 | What you can't tell by looking at my
screen, because I'm on a Mac using Firefox,
| | 00:11 | is that the way Google Web Fonts
tells you to use their system doesn't work
| | 00:16 | correctly on Internet Explorer 7 or 8.
| | 00:19 | Take a look at this screenshot of
the same page, viewed on Windows 7,
| | 00:24 | Internet Explorer 8.
| | 00:26 | Look at the italics in the quote
about libraries. They are fake.
| | 00:30 | If you're new to looking at fonts, you
may not realize they are fake, but the A
| | 00:35 | and E give it away immediately.
| | 00:37 | Most true italics have a single-decker A,
not the double-decker one like we can
| | 00:42 | see here, and Crimson Text
E is softer and rounder.
| | 00:48 | The fake italics has neither
of these things.
| | 00:51 | It uses the regular version of
the text, and just slants it over.
| | 00:55 | You can also see the
difference in the Y and F very clearly.
| | 01:00 | Let's toggle back to our Web page.
| | 01:02 | There is the F with the tail, and the Y
with the curved stroke, and the fake italic
| | 01:08 | has neither of these things.
| | 01:10 | There are two reasons why fake
italics aren't good; one is aesthetic.
| | 01:15 | If we just spent ten minutes getting
the italics to look good, it's frustrating
| | 01:20 | that people using Internet
Explorer 7 and 8 can't see them.
| | 01:24 | The second reason, and perhaps
more importantly, is legibility.
| | 01:28 | Now, it doesn't matter quite as much
with Crimson, because quite frankly,
| | 01:32 | Crimson's italics are pretty narrow,
and not that easy as italics to read.
| | 01:35 | But later, as we move out of the older
style fonts, and into more contemporary
| | 01:41 | fonts, you'll see some italics are
actually quite open, and very easy to read.
| | 01:45 | When those italics convert to the
fake italic, legibility is compromised.
| | 01:50 | The change in the italics is more immediately
recognizable, but the bold is fake too.
| | 01:55 | Internet Explorer just makes the font
look bold by slightly stretching the
| | 02:00 | vertical strokes, so they are a bit lighter.
| | 02:02 | The semi-bold italic sentence about
the Bay Road businesses has both a fake
| | 02:07 | bold and a fake italic.
| | 02:09 | It has been both stretched and slanted,
and the results are not delightful.
| | 02:14 | So why does this happen?
| | 02:16 | We'll open the file from the last
lesson, and let's look at the code.
| | 02:20 | See how the Google code surfs up all four
versions of Crimson Text in the same line of code?
| | 02:25 | Internet Explorer 7 and 8 only
recognize one font surfed up; the first one.
| | 02:31 | All the other weights and
styles are then faked by the browser.
| | 02:35 | Fixing this is relatively easy.
| | 02:37 | First, immediately following the current
code, let's put in a return here, and
| | 02:43 | we're going to add the
following conditional comment.
| | 02:47 | We're going to say a conditional
comment of if, Internet Explorer,
| | 02:50 | and then end if.
| | 02:51 | Then what we're going to do is go back
to Google Web Fonts, and get the code for
| | 02:57 | each individual weight and style.
| | 02:59 | So now we have normal 400 selected, copy;
back in our document, I'll paste that in.
| | 03:09 | Toggle back to Google Web Fonts, choose
the Normal 400 italic, copy that, paste it,
| | 03:22 | choose just the semi-bold, copy
that, and paste it into my document.
| | 03:31 | And now the semi-bold italic, select
that, copy it, toggle back, and paste it,
| | 03:41 | and then we'll save this.
| | 03:43 | Go back into the browser and refresh
this, and if you're not using Internet
| | 03:48 | Explorer, you didn't see anything
change, but it's now working in both
| | 03:53 | Internet Explorer 7 and 8.
| | 03:56 | I'll show you a screenshot
of the fixed version.
| | 03:59 | And this is what you'd see if
you were using Internet Explorer 7 and 8.
| | 04:04 | The italic is fixed, as is the bold.
| | 04:07 | Unfortunately, we also see that there
is a bit of a spacing problem in the
| | 04:12 | Crimson italic on
Internet Explorer 7 and 8.
| | 04:15 | Now, you might wonder why I had you use
a conditional comment, and only serve the
| | 04:20 | individual weights and
fonts for Internet Explorer.
| | 04:22 | Wouldn't that approach work in all
other browsers? Not necessarily.
| | 04:28 | If you didn't use the conditional comment,
the fonts wouldn't work properly in Opera.
| | 04:32 | When faced with multiple weights and
styles of a single font, Opera always uses
| | 04:37 | the last weight and style of
the font pulled in from Google.
| | 04:41 | I can show you what that
would look like as well.
| | 04:44 | So if we didn't use the conditional
comment, Opera would have pulled in the
| | 04:47 | last weight and style, which was the
semi-bold italic, and Opera would have used
| | 04:51 | it for all the text on the page.
| | 04:53 | In doing it the way that we did,
Opera also works correctly.
| | 04:57 | So now our old style font works properly
across every srowser that supports Web fonts.
| | 05:03 | Even though Google Web fonts takes care
of most of the technological aspects of
| | 05:07 | using Web fonts, it's still good to
keep track of how things are working
| | 05:11 | cross-browser, and be willing to make
changes to how you use their service.
| | Collapse this transcript |
| Looking at how using an Old Style font affects the look and feel of a web page| 00:00 | Now that we've finished the Crimson
Text site, let's take a look at how using
| | 00:04 | Crimson Text, an old style font,
affects the look and feel of the site.
| | 00:09 | Let's compare Crimson Text to Calluna.
| | 00:13 | Calluna was the Venetian font
we used in the last chapter.
| | 00:16 | If you just sort of relax your eyes,
don't look at the detail, but look at
| | 00:20 | the overall texture of the page,
Crimson Text looks older, inkier, more
| | 00:26 | pen-formed than Calluna.
| | 00:27 | Based on the history of the two fonts,
Venetian is the older, more pen-formed
| | 00:32 | approach to type design.
| | 00:34 | This is sort of surprising, but remember,
we chose a more contemporary approach
| | 00:39 | to Venetian fonts when we chose Calluna.
| | 00:42 | Yes, if we look at the main heading, we
can see the rising crossbar on the E. We
| | 00:47 | can see the pen-formed head serifs on
the H, the L, and the D, and we can even
| | 00:53 | see the angled serif under descender of
the P. But Calluna also has a stylized
| | 00:58 | approach to the letters.
| | 00:59 | The relationship between thick
and thins is relatively even.
| | 01:04 | The letters are crisp, the x-height
is relatively large.
| | 01:07 | On the other hand, we chose a more pen-formed
old style when we chose Crimson Text.
| | 01:13 | It too has the pen-formed head serifs
on the L, the D, and the H. It also has
| | 01:20 | a smaller x-height than Calluna and an
A with a smaller closed counter, and a
| | 01:25 | more pen-formed terminal and bowl.
| | 01:28 | Finally, Crimson Text's thicker
shoulder on the N and H help create slightly
| | 01:34 | darker, more inkier looking
spots in the texture of the text.
| | 01:38 | If we had chosen an older looking
Venetian font, like Jenson, and a less
| | 01:43 | pen-formed old style font like Caslon,
we'd have a completely different visual
| | 01:48 | experience looking at these pages.
| | 01:50 | It's important to remember that even
within a typeface classification, like
| | 01:54 | Venetian and old style, there is a
wide range of fonts to choose from.
| | 01:59 | The other element that makes the
Crimson Text page feels so old and
| | 02:03 | pen-formed is the italic. Let's scroll
over here and look at this italic; it
| | 02:09 | has some lovely details.
| | 02:10 | Looking at the library quote, and
you'll find an extra loop on the arm of the
| | 02:15 | lowercase k. You'll also find a lovely
terminal at the end of the F. If we look
| | 02:21 | at the italic on the Calluna, we can
see it also has a loop on the K, but it
| | 02:27 | does not have the terminal
on the end of the lowercase f.
| | 02:31 | Crimson Text's italic is a little bit
narrower than I like to use, but it's okay
| | 02:36 | with small amounts of text in the situation,
| | 02:38 | and the narrow calligraphic forms
are actually what make it feel so old.
| | 02:44 | I enjoy Crimson Text; it's a
pretty good font for being a free font.
| | 02:48 | It offers a variety of weights and styles,
it holds up fairly well cross-browser,
| | 02:53 | and it has some beautiful letter forms.
| | 02:56 | But I'd be remiss if I didn't point
out one of its faults: it has spacing
| | 03:00 | problems, which unfortunately
stands out quite a bit on this site.
| | 03:04 | Let's take a look at the word Welcome
here at the very top of the page, the
| | 03:09 | very first word we see, and the space
between the W and the E is just too wide.
| | 03:15 | It begins to read as W-elcome.
| | 03:18 | If we go back to the quote, we can see
the same problem in the word benefit.
| | 03:23 | It becomes Benef-it, and you'll
remember from when we looked at this page in
| | 03:29 | Internet Explorer; there were some
spacing issues with the italics in the quote.
| | 03:35 | This is an unfortunate problem in an
otherwise very pleasing font, but you
| | 03:39 | should be aware of it.
| | 03:41 | You'll often find problems like these in
fonts that aren't supported by a person
| | 03:45 | or even a team of people that can put
in the hours required to properly space
| | 03:50 | and hint every letter and
combinations of letters. It's a big job.
| | 03:55 | Having pointed out the spacing problems,
I have to say, it's a good font that
| | 03:59 | does its job quite well.
| | 04:01 | If you're currently only able to use
free fonts, this is a font you should keep
| | 04:05 | in mind, and consider using, especially
if your project does not need an italic.
| | 04:11 | It has some lovely features.
| | Collapse this transcript |
|
|
4. Transitional FontsIdentifying a Transitional font| 00:00 | Slightly overlapping the
category of fonts we call old style are
| | 00:04 | the transitional fonts.
| | 00:06 | Transitional fonts were designed
from the 1690s to the late 1700s.
| | 00:12 | Of course, they weren't
called transitional at the time.
| | 00:15 | That's the name we've given them,
because they're seen as a transition between
| | 00:19 | the old style and modern fonts.
| | 00:21 | But while the name suggests a mere
transitional stage between two other
| | 00:25 | historical styles, I think of the transitional
fonts as a defining period in type design.
| | 00:32 | It happened during the Enlightenment;
| | 00:34 | a time when European intellectuals
promoted scientific thought over superstition,
| | 00:40 | and questioned religious and political power.
| | 00:43 | The transitional fonts start in 1692
with the Kings Roman, which was a typeface
| | 00:49 | developed in France by order of King
Louis XIV, designed by a committee from
| | 00:54 | the Academy of Sciences who, by the way,
favored analytical and mathematical principles.
| | 01:00 | The letters were mapped out on a
grid before being cut in metal.
| | 01:04 | Whereas old style fonts continued to
reference the human hand behind the
| | 01:08 | letters, transitional fonts had an
increased emphasis on verticality.
| | 01:13 | They also had an increased
contrast between thick and thin strokes.
| | 01:17 | Transitional letters represented the
idea of what letters could look like, rather
| | 01:22 | than the reality of what humanist
pen-formed letters did look like.
| | 01:27 | Here we have three Ms.
| | 01:28 | On the left is a Minion M. Notice
the slight angle of the left stem.
| | 01:34 | While Minion is a contemporary digital font,
it is based on traditional old style fonts.
| | 01:39 | On the right is an M from the
original Caslon specimen sheet.
| | 01:43 | The left stem is almost vertical.
| | 01:46 | Remember that Caslon was designed late
in the old sstyle period, in the 1720s,
| | 01:51 | after the Kings Roman was designed.
| | 01:53 | In the center is a contemporary
digital version of Baskerville, a transitional
| | 01:57 | font originally designed in the 1750s.
| | 02:02 | You can see the left stem
is straight up and down.
| | 02:05 | The differences between old style and
transitional fonts are also noticeable in
| | 02:09 | the shapes of the serifs.
| | 02:11 | Notice how the Baskerville
serif is thinner and crisper.
| | 02:14 | It's a curve where the serif
flows into the stem is tighter.
| | 02:18 | The same is true of the foot serifs.
| | 02:20 | Now, it's a little unfair, because I'm
comparing a printed version of Caslon to a
| | 02:25 | stylized contemporary
digital version of Baskerville.
| | 02:29 | So let's compare the digitized version
of Caslon to the digitized version of
| | 02:33 | Baskerville, and you can see the
overall difference between the old style and
| | 02:37 | transitional typefaces.
| | 02:39 | It's immediately obvious that the
transitional font, Baskerville, is much lighter.
| | 02:44 | The thins are getting thinner, so
there's more contrast between thick and thin.
| | 02:49 | The serifs are more delicate, and the
head serifs are no longer wedge-shaped.
| | 02:54 | The terminals are more stylized,
and are shaped like teardrops.
| | 02:57 | And most interesting to me is
the stress is now almost vertical; the
| | 03:02 | reference to the pen is gone.
| | 03:04 | In the lowercase d, for example, the
Baskerville bowl connects to the stem with
| | 03:09 | thin strokes, while the weight of
the bowl is all on the outside edge.
| | 03:13 | The Caslon bowl is connected to the
stem with a thicker pen-formed stroke.
| | 03:17 | I want to point out small areas of
imperfection in the printed version of the
| | 03:22 | Caslon M. It's hard to control ink
being pressed onto a sheet of paper from a
| | 03:27 | piece of lead type, and it gets even
harder to control as strokes get thinner.
| | 03:32 | John Baskerville is perhaps most
famous for the technologies he developed in
| | 03:38 | order to keep his letter
forms crisp on the page.
| | 03:40 | He developed new methods of making
paper, new inks, and new drying methods.
| | 03:46 | He wanted to see how far he could
push the properties of ink and paper to
| | 03:50 | achieve his ideal design.
| | 03:52 | I find connections between the transitional
type designer, John Baskerville, and
| | 03:57 | Web designers of today. Why?
| | 03:59 | Because type design isn't just about
the ideas for designing the letter; it's
| | 04:03 | also about the materials and methods
available to make the design actually work.
| | 04:09 | I try to keep Baskerville in mind
when I think of those of us today who are
| | 04:13 | scrambling around, trying to get
Web fonts to work on every browser.
| | 04:17 | It's frustrating, and it's
imperfect, but it's worth it.
| | 04:20 | I also try to keep him in mind when I think
about picking appropriate fonts for the Web.
| | 04:25 | Baskerville struggled to keep
his font crisp and clear on paper.
| | 04:30 | We don't have that kind of control
over screen resolution, or how different
| | 04:34 | browsers render Web fonts.
| | 04:36 | What we do have is control
over the fonts we choose to use.
| | 04:39 | Due to their thinner thin strokes, and
thinner crisper serifs, some transitional
| | 04:45 | fonts may not be appropriate for
use on the Web, but that doesn't mean
| | 04:49 | transitional fonts
won't ever work online.
| | 04:52 | In fact, Georgia is actually a contemporary
transitional font designed for the Web.
| | 04:57 | Matthew Carter designed it with a
larger x-height, and slightly thicker thicks.
| | 05:02 | Both helped maintain legibility on
screen, while retaining the vertical rational
| | 05:07 | structure of a transitional font.
| | Collapse this transcript |
| Choosing a Transitional font| 00:00 | So now that we know what a transitional
font looks like, we need to pick one to use.
| | 00:05 | First, let's look at Utopia Standard.
| | 00:08 | It's a transitional font.
| | 00:10 | Look at the lowercase o in Utopia;
the stress is almost vertical.
| | 00:15 | That's true in the P as well.
| | 00:18 | You can see the shoulders going into
the stem are not a heavy pen stroke;
| | 00:22 | they're thinner, and the weight of
the bowl stays on the outside edge.
| | 00:26 | The head serifs are no longer wedge-like,
| | 00:29 | and we can also see that the foot
serif on the lowercase d is horizontal.
| | 00:34 | It no longer looks like
an angled pen-formed shape.
| | 00:37 | Also, if we look at the aperture of
the lowercase e, it's tighter than we'd
| | 00:42 | see in a humanist font.
| | 00:44 | The bowl is starting to come up and
around higher, completing more of the
| | 00:48 | circle, while the closed
counter gets a little bit bigger.
| | 00:51 | Yet, when Robert Slimbach designed this
font for Adobe in 1989, he combined the
| | 00:57 | transitional elements with some
more humanist characteristics.
| | 01:01 | The terminal on the A is not a teardrop,
but feels more organic and pen-formed.
| | 01:07 | There's more contrast between thicks
and thins, but the thin strokes are not as
| | 01:12 | thin as we'd expect.
| | 01:13 | This is actually probably a good thing,
because there is a better chance Utopia
| | 01:18 | will remain legible on screen.
| | 01:20 | So just like in the last chapter, we
had Caslon, which is an old style font
| | 01:24 | leading toward a transitional font,
here we have a transitional font with some
| | 01:29 | humanist characteristics.
| | 01:31 | It bears repeating that font design is
an art, not a science, so many fonts will
| | 01:36 | straddle different classifications.
| | 01:39 | I've tested Utopia across
browsers, and it holds up beautifully.
| | 01:43 | Unfortunately, it's only available in
Typekit's Personal plan and higher, so
| | 01:48 | it's not available to those
who haven't paid for a plan.
| | 01:52 | In addition, I'm interested in trying
to find a more traditional transitional
| | 01:56 | font; one without the humanist qualities,
| | 01:59 | so I'm going to keep looking.
| | 02:01 | This is another transitional font I found.
| | 02:03 | It has a lot of the
characteristics of a transitional font;
| | 02:07 | the thinner thins, the
more horizontal, crisper serifs,
| | 02:10 | and, well, the serifs are
just no longer wedges,
| | 02:13 | but I'm not crazy about this font for a
couple of reasons, so I don't think how
| | 02:18 | I want us to use it.
| | 02:19 | First, it's a little too spaced out.
| | 02:21 | When I look at it, it looks
like letter spacing has been added.
| | 02:25 | The letters are starting to
float away from each other.
| | 02:27 | Second, some of the letters feel
awkward to me in the context of the text.
| | 02:31 | For example, the G is a little bit small
and dark compared to the other letters.
| | 02:38 | Reading the words Throughout history
in the second paragraph, the g sort of
| | 02:43 | pops out of the word Throughout.
| | 02:45 | I also think the terminal on a
lowercase a comes in and closes up a bit too
| | 02:50 | much; we can see it there.
| | 02:52 | When reading the text, the
A stops my eyes slightly.
| | 02:56 | It feels a little too complex in
relation to the other letters in the font.
| | 03:01 | We can also see the stem on the
lowercase f feels too short here between
| | 03:06 | the words of and the.
| | 03:08 | And the terminal is a little too
close to the meanline, and in fact, the f
| | 03:13 | starts to read more like a t.
| | 03:15 | Finally, the spacing is uneven.
| | 03:17 | Again, if we read the words Throughout history,
we can see that hist is too far from the ory.
| | 03:25 | I know we saw a similar problem in
Crimson Text in the last chapter, but in
| | 03:30 | Crimson Text, at least in the Roman
style of Crimson Text, not the italic, it was
| | 03:35 | a rare occurrence between
a couple of letter pairs.
| | 03:38 | Here, it's happening too frequently.
| | 03:40 | Uneven spacing can undermine the
aesthetic texture of your text.
| | 03:44 | It can also make the text slightly
more difficult for your visitors to read.
| | 03:48 | So I don't think we're going to use this font.
| | 03:51 | Let's look at another one.
| | 03:54 | This transitional font has high contrast
between thick and thin, and a straight
| | 03:58 | up and down stress, but
it's just too heavy overall.
| | 04:01 | It's marketed as a normal weight, but
it feels more like a bold version to me.
| | 04:06 | Also, I said early on that one of the
problems I run into when testing Web fonts
| | 04:11 | is when letters are just too unique,
and that's happening with this font.
| | 04:15 | The designer chose to combine wedge-shaped
head serifs on this font, which is fine.
| | 04:21 | We've already seen how a font can
straddle two categories in their
| | 04:24 | classification system.
| | 04:26 | But when they put the wedge-shaped
serifs on some of the letters, they
| | 04:30 | lowered the stems on the R, M, N, and I, and
this affects the visual size of the letters.
| | 04:38 | So look closely at the first three
words in the text: For decades, critics.
| | 04:43 | The R and the two Is in critics feel
shorter than the other letters in the word,
| | 04:48 | and the text starts to have
a visually uneven meanline.
| | 04:51 | Finally, the font has an italic
but it feels like a fake italic.
| | 04:56 | It doesn't have the italic forms
I associate with the serif font.
| | 05:00 | Instead, it looks like it was just
sort of slanted over to the side.
| | 05:04 | We need a font with a more
traditional italic.
| | 05:07 | Again, I don't want to
use this font for our site.
| | 05:10 | It's not appropriate for a lot
of text, so let's keep looking.
| | 05:14 | The last font I want to
show you is PT Serif.
| | 05:18 | Now, PT Serif is sort of funky.
| | 05:20 | In fact, I had to think long and hard
before deciding whether to even include
| | 05:25 | this as a transitional font.
| | 05:27 | PT Serif probably officially belongs in
a classification I've created, and we'll
| | 05:32 | talk about later in the
course, called other serif fonts.
| | 05:36 | It doesn't quite fit with
anything we've looked at so far,
| | 05:39 | and I can tell you, it's not going to
fit with modern or slab serif either.
| | 05:44 | But I decided to include it as a
transitional font because I was having such a
| | 05:48 | hard time finding a font we could all
use that really has the sort of forms
| | 05:52 | I'm looking for in terms of the relationship
between thick and thin in the vertical stress.
| | 05:57 | Now, PT Serif does have the higher
contrast between thick and thin strokes, and
| | 06:02 | it also has a more vertical stress.
| | 06:05 | In fact, I've used it before, and when
seen in text, it feels very much like
| | 06:09 | a transitional font.
| | 06:12 | It's the terminals in the
serifs that sort of throw it off.
| | 06:17 | The terminals are not teardrop shapes, and
the serifs aren't thin and more refined,
| | 06:21 | so it's definitely not a
traditional transitional font,
| | 06:25 | but we're going to use it anyway.
| | 06:27 | It's available in Typekit's trial plan,
so everyone can use it, and it will give
| | 06:31 | you a sense of what a
transitional font looks like in text.
| | Collapse this transcript |
| Applying PT Sans to a site via Typekit| 00:00 | Now that we've picked a font with
transitional characteristics, it's time to
| | 00:05 | apply it to our Web page.
| | 00:07 | First, open up the georgia_site, and
I'll open mine in TextWrangler, but you can
| | 00:12 | use whatever text editor you prefer.
| | 00:14 | Let's save this file as pt_serif_tk,
because it uses a Typekit font, _site,
| | 00:25 | and you can save it in your original
city site folder, because we won't be
| | 00:29 | rewriting any other files.
| | 00:30 | Now, let's take a look at this in the browser.
| | 00:33 | You can right-click, and we can
see that it's still using Georgia.
| | 00:38 | What we need to do is we need to add
the PT Serif to this file by going into
| | 00:44 | WebKit, and applying the
WebKit font to our page.
| | 00:48 | So I'm going to go through this quickly.
| | 00:51 | If you're just joining us, or if you
need a more detailed reminder of how to do
| | 00:55 | these steps, I recommend you review the
appropriate videos in the Venetian Fonts
| | 00:59 | chapter of the course.
| | 01:00 | First, let's go to typekit.com, and if
you're not already logged in, make sure you do so.
| | 01:08 | Make sure you're using the Choosing
and Using Web Fonts Kit, and then find pt
| | 01:13 | serif, add it to the kit, and you can
see we've already got Calluna in here, but
| | 01:20 | that's okay, because in a trial kit, you
can have up to two fonts, so we can keep
| | 01:24 | that in here, and it will still work.
| | 01:26 | PT Serif has Regular,
Italic, Bold and Bold Italic.
| | 01:31 | We're going to keep all four of those, and we
can see down here that our Kit Size is fine.
| | 01:36 | It's smaller than the
maximum recommended 400K.
| | 01:40 | Now let's go ahead and
publish the site.
| | 01:42 | A reminder that the kit will not
work until you've clicked Publish.
| | 01:46 | While we're here, we'll grab our embed
code, copy, and we need to put that embed
| | 01:54 | code in our HTML document as
the first item in the head.
| | 01:58 | Now we need to tell the browsers
that we want to use PT Serif in the site.
| | 02:04 | We can see here under font family
that we're currently still using Georgia.
| | 02:09 | Back in Typekit, under Using fonts in
CSS, we can highlight and copy PT Serif,
| | 02:17 | and add that to our font family with a
Comma, so if for any reason PT Serif
| | 02:22 | doesn't work, Georgia will load.
Save that,
| | 02:26 | and now we need to put it on the server,
because Typekit fonts do not work unless
| | 02:30 | they are on a server.
| | 02:32 | My FTP software is already open, so I can grab
my PT Serif file and drag it over to my server.
| | 02:41 | And then back in the browser, you'll
need to go to your domain name, and find
| | 02:45 | your file, and we're all set.
| | 02:48 | We've got a new site for
Springfield, Rhode Island set in PT Serif.
| | 02:53 | Keep this HTML file. We'll
keep using it in the next lesson.
| | Collapse this transcript |
| Changing styling as necessary to improve the readability of the text| 00:00 | Now that our site is using PT
Serif from Typekit, it looks great.
| | 00:05 | The type size is legible,
and the hierarchy is working.
| | 00:09 | This is probably because if we go back
to our PT Serif Web font specimen sheet,
| | 00:15 | we can see that PT Serif has a
similar structure and x-height to Georgia.
| | 00:21 | Now, PT Serif's x-height
is a little bit bigger.
| | 00:24 | See here the a is bigger than the a, but
then the tops of the bs are the same height.
| | 00:29 | So the x-height is a little bit bigger.
| | 00:31 | So let's go back and take a look at
the size the PT Serif is in our site.
| | 00:38 | But it doesn't look too big.
| | 00:40 | It looks okay, it's not big and clunky, so
I don't think we need to change the size.
| | 00:45 | The only thing I'd like to do is
work on the sentence about the Bay Road
| | 00:49 | businesses down here.
| | 00:51 | It's bold just like the article heading is.
| | 00:54 | Now, it doesn't seem to be competing
with the article heading; it's a really
| | 00:58 | well-balanced bold, but because those
two lines have a different purpose on the
| | 01:04 | site, I'd like to give them a
slightly different treatment.
| | 01:07 | Let's make the Bay Road
businesses sentence a bold italic.
| | 01:12 | So go into our HTML document from the
last lesson, and we're going to scroll down
| | 01:17 | to strong, because that's what
I used to set that sentence.
| | 01:21 | We're going to add a font-style: italic.
| | 01:25 | Now, I happen to know that the PT
Serif Bold is a 700, and while we're at it,
| | 01:31 | let's go in and make all the weights correct.
| | 01:35 | So our normal would be 400 here under
the universal selector, and the h4 is 700,
| | 01:42 | and the strong we've already
changed to 700, so we're good.
| | 01:46 | If you've missed one of these, it's fine.
| | 01:48 | Remember, the browsers read 400 as normal and
700 as bold, so they read them the same way.
| | 01:55 | They'll still put in the right font weight.
| | 01:56 | But I think it's a good idea, as you
start using more complex fonts with
| | 02:01 | more weights and styles, to get used to
setting the weights using the numerical values.
| | 02:05 | So let's go ahead and save that, and
because we're using a Typekit font, we
| | 02:09 | need to upload to it to our server, and
then back in the browser, we can refresh,
| | 02:17 | and we can see now that that sentence
about the Bay Road businesses is a bold italic.
| | 02:24 | The PT Serif bold italic is really
quite legible; it works really well.
| | 02:28 | In fact, I like it better than any of
the bold italics we've seen so far in this
| | 02:32 | course, including Georgia's.
| | 02:35 | That's why the original site doesn't
use a bold italic for this sentence.
| | 02:39 | So we've got the site all set up with a
font with transitional characteristics.
| | 02:43 | This was probably the
easiest font to work with so far.
| | 02:47 | That's because PT Serif has a similar structure
and x-height to Georgia; the original font.
| | 02:53 | You'll find that x-height plays a huge
role in how big or small a font feels
| | 02:58 | on the screen.
| | Collapse this transcript |
| Looking at how using a Transitional font affects the look and feel of a web page| 00:00 | Now that we've finished the PT Serif
site, let's take a look at how using PT
| | 00:05 | Serif, a font with transitional characteristics,
affects the look and feel of the site.
| | 00:11 | Seeing the site done, I'm really glad I
took a chance and used PT Serif to show
| | 00:16 | you how a transitional
font looks when used in text.
| | 00:20 | If you just sort of relax your eyes,
don't look at the detail, but look at the
| | 00:24 | overall texture of the page, PT
Serif has an up and down quality.
| | 00:29 | I talked earlier in the chapter
about how transitional fonts have a
| | 00:32 | more vertical stress.
| | 00:33 | They have left behind the angled
stress of the pen-formed bowls.
| | 00:39 | Even the quote about the library, it's
clearly Italic, but less calligraphic than
| | 00:45 | it's been in the past.
| | 00:46 | Let's compare PT Serif to
Crimson Text; our old style font.
| | 00:51 | Let's look at that italic, and you can
see here that the PT Serif italic looks
| | 00:57 | more up and down than the
Crimson Text does.
| | 01:00 | The Crimson Text italic, it
just feels more calligraphic.
| | 01:03 | Even looking at the regular text,
you can see that PT Serif has a larger
| | 01:08 | x-height, and a larger closed counter on
the a, compared to Crimson Text's smaller
| | 01:14 | closed counter on the a. So PT Serif
feels larger, and more open, and more
| | 01:20 | vertical, and it feels less handmade.
| | 01:24 | Let's take a look at PT
Serif compared to Utopia.
| | 01:28 | Utopia was a font we looked at
earlier in the course, and we didn't use it.
| | 01:32 | Primarily, I was considered about its
humanist qualities, and also, it's not
| | 01:36 | available on the trial plan in Typekit.
| | 01:39 | So we did not make this page together;
| | 01:42 | I made it for comparison purposes.
| | 01:44 | And you can see that Utopia
also has the up and down quality.
| | 01:48 | It has lost the angle of the
stress of the pen-formed letters,
| | 01:52 | and in fact, Utopia starts
to feel almost square in text.
| | 01:57 | The bowls are almost square if you compare,
for instance, the word announce to
| | 02:01 | the word over here, announce in the PT Serif.
| | 02:04 | I'm glad I took the time to make both
of these pages, and look at them side by
| | 02:09 | side, because at this size, it seems
like the idiosyncratic characteristics of
| | 02:14 | the font just don't stand out as much.
| | 02:16 | I had been concerned about PT Serif,
because when we looked at it large, we could
| | 02:21 | really see the very wedge-shaped serifs,
| | 02:25 | and with Utopia, we could really see how
humanist the font looked, but when used
| | 02:30 | in text, they both feel very transitional.
| | 02:32 | Let's scroll over a little bit here.
| | 02:36 | They both have lovely bowls that don't fill in,
| | 02:39 | and Utopia also has the semi-bold and
semi-bold italic you can see here in the
| | 02:44 | Bay Road businesses sentence.
| | 02:46 | It's nice to have that extra
weight and style to work with.
| | 02:49 | They both have large x-heights, which
help them stay very legible on the screen.
| | 02:55 | I've provided the final HTML files
for both of these pages as part of the
| | 02:59 | files for the course,
| | 03:00 | so you can go in and see how I set
the Utopia standard page if you want to.
| | 03:05 | It does have a slightly smaller x-height,
so I did have to make some changes in size.
| | 03:10 | I tested both fonts cross-browser, and
they both hold up really well; neither
| | 03:15 | font has spacing problems, and I would
highly recommend using either of these
| | 03:19 | fonts if you're looking to use a
transitional font other than Georgia.
| | 03:23 | PT Serif is available in the trial plan,
while Utopia requires the Personal plan
| | 03:28 | or higher on Typekit.
| | Collapse this transcript |
|
|
5. Modern FontsIdentifying a Modern font| 00:00 | The first modern font used for
printing books was designed by Firmin Didot
| | 00:05 | in France around 1783.
| | 00:09 | Later, modern fonts were used in advertising,
| | 00:12 | like this broadside announcing a
celebration of American independence in 1833.
| | 00:16 | Notice the heavy italic
modern font in the heading.
| | 00:22 | With their crisp thin strokes, abrupt
serifs, and round terminals, modern fonts
| | 00:27 | are not modern by today's standards.
| | 00:30 | Their stylized romantic forms were
modern in the late 1700s to the early 1800s.
| | 00:37 | Modern fonts were directly
influenced by two seemingly competing factors:
| | 00:41 | reason and romanticism.
| | 00:44 | Structurally, modern fonts were
influenced by the King's Roman, which, as
| | 00:49 | you remember from the last chapter, was a
font designed almost a hundred years earlier.
| | 00:54 | Designed by committee, per order of King
Louis XIV, it was mapped to a grid,
| | 00:58 | and based on mathematical principles.
| | 01:01 | It had an increased emphasis on
verticality, and an increased contrast between
| | 01:05 | thick and thin strokes.
| | 01:07 | The font symbolized the intellectual
tenets of the enlightenment, which we also
| | 01:11 | call the Age of Reason.
| | 01:14 | Modern fonts were also influenced
by the work of transitional font
| | 01:17 | designer, John Baskerville, whose fonts
continue the principles set forth by the King's Roman.
| | 01:23 | In fact, modern fonts continued to use
many of the structural characteristics of
| | 01:27 | transitional fonts, and
actually pushed them further.
| | 01:30 | Looking at the Bodoni BE, which is
a digital font based on the work of
| | 01:35 | Giambattista Bodoni in 1798, we can
compare it to Baskerville, a digital
| | 01:42 | transitional font based on the
work of John Baskerville in the 1750s.
| | 01:45 | Bodoni has a completely vertical stress.
| | 01:50 | The slight angle on
Baskerville's e has straightened up.
| | 01:52 | While both fonts have a strong contrast
between thick and thin strokes, Bodoni's
| | 01:58 | contrast is exaggerated, and the
change from thick to thin is abrupt.
| | 02:04 | This abrupt change in stroke width
is characteristic of modern fonts.
| | 02:08 | Also characteristic of modern fonts
are the very thin flat serifs that no
| | 02:12 | longer flow into the stem.
| | 02:14 | See how the serifs form a crisp 90
degree angle to the stem? This is a big
| | 02:19 | change from previous serifs.
| | 02:22 | Related to serifs, modern fonts
have round bowl-like terminals.
| | 02:27 | Finally, the aperture on
the e closes up significantly.
| | 02:30 | It has to; it has to compensate for
the top right corner of the bowl, which
| | 02:35 | has gotten so heavy.
| | 02:36 | Plus, the smaller aperture lets the
E mimic the structure of the o. While
| | 02:42 | the rigid systematic underlying
structure of modern fonts appears to be
| | 02:46 | primarily influenced by the Age of
Reason, there was another competing
| | 02:50 | factor at work: romanticism.
| | 02:54 | Overlapping the Age of Reason, and in
response to its scientific rationalization
| | 02:58 | of nature, was the romantic period.
| | 03:01 | Believing that man must liberate
himself from intellectual change, romantics
| | 03:06 | recognized diversity, and
believed that expression was everything.
| | 03:11 | Romantics believed that unique
traits were what set people apart from one
| | 03:15 | another, as well as
nations apart from one another.
| | 03:18 | In order to understand how
important the idea of personal and national
| | 03:22 | diversity was, it's worth mentioning that this
was a time when individuality was threatened.
| | 03:28 | The industrial revolution was in
full swing, and Napoleon was trying to
| | 03:33 | expand French territory.
| | 03:35 | Much of Europe was
engaged in the Napoleonic Wars.
| | 03:39 | Now, how could such a structured
approach to font design possibly represent the
| | 03:44 | ideas of the Romantic Age?
| | 03:46 | It does in two ways.
| | 03:48 | First, remember that until now, for the
last 350 years or so, fonts have been
| | 03:54 | based on using a broad nib pen.
| | 03:57 | By pulling further away from the
humanist principles defining early fonts,
| | 04:02 | modern font, like Bodoni, are unique.
| | 04:05 | In fact, the modern fonts are
harder to read than earlier fonts.
| | 04:09 | The strong vertical strokes try to pull the
eye down the page instead of across the rows.
| | 04:15 | In addition, the high contrast
between thick and thin strokes can create a
| | 04:20 | dazzling effect in the text.
| | 04:22 | That is, the thins start to disappear,
leaving only the thick strokes for reading.
| | 04:27 | Choosing to design such crisp, elegant
fonts, regardless of readability, is an
| | 04:32 | act of self-expression.
| | 04:34 | But modern fonts are not purely intellectual.
| | 04:37 | Believe it or not,
they're related to handwriting.
| | 04:40 | At the time fonts like Bodoni were
originally designed, people no longer used
| | 04:45 | the broad nib pen to write.
| | 04:46 | Thus, pens no longer created a natural
access, or pen-formed terminals in serifs.
| | 04:53 | Instead, people like Seth Barlow, who
kept a log aboard the Whaling Brig, The
| | 04:58 | Nancy, from 1808 to 1811, used a
pointed flexible quill to write.
| | 05:04 | The flexible quill responded to pressure;
| | 05:07 | the greater the pressure,
the thicker the stroke.
| | 05:10 | Dramatic pressure created a dramatic
contrast between thick and thin strokes.
| | 05:15 | And here, you can see Barlow, who was an
excellent letterer, drew some Roman forms,
| | 05:20 | not unlike the forms we see in
Bodoni. But we're looking at script.
| | 05:24 | Let me show you how the flexible
quill influenced fonts like Bodoni.
| | 05:29 | This is an Imperial 101 Nib that is
flexible, and works similarly to the old quills.
| | 05:35 | When I apply pressure to
the nib it opens, like this.
| | 05:38 | Let's see what happens with some ink.
| | 05:41 | I'm not very good at working with
this nib; it's harder to use than the C1,
| | 05:45 | but I'll do my best.
| | 05:47 | I lightly draw the top of the bowl,
apply pressure to create the outer edge,
| | 05:52 | release pressure to finish the
stroke, and start again at the top.
| | 05:57 | You can see here that I increased
pressure, and the nib opens, and I draw down,
| | 06:02 | and finish the O.
| | 06:03 | Now I'll do a letter b, starting
with a lightly drawn head serif.
| | 06:09 | I apply pressure, draw down, and
run out of ink, so I'll try again.
| | 06:15 | I lightly draw the head serif, apply
pressure, draw the stem, lightly draw the
| | 06:21 | foot serif, up to the meanline, lightly
draw the top of the bowl, apply pressure
| | 06:28 | to draw the outer stroke of
the bowl, and finish the letter.
| | 06:32 | You might notice, I keep using
the verb draw instead of write.
| | 06:37 | When using this nib, it feels more
like drawing, whereas a flat nib creates
| | 06:43 | thick and thin strokes as I write.
| | 06:45 | With this nib, I decide where
the thick and thin strokes are.
| | 06:49 | I'll move the paper, and draw
an e. Even the terminals are drawn.
| | 06:59 | When making the letter a, I start by
drawing a circle terminal, lightly draw
| | 07:04 | over the top, apply pressure down,
finish with a thin, curly spur, then
| | 07:13 | lightly start the top of the closed
counter, pull down with pressure, and
| | 07:19 | pull lightly back up.
| | 07:21 | The extreme contrast in thick and thin,
whether created by a pen, lead type, or a
| | 07:29 | digital font, is more
difficult to read than earlier fonts.
| | 07:33 | In fact, I don't recommend
using modern fonts for text.
| | 07:37 | They lose their stylized romantic forms,
and make it harder for visitors to read
| | 07:42 | the content on your site.
| | 07:44 | Save them for headings, where
their elegance will truly shine.
| | Collapse this transcript |
| Choosing a Modern font| 00:00 | So now that we know what a modern font
looks like, we need to pick one to use.
| | 00:05 | First, let's look at LTC Bodoni 175.
| | 00:10 | It is a modern font based on
the Bodoni's original font.
| | 00:13 | Notice the contrast between
the thick and thin strokes.
| | 00:17 | The contrast is far greater than what
we see in Georgia, and that's because
| | 00:21 | Georgia is a transitional font.
| | 00:23 | Like all modern fonts, the serifs are thin
and flat, and they do not flow into the stems.
| | 00:30 | This font is a little different from
the Bodoni BE we saw in the last lesson.
| | 00:35 | The terminals are less round,
as are the bowls.
| | 00:38 | The thin stokes in this
Bodoni feel even thinner.
| | 00:41 | This is a fine font, but I'm not
crazy about it for this project.
| | 00:46 | This font was designed to
be used in headings.
| | 00:49 | That means it has
slightly tighter letter spacing.
| | 00:52 | Tighter letter spacing helps
keeps big text from looking too loose,
| | 00:57 | but then the letter spacing is too
tight when we use the font for text.
| | 01:01 | If we use LTC Bodoni 175 for text,
the tighter letter spacing will make an
| | 01:07 | already hard to read font
even harder to read.
| | 01:10 | And even if it was the perfect font,
with better letter spacing, and slightly
| | 01:14 | thicker thin stokes, it's only
available from Typekit in the Personal plan or
| | 01:19 | higher, so not everyone has immediate
access to it, so let's keep looking.
| | 01:25 | Kepler Standard is marketed as a
modern font with humanist details.
| | 01:30 | It's a well designed font
and holds up across browsers.
| | 01:33 | But the humanist details, like the
serifs that flow into the stems instead of
| | 01:39 | creating a 90 degree corner, and
the terminals that are softer, and not
| | 01:44 | ball-shaped, like here on the a, and
there are not quite vertical stress, like
| | 01:49 | here on the d; all these things make
the font feel sort of un-modern to me.
| | 01:56 | Now don't get me wrong, it's a gorgeous
font, and I would definitely consider it
| | 02:00 | for another project.
| | 02:01 | It's just not what we're
looking for right now.
| | 02:04 | Next, let's look at Unna.
| | 02:06 | Unna is available on Google Web Fonts.
| | 02:09 | It has good forms with some
solid modernist characteristics,
| | 02:12 | but like LTC Bodoni 175, since it's
meant to be a headline font, the letter
| | 02:19 | spacing is little too tight to use in text.
| | 02:23 | Also, when tested cross-browser,
Unna works fine in very large headlines,
| | 02:29 | but when used for smaller headlines,
and for text, it has problems in Windows
| | 02:34 | XP, Opera, and Chrome.
| | 02:36 | The strokes get
inconsistent, and even harder to read,
| | 02:39 | so we'll keep looking.
| | 02:41 | Next we have Vidaloka Regular.
| | 02:44 | This is a great example of a
contemporary modern font. It's really funky.
| | 02:49 | It has the extreme
contrast between thick and thins.
| | 02:53 | It has round terminals, and the thin
flat serifs that we're used to seeing in
| | 02:58 | the modern fonts, but the bowls are slightly
narrow, and the thick strokes are organic.
| | 03:03 | So the letters are less
systematic than a traditional modern font.
| | 03:07 | It's a fine font, it has good spacing,
and the forms work well together, and they
| | 03:11 | make a pleasing system; it's just not
what we're looking for for our project,
| | 03:16 | so we're going to keep looking.
| | 03:18 | This font has a decidedly modern structure,
but it's too heavy, and a little too loose.
| | 03:23 | I'm also not crazy about the lowercase a;
here you can see the aperture is way
| | 03:29 | too tight, and that's makes the
a sort of pop out in the text.
| | 03:34 | And then finally, this modern font,
it's a little too loose, and it's not quite
| | 03:38 | as modern as I'd like.
| | 03:40 | We can see here that the serifs are
flowing into the stems, and the contrast
| | 03:44 | between thick and thin isn't as
strong as I'd like to see in a modern font.
| | 03:48 | So we've looked at six modern fonts,
and haven't been able to find even one
| | 03:53 | that meets our needs.
| | 03:55 | Before we give up, though, we're
going to try one last search on Typekit.
| | Collapse this transcript |
| Using Typekit to find and test web fonts| 00:00 | We've already looked at six modern fonts,
and haven't found one that meets our needs.
| | 00:06 | Before we give up, I want to make one
last attempt at finding a modern font, and
| | 00:11 | we'll do that with Typekit.
| | 00:13 | Typekit has a feature called
Browse Lists up here along the top.
| | 00:19 | The staff at Typekit have created these
lists as a starting place, in case you're
| | 00:24 | not sure what kind of font you're looking for.
| | 00:26 | We're going to use it to see if they
have other suggestions for a modern font.
| | 00:31 | As we scroll down, we can see they
have a category here called Didones, which
| | 00:36 | look decidedly modern, and we can see here
also that LTC Bodoni 175 is in this category.
| | 00:44 | Well, the first modern font was designed
by Firmin Didot, and thus, modern fonts
| | 00:50 | are sometimes referred as to Didones.
| | 00:53 | So this is group of
fonts that we're looking for.
| | 00:56 | So let's go to that list and take a look.
| | 00:59 | The first font is LTC Bodoni
175, which we've already looked at.
| | 01:04 | The second font, Ambroise
STD, is a little too playful.
| | 01:08 | Take a look at the top of that k there.
| | 01:10 | It's beautiful, but not what we're looking for.
| | 01:13 | Teimer Web, we have not used yet,
and that could be a good choice.
| | 01:17 | The thins are a little thicker, but it
might actually help it hold up onscreen.
| | 01:23 | Mittwoch is too playful,
and so is Abril Display.
| | 01:27 | It's a little more subtle here, but you
can see on the terminal of the c and the
| | 01:32 | a the playfulness of those terminals.
| | 01:34 | Abril Fatface is too heavy;
| | 01:37 | we don't want to use that.
| | 01:39 | And also, both of these, the Abril
Display, and the Abril Fatface, have been
| | 01:44 | designed for display.
| | 01:45 | And what we know is that if a font
was designed for display, or for use in
| | 01:50 | headlines, the letter spacing is going to be
a little bit tighter than we want for text,
| | 01:55 | so we'll stay away from those.
| | 01:56 | The last font is Kepler Std,
which we've already look at.
| | 02:01 | So there's one font that we can take a
look at that we haven't used before, and
| | 02:05 | that's the Teimer Web,
| | 02:06 | so let's click through to that.
| | 02:09 | We can see it's included in the Personal plan
or higher, so not everyone has access to it,
| | 02:14 | but at this point we don't have any
other fonts to use, so let's see if this
| | 02:18 | one will work for us.
| | 02:21 | Typekit offers a specimen sheet similar
to the one that I use, and what you do
| | 02:27 | is you make sure you choose the
weight and style that you want to test.
| | 02:31 | Our only options here are Light
and Semi Bold; let's go with Light.
| | 02:35 | We can open the expanded Web font
specimen sheet, and take a look at what it
| | 02:39 | would look like in text.
| | 02:40 | I always find it a little bit hard to
decide whether or not a font is really
| | 02:47 | going to do what I want it to do when
I look at it in this Web font specimen
| | 02:51 | sheet, because the line height
is a little bit tight for me.
| | 02:54 | That's why I take the time to use my own
Web font sheets, but I can see that the
| | 02:59 | letter spacing is good, and the word
spacing is good, and there are no characters
| | 03:03 | jumping out at me when I look at this text,
| | 03:05 | so I know that it's worth
looking at a little bit more closely.
| | 03:10 | We'll close that up, and go
back to the Teimer Web page.
| | 03:14 | Before choosing whether to use a Web
font, we need to know whether or not it
| | 03:18 | will work cross-browser.
| | 03:20 | A quickly way to do that in Typekit
is to look at their browser Samples.
| | 03:25 | They have a number of screenshots
that were taken on different operating
| | 03:29 | systems and browsers.
| | 03:31 | Now, I work on a Mac, and can test Mac
screens more easily, so I always go
| | 03:35 | straight for the Windows, and I click
through to see how the font will look
| | 03:40 | on different browsers.
| | 03:42 | I'm keeping my eye on the 16 pixel
type, because that's about the size we'll
| | 03:47 | probably use, and I can see here in
Internet Explorer 8 that the text breaks.
| | 03:55 | The thin strokes break, so the e
becomes two sides of the e, and the o also
| | 04:00 | breaks into two different shapes;
| | 04:02 | there's a left curve, and a right curve.
| | 04:04 | So unfortunately, we cannot use
Teimer Web as one of one our fonts.
| | 04:10 | I can keep trying, but I know I will
have a problem with this font in text,
| | 04:15 | so I'm not going to use it.
| | 04:16 | But at least Typekit gave us another
option to consider, and it gave us a quick
| | 04:22 | way to look at whether the
option would work for us.
| | 04:25 | So we've looked at seven modern fonts, and
none of them met our needs for this project.
| | 04:30 | I'm not really surprised.
| | 04:32 | Modern fonts require high resolution
technology to show off their elegant,
| | 04:37 | crisp characteristics.
| | 04:39 | We saw some beautifully designed fonts here,
but just none of them worked for the screen.
| | 04:44 | Modern fonts often work best
in headlines; even in print.
| | 04:48 | Part of being a good typographer is
knowing when to try another solution.
| | 04:52 | If a font doesn't work, it doesn't
work, no matter how well-designed it is.
| | 04:57 | Maybe we'll be able to use one of these
modern fonts later in the course when we
| | 05:02 | pair two fonts together.
| | 05:03 | Until then, it's time to
move on to the slab serifs.
| | Collapse this transcript |
|
|
6. Slab Serif FontsIdentifying a Slab Serif font| 00:00 | So far we've covered about 350
years of font design; 350 years of
| | 00:07 | printing dedicated to books.
| | 00:10 | There have been a lot of changes in fonts.
| | 00:13 | Up until now, those changes have been
in response to improved printing and
| | 00:17 | paper-making technology, and of
course, aesthetic approaches to letters.
| | 00:23 | But then we enter the 1800s.
| | 00:26 | The Industrial Revolution meant there
were ready-made goods to sell, and cheaper,
| | 00:30 | faster, printing and paper-making techniques.
| | 00:33 | A more literate workforce meant more
newspapers and magazines, and ads used to
| | 00:38 | sell the ready-made goods.
| | 00:40 | And of course, broadsides like this one
for a benefit concert at Niblo's Garden
| | 00:45 | in New York City in 1835.
| | 00:46 | And suddenly, with all the
advertisements bombarding the average person, there
| | 00:52 | was a need for legible, bold
fonts to catch the reader's eye.
| | 00:57 | Hence, the birth of slab serif fonts.
| | 01:00 | Modern fonts were still in use.
| | 01:02 | You can see some here.
| | 01:04 | All of these distinctive fonts -- modern,
slab serif, and even the wood
| | 01:09 | type we'll look at later in the course --
collide as more advertisements are
| | 01:13 | printed and posted.
| | 01:15 | This was the first time in the history
of type design that fonts are designed in
| | 01:19 | order to catch the reader's eye.
| | 01:22 | Some think of slab serif fonts as a
step backward, because up until this point,
| | 01:27 | fonts became more refined and delicate,
| | 01:30 | but I think slab serifs were necessary.
| | 01:32 | Remember, old style and transitional
fonts might have a regular and italic
| | 01:37 | version, but they didn't have a bold version.
| | 01:40 | Slab serif fonts were used as
the first bold fonts necessary for
| | 01:45 | creating hierarchy.
| | 01:46 | The first slab serif font was
commercially released in 1815 by Vincent Figgins,
| | 01:51 | a British type founder.
| | 01:54 | Figgins was an experienced, talented printer
who ran a shop dedicated to printing books.
| | 02:00 | Broadsides, on the other hand, used slab
serif fonts based on Figgins' work, but
| | 02:05 | were usually printed as
quickly and cheaply as possible.
| | 02:08 | While Figgins released his slab serif
font with the name Antique, slab serifs
| | 02:14 | were commonly called Egyptian fonts.
| | 02:17 | This is because there was a craze for
all things Egyptian after Napoleon's
| | 02:21 | failed campaign to seize Egypt.
| | 02:24 | He may not have undermined
Britain's access to India, but Napoleon's
| | 02:28 | expedition disseminated images and
descriptions of Egypt leading to a
| | 02:32 | fascination with Egyptian culture.
| | 02:35 | Type founders, in an attempt to cash in
on this fascination, called slab serif
| | 02:40 | fonts, which have nothing
to do with Egypt, Egyptian.
| | 02:44 | Slab serif fonts are easily
recognized by their serifs.
| | 02:49 | Slab serifs usually have the same
stroke width as the strokes in the letters.
| | 02:55 | We think of slab serifs as being
square, like those shown here in Rockwell,
| | 03:00 | but they didn't have to be.
| | 03:01 | Officina's slab serifs are slightly
rounder on the corners, while typewriter
| | 03:07 | fonts like Courier have rounded slab serifs.
| | 03:11 | The earliest slab serif fonts have
round bowls, so you'll often see digital
| | 03:15 | versions with a strict geometric structure.
| | 03:19 | But slab serif fonts vary.
Officina Serif has an oval bowl.
| | 03:24 | It also has an open aperture on the e,
and a curve at the foot at the l. Both
| | 03:30 | are humanist characteristics.
| | 03:32 | Finally, the way the bowl meets
the stem on the b creates a new shape;
| | 03:36 | neither round, nor oval.
| | 03:38 | Serifa's bowls, on the
other hand, appear circular,
| | 03:42 | but if you look closely, they're a bit square.
| | 03:44 | Serifa also has variation in its stroke width.
| | 03:48 | Notice how the strokes taper
where the bowls meet the stem.
| | 03:52 | Officina and Rockwell have more
uniform strokes throughout their letters.
| | 03:56 | All three fonts have terminals that,
well, don't have an extra shape to them,
| | 04:02 | except for the extra stoke on the c,
but you'll find many slab serif fonts with
| | 04:08 | ball-shaped terminals.
| | 04:10 | Originally, slab serif fonts where
not intended for large amounts of text.
| | 04:15 | They were heavy, and meant
to catch the reader's eye,
| | 04:17 | but contemporary slab serif fonts
offer a variety of weights and letter
| | 04:22 | structures to choose from, making it
possible to find a legible, comfortable
| | 04:26 | slab serif to use for extended reading.
| | Collapse this transcript |
| Choosing a Slab Serif font| 00:00 | So now that we know what a slab serif
font looks like, we need to pick one to use.
| | 00:05 | First we'll look at Adelle, which
is available on Typekit's trial plan.
| | 00:11 | Adelle serifs have a subtle
angle to them, which is enjoyable.
| | 00:15 | The change in stroke width gives the
font a little more energy, especially when
| | 00:19 | used at headline size.
| | 00:21 | It has a narrower bowl, and a
slightly more open, humanist aperture.
| | 00:26 | The font slightly tighter in text than
I like to see used online, but the large
| | 00:31 | counter forms in the lowercase a
and e help Adelle remain readable,
| | 00:36 | so I'm not going to rule it out yet.
| | 00:39 | If we scroll down, you can
see it has a lovely italic.
| | 00:43 | It has some humanist elements, like the
extended stroke on the f, and the rounded
| | 00:48 | e. This is a nice contrast to the
structure of the slabbed roman forms.
| | 00:54 | Unfortunately, Adelle's bold does not
hold up cross-browser when tested on Typekit.
| | 01:00 | You can see here that the a at 18 points;
the closed counter gets very squished.
| | 01:07 | But luckily Adelle does have a semi-bold
that we could use we needed to,
| | 01:12 | so we won't rule it out,
but let's keep looking.
| | 01:15 | Next is Arvo, which has a rounder
bowl, and more traditional slab serifs.
| | 01:21 | In fact, the slab serifs look very square, and
almost heavier than the strokes in the letters.
| | 01:27 | Arvo feels very solid
compared to Adelle's energy.
| | 01:31 | I like the letter spacing here; it's a
little bit looser, although at this size
| | 01:36 | in text, the word spacing looks a little bit
tight compared to the looser letter spacing.
| | 01:41 | The bold is a little bit too bold for
my taste, although that is a personal
| | 01:45 | preference, but I do think that the counter
forms in the s and the e start to sparkle.
| | 01:51 | Finally, Arvo's weight does
shift when viewed cross-browser.
| | 01:57 | So we can see here at 18 pixels, the
regular weight of Arvo looks quite bold, and
| | 02:02 | at 16 pixels, it looks quite light.
| | 02:05 | So let's keep looking.
| | 02:07 | Museo Slab is a contemporary slab serif font.
| | 02:10 | It has square slab serifs, but it also
has a bit of curve at the bottom of the
| | 02:15 | l, like what we saw
earlier on the Officina Serif.
| | 02:19 | The bowl is round, and the
bold is good; not too heavy.
| | 02:23 | And it comes in a wide variety of weights, so
we could go heavier or lighter if we wanted to.
| | 02:29 | It has good word spacing, and good
letter spacing, and it holds up cross-browser,
| | 02:34 | and it's also available in
the trial plan on Typekit,
| | 02:38 | so this might be the font we're going to use.
| | 02:40 | I do sometimes get concerned about
fonts with circular bowls, though, because
| | 02:45 | they're wider, and will fit
less words on a line of text.
| | 02:50 | I know the line length on our
Springfield, Rhode Island site is short, and Museo
| | 02:55 | might be too wide to fit comfortably.
| | 02:58 | So let's look at a couple of
other fonts first, just to be sure.
| | 03:01 | This slab serif has a lot of potential.
It has good forms, and a good spacing, and
| | 03:07 | the bowl isn't too big, but it's way
too heavy; it looks like it's a bold, and
| | 03:11 | it's not. This is the regular weight.
| | 03:14 | This slab serif, it has a better
weight for text, but it feels a little too
| | 03:19 | square to me, The squareness
sort of calls attention to itself.
| | 03:23 | I like how the bowls are a little
narrower, so we could fit more words on a line,
| | 03:27 | but when I read the text, I
find myself thinking, Wow!
| | 03:31 | This is a really square font.
| | 03:32 | And I find myself paying more
attention to the shapes of the letters than to
| | 03:36 | the words themselves,
| | 03:37 | so I think this font is better for a
display font; it's great for headlines.
| | 03:41 | So we've look at five slab serif
fonts, and I think Museo Slab is our best
| | 03:47 | bet for this project.
| | 03:49 | It may be too wide for our layout, but we
won't know until we try, and if for some
| | 03:54 | reason it doesn't work, Adelle
would be a good second choice.
| | Collapse this transcript |
| Deleting a font from your Typekit| 00:00 | Now that we've picked a slab serif font,
it's time to apply it to our Web page.
| | 00:05 | In order to do this, we need to add Museo Slab
to our Typekit, and then apply it to our site.
| | 00:12 | We'll have to do it a bit differently this
time, because we've already got two fonts
| | 00:16 | in our trial plan kit.
| | 00:18 | So first open up typekit.com, and
sign in if you aren't already signed in.
| | 00:24 | You can see we're at the Choosing and
Using Web Fonts Kit; we have it selected.
| | 00:29 | Now let's find Museo Slab, and
click the button to add it to our kit,
| | 00:36 | and you'll see a message pops up: With a
Trial Plan, you may only use 2 fonts at a time.
| | 00:42 | So we need to remove a font from our kit.
| | 00:45 | Let's launch our kit editor
and remove one of the fonts.
| | 00:50 | I'm going to remove Calluna, simply because
it's not the most recent font that we used.
| | 00:55 | You'll be asked to confirm that you
want to delete it, and now we have only
| | 01:02 | one font in our kit.
| | 01:04 | Whichever font you delete will no
longer work in the site you use this kit for,
| | 01:09 | but you can always go back and add
the font again if you want to use it.
| | 01:14 | We need to click Publish, so the change
is published with Typekit, and they know
| | 01:19 | to remove Calluna from our kit.
| | 01:21 | Now that I've deleted Calluna, I
want to show you a couple of things.
| | 01:25 | First, something I find helpful.
| | 01:29 | We can go and find Calluna, and
we can add it to our Favorites,
| | 01:35 | so if ever we want to add it
back to our trial kit again, we can.
| | 01:39 | It's now a favorite, and so if we go
in Browse Fonts, and go to My Favorites,
| | 01:45 | there's Calluna; it's just ready to be
added right back to your kit, and you
| | 01:49 | could do that right from this page.
| | 01:51 | The other thing that I want to show
is, to be clear that Calluna will no
| | 01:55 | longer work on previously made pages,
let's open up a tab, and go to a previous
| | 02:01 | page that we used Calluna on.
| | 02:03 | Mine was at goodwebfonts.com/lynda.
| | 02:07 | If I Refresh this page, and our page
is still using Calluna, Typekit hasn't
| | 02:13 | caught up with us yet.
| | 02:14 | Sometimes it takes us few minutes
for changes to take effect, even if we
| | 02:19 | have clicked Publish.
| | 02:20 | So we'll just have to wait a few
moments, and try refreshing it again,
| | 02:25 | and we can see that the page
is no longer using Calluna.
| | 02:29 | If we zoom in, we can see that the
crossbar on the e is no longer rising.
| | 02:36 | The page has reverted to Georgia,
which is our first fallback font.
| | 02:41 | We'll go back to full size here.
| | 02:44 | So, by removing Calluna from your kit, you've
broken the link to it, and it no longer works.
| | 02:50 | If you work with Typekit's trial plan,
you need to keep track of what fonts
| | 02:54 | you're using on your entire site, and
don't plan to use more than two fonts
| | 02:59 | at the same time.
| | Collapse this transcript |
| Exploring a font with multiple weights and styles| 00:00 | Now that we've cleared one of the
fonts out of our Typekit, it's time to add
| | 00:05 | Museo Slab, and apply it to our Web page.
| | 00:08 | So let's find Museo Slab, and add it to our kit.
| | 00:13 | Now, you can see that Museo Slab has more
weights than we've used thus far in the
| | 00:18 | course; 100, 300, 500, 700, 900, and
1000, and these numbers don't match up
| | 00:27 | with what we've been used to using.
| | 00:29 | We've been using 400 for regular, and 700
for bold, but Museo Slab doesn't have a
| | 00:35 | 400. It has a 300, and a 500.
| | 00:38 | So how do we know what weights to use?
| | 00:41 | Well, we don't, until we test them.
| | 00:44 | We can narrow it down a bit, though. 100
is going to be very light. I wouldn't use
| | 00:49 | it unless I was using very, very large text.
| | 00:53 | And the same is true with the 1,000.
| | 00:55 | It's going to be very heavy, and I wouldn't use
it unless I was using very, very large text.
| | 01:00 | So probably the 300 or 500 could work
for our text weight, and we know that in
| | 01:07 | our text, we also use an italic, so we
should also select the 300 and 500 Italic.
| | 01:13 | We're going to be using a bold as well.
| | 01:15 | We're not sure if the 700 will work, or
the 900, because it depends on whether we
| | 01:23 | use 300 or the 500 for the text.
| | 01:25 | So let's go ahead and
select both the 700 and the 900.
| | 01:29 | Now, hopefully we'll also use sort of a
semi-bold italic for that sentence about
| | 01:35 | the Bay Road businesses.
| | 01:37 | Now again, either the 500 or the
700 Italic would probably work.
| | 01:43 | So, I'd keep both of them selected.
| | 01:45 | We have a lot of weights and
styles here; we won't use them all,
| | 01:50 | and so in the end we'll need to come
back and clear some of these out to keep
| | 01:54 | our kit size as small as possible.
| | 01:56 | Right now our Kit Size is less then
400K, so we can still use it as is while
| | 02:01 | we test these fonts.
| | 02:03 | Let's go ahead and click
Publish so the changes take effect,
| | 02:06 | and then the next thing we need
to do is start our HTML document.
| | 02:11 | Let's toggle over and open up the
original Georgia site, and open it into your
| | 02:16 | text editor with a right-click.
| | 02:21 | I use TextWrangler, and let's save this.
| | 02:28 | I'm going to save it as museo_slab_tk,
because we are using a Typekit font, _site.html.
| | 02:38 | And again, you can save it in the same
folder; we won't be rewriting anything.
| | 02:44 | And I like to see my files here, and
then open it in the browser to see what we
| | 02:50 | have so far. And so far it is using Georgia,
because we haven't changed the font yet.
| | 02:56 | So the first thing we need to do, go
back into Typekit, launch my kit editor,
| | 03:02 | get the embed code, select and Copy
that. I'm going to toggle over to my text
| | 03:10 | editor, and paste it, and
then back over into the kit.
| | 03:15 | Let's get our font-family name here:
museo-slab. Back in the TextWrangler,
| | 03:22 | let's set our font-family for museo-slab,
with a comma; that way we have a font
| | 03:31 | stack started, and now let's take a look at
getting the weights that we want into the text.
| | 03:38 | Let's start with 300; the
lighter weight font for Museo Slab.
| | 03:42 | We'll use that for most of our text,
and then for the things that are bold,
| | 03:48 | let's try doing a 700, because we're
used to using the 700 for our bolds.
| | 03:55 | And then the strong that I've been
using for the Bay Road businesses, let's try
| | 04:00 | making that a 500, and we'll think
of that as being sort of semi-bold.
| | 04:03 | Let's go ahead and save this, and
because we're using a Typekit font, we do have
| | 04:09 | to load it onto our server.
| | 04:11 | There's our museo_slab, over onto the
server, and then back into Firefox, or
| | 04:18 | whatever browser you are using;
let's take a look at that online.
| | 04:22 | Okay, looking at this, I would say
that using the 300 weight is a little bit
| | 04:28 | too light for the text.
| | 04:29 | It just looks a little weak to me.
| | 04:31 | I'm thinking maybe we need to
go up to the 500 for the text.
| | 04:35 | I'm not sure though, but we are
going to try it and see what happens.
| | 04:39 | One of the things that I do when I'm
trying to make decisions between weights
| | 04:43 | or fonts is I take screenshots, so that I can
go back and refer to them later and compare them.
| | 04:49 | So I just used Shift+Command+4 on
the Mac, and I'm going to drag this.
| | 04:54 | So now I have a screenshot of
this page that I can go back to,
| | 04:58 | and let's go change those weights.
| | 05:00 | I'm thinking that the 300 works really well
for the h1 and the h4, but just not for the text,
| | 05:07 | so let's just try changing that, and
then currently the Bay Road businesses
| | 05:11 | sentence is set at a 500,
| | 05:14 | which means it will no longer pop out,
| | 05:17 | so we're going to have to change that to a 700.
| | 05:20 | Let's go back into our universal
selector, let's change that to 500, then
| | 05:26 | let's change everything that's bold,
which would be our h4 to a 900, and then
| | 05:32 | let's change our strong to a 700.
| | 05:34 | You can see how this looks.
| | 05:37 | And again, we need to put it
onto our server, and refresh it.
| | 05:43 | The text looks better, and oh,
I meant to keep that as a 300.
| | 05:47 | I can go back and change
that; that's not a problem.
| | 05:49 | The text looks better, but the
900 on the bold is just too heavy.
| | 05:53 | And in fact, we're going to want
to go back and change that to a 700.
| | 05:57 | I don't even need to check my screenshot.
| | 05:59 | I can see that e is really filling in there.
| | 06:03 | Now, if you're looking at this on
Internet Explorer, you're not seeing as many
| | 06:08 | weights and style
as I'm seeing on my screen,
| | 06:11 | and that's because we are now using more
than four weights and styles on this page.
| | 06:16 | So what we need to do is we need to
go in and use the variation-specific
| | 06:20 | font-family names for this site.
| | 06:22 | We're going to take a moment.
| | 06:24 | I'm going to ask you to
add them to your syntax.
| | 06:27 | We've already covered this.
| | 06:28 | If you need a refresher on how to use them, we
covered it in the chapter on Venetian Fonts.
| | 06:32 | So when you've got your variation-specific
font-family names done, meet me back
| | 06:37 | here, and we'll keep exploring Museo sans.
| | 06:41 | Okay, so we've added our
variation-specific font-family names.
| | 06:47 | So everything should be working on
Internet Explorer, but there are still some
| | 06:50 | changes we need to make to how the page looks.
| | 06:53 | The h1 and h3 are a
little too heavy, as is the h4.
| | 07:00 | So let's go back into our TextWrangler,
or whatever text editor you are using,
| | 07:06 | and on the h1, we want to make this
300 weight, because we're using the
| | 07:12 | variation-specific font-family names.
| | 07:15 | I just copied and pasted a
line from my universal selector.
| | 07:18 | I need to change that to an n3, because
we're using 300, and add the font-weight
| | 07:24 | 300 here, and I will want to do the same;
| | 07:29 | I can just select and copy this for my h3s.
| | 07:33 | The h4 is currently set at 900, which is
too heavy, so we're going to make that a
| | 07:42 | normal style of 700.
| | 07:44 | So change that to a 7, and 700.
| | 07:47 | Save this, reload it onto the server,
refresh it; that looks much better.
| | 07:56 | Now, I'm a little bit concerned about
the contrast between the headings here:
| | 08:01 | the h4, and the text.
| | 08:04 | The text is a little
heavier than we're used to using.
| | 08:06 | Usually it's set a 400
weight, and this is a 500 weight.
| | 08:10 | So what I'd like to do is bump our h4
up just a little bit, just a pixel
| | 08:14 | perhaps, and see if that helps.
| | 08:16 | It's currently at 16; let's make it 17,
and save it, and reload it, and refresh it,
| | 08:27 | and that is a little bit better.
| | 08:29 | Now that we have our weights and styles
set, and we know which ones we're using,
| | 08:33 | we do need to go back into our
Typekit, and remove the ones we're not using.
| | 08:38 | In Museo S,lab, we are not using the
300 Italic and we are not using the 900.
| | 08:47 | This will help make our site run a
little bit more smoothly, a little bit
| | 08:52 | more quickly, when we get rid of these fonts.
And that lowers our Kit Size; that's great.
| | 08:56 | We'll Publish it, and you'll notice I
kept the 700 Italic there, even though we
| | 09:02 | haven't used it yet.
| | 09:03 | It reminded me that we want to add that to
our sentence about the Bay Road businesses.
| | 09:08 | Let me go ahead and do that
now. On the strong,
| | 09:12 | it's currently just a Bold; let's
make that an Italic Bold, so that that
| | 09:16 | sentence will pop out a little bit more.
| | 09:20 | Save it, reload it to our server,
and refresh it, and that's good.
| | 09:28 | We have a little bit more contrast between
that heading and that sentence. All right.
| | 09:32 | So everything looks good, and our
Typekit has been reduced, so that it'll load
| | 09:37 | more smoothly, and it looks like we're done.
| | Collapse this transcript |
| Looking at how using a Slab Serif font affects the look and feel of a web page| 00:00 | Now that we've finished the Museo Slab
site, let's take a look at how using a
| | 00:04 | slab serif font affects the
look and feel of the site.
| | 00:08 | First, I want to show you one
problem with using Museo Slab. It's not a
| | 00:13 | problem with the font, but a problem with using
the font in this site the way it is designed.
| | 00:19 | First you can see that the City
Council Minutes link is too long.
| | 00:23 | It's almost hitting the edge of the column.
| | 00:25 | You can also see that we have a
lonely word by itself in the last article.
| | 00:31 | Then finally, we can see the same thing
has happened here with the word Pond in
| | 00:36 | the Raynor Pond Clean Up event.
| | 00:39 | Now here we also get the problem where
this creates a white gap, which starts
| | 00:44 | to visually separate the Date, Time, and Place
information from the description of the event.
| | 00:51 | This is all happening
because Museo Slab is a wider font.
| | 00:55 | It has a wider, rounder bowl.
| | 00:57 | It takes up more space, so
less words fit on each line.
| | 01:02 | If we compare it to another slab serif
font, Adelle, which has a narrower bowl,
| | 01:08 | we can see that Adelle
doesn't have any of these problems.
| | 01:11 | There is fine space after this link.
| | 01:15 | The word shine is not by itself.
| | 01:18 | Unfortunately, though, we can see we
do still have it with the word Pond.
| | 01:22 | If I were going to use either of these
fonts, I would slightly change the layout
| | 01:27 | of the page to make sure that my words
all fit on the lines I expect them to.
| | 01:32 | Now, with sites like this, where different
events and different articles are going
| | 01:36 | to go up each month, you
can't control everything,
| | 01:39 | but I would try to find the best line
length possible to work with one of these
| | 01:44 | fonts in order to minimize this happening.
| | 01:46 | Now let's take a look and compare
these two fonts a little bit more.
| | 01:51 | You don't have the Adelle page yet.
| | 01:54 | We did not make it in this course.
| | 01:55 | I made it independently, just for
comparison purposes, though I do include it
| | 02:00 | in the final files.
| | 02:02 | We can see that both fonts have the light
version for the heading, which is very nice.
| | 02:07 | Both use bold, Adelle is using a semi-
bold, and we can see that the text for
| | 02:14 | Adelle, if we just relax our eyes,
and don't look at the detail,
| | 02:17 | it feels a little bit more
textural, and a little bit more humanist.
| | 02:22 | You may remember that Adelle
has a slight angle on the serifs.
| | 02:27 | It has the slightly narrower bowl,
and it also has the slightly more open
| | 02:32 | apertures, and all these things help to
make Adelle look a little bit more humanist.
| | 02:38 | We can also see that Adelle's
italic feels a little more humanist.
| | 02:43 | It has some very nice details.
| | 02:45 | It has the extended stroke on the f,
and it has the rounder, more italic e when
| | 02:52 | compared to the Museo Slab.
| | 02:55 | We can also see that Adelle
has the old style figures.
| | 02:58 | They're not true old style figures,
but the 6 slightly goes above the meanline,
| | 03:04 | and the 9s, and the 5, and the 7
slightly go below the baseline,
| | 03:09 | and we don't see that in Museo
Slab, which has the lining figures.
| | 03:15 | One problem with Adelle is that its
bold does not hold up cross-browser.
| | 03:20 | That's why we're using the semi-bold,
and the semi-bold does have some
| | 03:24 | problems at larger sizes,
| | 03:27 | but we're using smaller sizes,
so we're okay.
| | 03:31 | We're not going to have a problem with the
semi-bold. We could use either of these fonts.
| | 03:35 | I do also want to take a moment to
compare Museo to the PT Sans that we used
| | 03:42 | in the last chapter.
| | 03:44 | The PT Sans looks much lighter, and much
more textural. It has more thicks and thins.
| | 03:51 | It has serifs that are not slab
serifs, which helps with the texture.
| | 03:56 | You can also see that the italics and
the PT Serif feel more pen-formed than the
| | 04:01 | italics on the Museo Slab.
| | 04:04 | This is interesting, because the PT
Serif italics look less pen-formed than some
| | 04:10 | of the earlier fonts, like the Crimson Text.
| | 04:13 | You could use either of these fonts as well.
| | 04:16 | I think, though, that I would be interested
in using one of the slab serif fonts.
| | 04:20 | We have to be a little bit
more careful with Adelle.
| | 04:23 | You may remember, I was concerned that
Adelle has a slightly tighter letter
| | 04:28 | spacing, but it would work on this site
because the articles are short. We very
| | 04:34 | rarely ask the readers to read
more than a sentence or two at a time.
| | 04:38 | If the site were using longer text, or
more theoretical texts, I think that this
| | 04:44 | type is a little bit too tight, and
I would recommend the Museo Slab.
| | 04:48 | But as I said, I do enjoy
the slab serif fonts.
| | 04:51 | There's a nice subtle
historical connection here.
| | 04:55 | They work well with the picture of the
renovated mill up at the top of the page.
| | 05:00 | The slab serif fonts would have been
used in the early to mid 1800s, and the mill
| | 05:06 | would have been built
in the mid to late 1800s.
| | 05:09 | And in fact, many old mill buildings
in the Northeast have these old stone
| | 05:13 | signs that are built into the structure, and
many of the signs use slab serif lettering.
| | 05:19 | So most people probably won't even
notice this historical connection, because
| | 05:23 | they don't pay attention to
lettering on signs,
| | 05:25 | but at the same time, we often
feel an intuitive connection.
| | 05:30 | So if someone has seen an old mill
building in a photo, or a movie, they could be
| | 05:36 | influenced by this font, with this image.
| | 05:39 | So I'd go for a slab serif.
| | Collapse this transcript |
|
|
7. Other Serif FontsIdentifying "Other" Serif fonts| 00:00 | Up until now, the development of
fonts has been pretty straightforward.
| | 00:05 | The earliest fonts reflected forms
created by writing with pen and ink.
| | 00:09 | Later fonts were crisper and more stylized.
| | 00:13 | Finally, slab serif fonts were some of
the first fonts created for marketing
| | 00:18 | purposes, and were meant to catch the
eye, rather than create an enjoyable
| | 00:23 | reading experience.
| | 00:24 | Now we're going to look at other serif
fonts; fonts that don't easily fall into
| | 00:30 | any of the previous categories.
| | 00:33 | In order to this, we're going to skip about a
150 years, and dozens of styles of font design.
| | 00:39 | Some, like sans serif, wood type, and art
deco fonts we'll cover later in the course.
| | 00:46 | The rest, in our quest for readable
fonts appropriate for extended text on the
| | 00:51 | Web, we're going to let go.
| | 00:53 | If you're interested in the variety of
fonts designed from the mid 1800s to the
| | 00:57 | late 1900s, I highly
recommend A Typographic Workbook:
| | 01:02 | A Primer to History, Techniques, and Artistry.
| | 01:06 | In the late 1980s, with the advent of the
personal computer, font design exploded.
| | 01:12 | Anyone with the right software, and
some knowledge of how letters work in a
| | 01:16 | system could create a typeface.
| | 01:19 | Some font designers pushed against the
clean, crisp typography made possible
| | 01:24 | by design software, and purposely
designed fonts that were damaged or defective.
| | 01:30 | Some font designers pushed against
historic approaches to font design, and
| | 01:34 | dismantled traditional forms, slicing
and dicing, and recombining letter parts.
| | 01:40 | Other font designers dedicated their
time and considerable talents to bringing
| | 01:45 | historic fonts, like Jensen, Caslon, and
others we've seen throughout the course
| | 01:50 | into the digital era.
| | 01:51 | Still others embrace historic
approaches to font design, but searched for ways
| | 01:57 | to merge traditional
approaches and letter forms.
| | 02:00 | This approach was less about slicing and
dicing, and more about evolving shapes and spaces.
| | 02:06 | For example, this is Tisa Web
Pro, a digital 21st century font.
| | 02:12 | The designer was inspired by 19th
century slab serif type, and wanted to develop
| | 02:18 | a softer more dynamic version.
| | 02:20 | If you look closely you can see both the
slab serif and humanist elements in Tisa.
| | 02:27 | Tisa Web Pro has substantial serifs.
| | 02:30 | They're slab like, and they remind me of
the serifs we saw in Museo Slab, though
| | 02:34 | Tisa serifs feel more chiseled.
| | 02:36 | Tisa Web Pro has strokes that are not monoline.
| | 02:39 | They have slight changes in thick and
thin, but the changes are subtle making
| | 02:44 | the strokes feel more uniform.
| | 02:46 | Some of Tisa's terminals
look like the stroke just ends.
| | 02:50 | There isn't a pen form shape involved.
| | 02:52 | When the terminal does have a
shape, it references the slab serif.
| | 02:56 | These characteristics make Tisa
Web Pro feel like a slab serif font.
| | 03:01 | Yet, Tisa has a double decker g, which
is an older approach to the letter g,
| | 03:07 | and its closed counter on the lower
case a is smaller, which is also an old
| | 03:11 | style characteristic.
| | 03:13 | Tisa Web Pro's aperture on the e is
more generous than a slab serif's aperture,
| | 03:18 | and it's bowl on the b is less structured.
| | 03:21 | It has a suggested stress.
| | 03:23 | Finally, the spurs on Tisa's
a and u flip up at the end.
| | 03:27 | These are the subtle characteristics
that make Tisa Web Pro feel more like a
| | 03:32 | combination of two different
historical approaches to type design.
| | 03:37 | Next, let's look at Le Monde
Courrier, another 21st century font.
| | 03:41 | With Le Monde Courrier, the designer
was challenged to create a style halfway
| | 03:45 | between writing and printing.
| | 03:46 | So again, we'll see a meld of
structured in humanist forms.
| | 03:51 | Le Monde Courrier's g is single-decker,
like we see in Museo Slab.
| | 03:56 | The close counter on its a is generous,
and its terminals, while feeling slightly
| | 04:00 | pen-formed, do not have an extra
shape at the end of the stroke.
| | 04:05 | While Le Monde Courrier is not monoline,
the contest between thick and thin is subtle,
| | 04:10 | so the strokes feel more
substantial than old style fonts.
| | 04:14 | All this characteristics relate back
to a later font, to the slab serif fonts,
| | 04:18 | but the serifs are pen-formed, and the
bold on the b has an implied stress.
| | 04:25 | The spurs on the a and u flip up.
| | 04:29 | So again, here is a font with
humanist old style characteristics.
| | 04:33 | In fact, Le Monde Courrier goes so
far as to have an italic e, though it
| | 04:38 | feels almost monoline.
| | 04:40 | Once again, we have a font that
suddenly combines aspects of slab serif's from
| | 04:44 | the mid 1800s with old style
fonts from the 1600 or 1700s.
| | 04:50 | And yet, if we compare the two fonts,
they look quite different from each other.
| | 04:54 | They have combined the slab and the old
style characteristics in different ways.
| | 05:00 | While some of the serif fonts
available for Web type fit within the old style,
| | 05:04 | transitional, modern, and slab serif
classifications, most don't. Since the 1980s,
| | 05:11 | font designers have been using vector-based
software, which allows them to merge
| | 05:16 | old approaches, and create new forms.
| | 05:18 | Knowing what kind of characteristics
you're looking for will help you narrow
| | 05:23 | your choices as you
search for a new font to use.
| | Collapse this transcript |
| Choosing "Other" Serif fonts| 00:00 | So now that we know what an other serif
font looks like, we need to pick one to use.
| | 00:06 | First, we'll look at Tisa Web Pro.
| | 00:08 | When we compare it to Georgia, Tisa is
more monoline, although the structure
| | 00:13 | is similar to Georgia.
| | 00:15 | We can look at the a and the e and see
that they have similar shapes, though
| | 00:20 | Tisa has a slightly wider aperture.
| | 00:23 | We can also see that the b has a
similar shape to Georgia's. So when we see
| | 00:28 | Tisa in text, we'll expect it to hold up about
the same as Georgia does, even at smaller sizes,
| | 00:36 | and even though Tisa has a sort of slab
serif. Tisa has a great bold, it's not too
| | 00:41 | strong, and it also has -- if we
scroll down here -- a nice italic.
| | 00:47 | It stays open, and it's not too narrow.
| | 00:50 | I've looked the Typekit, and
Tisa works very well cross-browser.
| | 00:54 | This would be a great font to use.
| | 00:56 | Unfortunately, Tisa is in the
Typekit's Personal plan or higher,
| | 01:01 | so it's not available
unless you purchase a plan.
| | 01:05 | So let's keep looking.
| | 01:07 | Next, we'll look at
Le Monde Courrier in text.
| | 01:11 | Notice the curved, almost italic e. The
rest of the font is more structured, but
| | 01:17 | the e doesn't pop out, and it doesn't
feel like it's out of place in the system.
| | 01:21 | One of the reasons why the e continues
to work in the system is because that
| | 01:25 | it remains monoline.
| | 01:27 | You'll also see that humanist forms
have been incorporated in other letters.
| | 01:32 | For instance, there's a nice curve on
the bottom of the i. If you look in the
| | 01:37 | text, you'll see that
| | 01:38 | that curve is also in the lower case l.
| | 01:41 | The letter spacing is a little too
tight for my personal preference, but not so
| | 01:46 | tight that we'd lose legibility.
| | 01:48 | Overall, it's a really good font.
| | 01:50 | I used Typekit to look at how it
holds up cross-browser, and there are more
| | 01:55 | inconsistencies than in some of
the other fonts I've recommended,
| | 01:58 | but they're within range,
and let me show you that.
| | 02:01 | So here we're looking at Internet
Explorer 8 on Windows XP, and you can see that
| | 02:07 | we're losing a little bit of
the e in the 16 and 14 pixel size.
| | 02:12 | But we're keeping most of the
bold, and most of the crossbar,
| | 02:16 | so those forms stay recognizable
as an e, so that's within range.
| | 02:22 | Here's an example of a
screenshot from my system.
| | 02:25 | I'm working on Mac in Firefox,
| | 02:28 | and you can see how that e
looks when I see it on my system.
| | 02:31 | Then here on XP, the letterforms do get
lighter, as usual; we'd expect to see this.
| | 02:39 | Yet we don't lose any
of the e in 16 or higher.
| | 02:43 | It starts to almost disappear in the
14, but it's still there, it's still
| | 02:47 | legible, it's still readable as an e.
| | 02:49 | Then if we look at Safari on Vista, we
see that the letters actually get heavier,
| | 02:56 | but they're still legible.
| | 02:57 | They're not a full bold.
| | 02:58 | Now, there are only a handful of
fonts that don't have at least some
| | 03:03 | inconsistency across browser.
| | 03:04 | Le Monde Courrier's shifts in weight
are all within an acceptable range.
| | 03:09 | So again, even though there are these
inconsistencies, I would recommend using this font.
| | 03:14 | It holds up fairly well cross-browser.
| | 03:17 | Unfortunately, it's in the
Personal or higher plan on Typekit,
| | 03:21 | so we're not going to
use it for this course,
| | 03:24 | so we'll keep looking.
| | 03:26 | Next we have Merriweather, which
is available via Google Web Fonts,
| | 03:30 | so it's a font I know everyone can use.
| | 03:33 | I've tested it cross-browser, and it
holds up beautifully. It's a great font.
| | 03:38 | I enjoy Merriweather's serifs.
| | 03:40 | Notice that the head serif on the h is
wedge shaped, yet the foot serifs, while
| | 03:45 | they have a slight angle, are almost flat.
| | 03:48 | They almost look like thin slab serifs.
| | 03:51 | At the same time, the wedges do not get
too big in overpowering in the text, and
| | 03:57 | the lighter foot serifs don't get lost.
| | 03:59 | The font designer, Eben
Sorkin, found a good balance here.
| | 04:04 | One of the things I love about
Merriweather is how we see two approaches to type
| | 04:08 | in a single letter: the older wedge
shaped serif at the top, and the almost slab
| | 04:14 | serif at the bottom. Where in Le Monde
Courrier, we saw different approaches
| | 04:18 | between letters -- something more
humanist, versus something more monoline --
| | 04:25 | in Merriweather, we see it
within the same letters.
| | 04:27 | I also enjoy Merriweather's lower case a.
It has a very generous closed counter,
| | 04:34 | and a very generous aperture.
| | 04:36 | If we read the first two words in the
text, For decades, we can really see how
| | 04:41 | that a holds up in the text.
| | 04:43 | It just remains open and lovely.
| | 04:45 | Merriweather also has a good bold.
| | 04:47 | It doesn't get too heavy;
I'm always looking in that.
| | 04:50 | But the only problem with this
font is it does not have an italic.
| | 04:54 | Our site uses italic to create some
mid-level of emphasis, especially on the
| | 05:00 | quote about the library.
| | 05:01 | Now, we don't use a lot of italic in our page,
| | 05:04 | so we might be able to
get away with not using one.
| | 05:07 | I'd have to try it before I knew for sure.
| | 05:09 | Either way, I still wish this font had an italic.
| | 05:12 | It's a lovely font, and I would definitely
use it more if it had a couple more styles.
| | 05:17 | Next, let's look at Meta Serif Web Pro.
| | 05:20 | Again, it has an old style pen-formed serif.
| | 05:23 | Looking at the lower case b in the title
here with the Web Pro, we can see the
| | 05:29 | head serif is angled at the top, and not flat.
| | 05:32 | But at the same time, when we look at
the bowl of the b, we can see that the
| | 05:38 | stress is up and down,
| | 05:39 | while the heaviest part of the
stroke is to the outside of the bowl.
| | 05:43 | So it has a more transitional
approach to the bowl, and more old style
| | 05:47 | approach to the head serif.
| | 05:49 | And you can really see that if you
take a look at the b side by side with
| | 05:53 | Georgia's here, because
Georgia is a transitional font.
| | 05:57 | Meta Serif Web Pro has these funky
almost chiseled square terminals.
| | 06:02 | You can see it here in the f.
This is hard to pull off.
| | 06:06 | It stays really unique looking at large sizes --
| | 06:10 | we can see one here at the a as well --
but then when we look at the text, they
| | 06:14 | don't jump out at us.
| | 06:15 | They don't take over in the text.
| | 06:17 | It has a good bold; not too heavy,
| | 06:20 | and if we scroll down, we can see
that it also has a nice italic.
| | 06:24 | It might be a little bit narrower than
I would usually personally prefer, but
| | 06:28 | that's a personal preference.
| | 06:29 | It's not a bad italic.
| | 06:31 | And I've tested the font cross-browser,
and it holds up beautifully.
| | 06:35 | Now, Meta Serif is a font
that was designed for print,
| | 06:39 | so I've been familiar with it since the 1990s,
| | 06:42 | but what we're looking at here is
not just Meta Serif saved for the Web.
| | 06:47 | The designers and their team went
in, and they re-hinted everything,
| | 06:50 | so it holds up better
onscreen and cross-browser.
| | 06:52 | You'll notice they even changed the
name by adding the word Web to this
| | 06:57 | version of the font.
| | 06:59 | Please do not assume that just because
a font works well in print, or on your
| | 07:03 | own system, it will hold up cross-browser.
| | 07:06 | I know I sound like a broken record,
but take the time to test new fonts.
| | 07:09 | Some fonts, even absolutely beautiful
ones, if they're poorly hinted, they turn
| | 07:15 | into barely legible black and
white patterns on some of the browsers.
| | 07:19 | But this one, FF Meta Serif Web Pro
works, and I would definitely recommend it.
| | 07:25 | And of course, it's only available in
the Portfolio plan and higher on Typekit,
| | 07:30 | so not everyone has access to it,
so we won't use it for this course,
| | 07:34 | but I wanted you to know about it.
| | 07:36 | I'd also like to show you a couple of
things to avoid when choosing in other
| | 07:40 | serif font for text.
| | 07:42 | I've been talking about merging
different approaches to font design.
| | 07:46 | In this one, the letters are almost
sliced and diced, rather than showing a gentle
| | 07:51 | combination of characteristics.
| | 07:54 | Now, this does result in a unique font
that might be just for what you're looking
| | 07:58 | for for the headline,
| | 07:59 | but you do not want to use this font in text.
| | 08:03 | The letters are just too different from
each other. We can't help but notice
| | 08:07 | that angular foot serif on the t. You
see it here in the heading, and then it
| | 08:11 | also will jump out at us in the
text, and the f also jumps out.
| | 08:15 | It looks like a crook.
| | 08:17 | So when elements of the letters get
this varied, and they call out to the reader,
| | 08:21 | and draw attention away from the
text, it just slows the reader down.
| | 08:25 | They could stop reading, and
they might leave the page,
| | 08:28 | so it's better to choose a text font
that has a little bit more flow, and doesn't
| | 08:33 | have quite so many unique letters in it.
| | 08:35 | Now, on the subtler note, I also
wanted to point out this font.
| | 08:40 | This font also seems to be sliced and diced.
| | 08:43 | The overall structure of the letters
feel transitional, and the thick and thins
| | 08:48 | have quite a bit of contrast, and the
head serifs are thinner and flatter than
| | 08:52 | what we would see in an old style font,
| | 08:55 | but they've incorporated
wedge-shaped serifs on the bottom.
| | 08:58 | So those feel a little bit bottom
heavy when we see this font is a heading.
| | 09:03 | In addition, in order to make this font
feel a little bit older, the designer went
| | 09:08 | in and added terminals
where we don't usually see them.
| | 09:11 | For example, here at the bottom of the
e, and then also here on the c. You can
| | 09:17 | the difference between this font and Georgia.
| | 09:21 | So those extra terminals do start to
pop out it does a little bit if we look at
| | 09:26 | the word here, the, we can see that e coming out.
| | 09:29 | Then, in addition, they added a similar
terminal on the f, but needed to lighten
| | 09:35 | it up and reduce the weight of the
stroke there on the f. So the f starts to
| | 09:40 | feel a little wimpy in text.
| | 09:43 | You can see it here with the word fabric.
| | 09:45 | So after looking at all of these
other serif fonts, we are going to use
| | 09:51 | Merriweather in our site.
| | 09:53 | It is a lovely font, and
it is one of my favorites.
| | 09:57 | I was excited to see it's available on
Google, and was even more excited to see
| | 10:01 | it holds up cross-browser.
| | 10:02 | So I can use it with confidence.
| | 10:05 | It doesn't have an italic, but
we'll just consider that a challenge.
| | 10:09 | I know we can make it work.
| | Collapse this transcript |
| Using a font without an italic| 00:01 | We're going to use Merriweather for our site.
| | 00:03 | It's available from Google Web Fonts.
| | 00:05 | I'm not going to go into the
details of how to get the Google Web Fonts
| | 00:10 | syntax into your document.
| | 00:11 | We covered that in the old style chapter.
| | 00:14 | But you can open the exercise file
I've created called merriweather_site.html
| | 00:21 | in our text editor.
| | 00:22 | You can see I've added the Google
syntax, I've added Merriweather as our font
| | 00:28 | family, and I've changed all
the font weights appropriately.
| | 00:32 | Now let's take a look at it in our browser.
| | 00:34 | The size looks pretty good, and
that's because I already made everything a
| | 00:39 | little bit smaller.
| | 00:40 | Merriweather has a bigger x-height than
Georgia, so it looked quite big on the page.
| | 00:45 | So the page looks pretty good
now, but the italics are fake.
| | 00:50 | You can see that here in the
quote, and then also up here in Union.
| | 00:54 | And that's because
Merriweather doesn't have an italic,
| | 00:58 | so we need to go in and get rid of the italics.
| | 01:01 | We'll toggle over to our text editor, and
we'll turn the em to font-style normal.
| | 01:09 | And on the quote, we'll just get rid
of the font-style:italic altogether.
| | 01:14 | Let's save that, and toggle back,
and refresh,
| | 01:20 | and we can see that the italics are gone.
| | 01:22 | Now what we need to do, though, is
re-style those words and that text,
| | 01:27 | so that it has the same sort of subtle
emphasis that it used to have, and I'd
| | 01:32 | like to start with the quote.
| | 01:34 | I want the quote to feel different.
| | 01:35 | A bold would be too strong, but one
of the tricks I often use is to make a
| | 01:41 | type bigger, but in a lighter a color.
| | 01:43 | Then the extra size will
draw the attention to the text,
| | 01:46 | but then setting it in a lighter color
will pull it back a little, so it doesn't
| | 01:51 | stand out too much. And when you think
about it, that sort of what italics do.
| | 01:56 | So I think what I want to
do is use a brown color.
| | 01:59 | I'm interested in this brown
color here in the background.
| | 02:02 | I want to pick a color that works with
the palette, and I think if I work with
| | 02:07 | blue, it'll look too much like a link.
| | 02:09 | And if I use any of the bright colors
up here, like the orange, the red, or the
| | 02:13 | yellow, it'll stand out too much.
| | 02:15 | So I'm going to go with the brown.
| | 02:17 | So what we're we going to do is toggle
over to our text editor, and then what I'd
| | 02:21 | to do is open up our springfield.css
file, which we haven't really looked at yet.
| | 02:26 | What I'd like you to is scroll down and
find the main_content_container, and here
| | 02:33 | we can see that the background color is D1CAC7.
| | 02:35 | We can copy that, and go back into our
Merriweather site, and let's add that as
| | 02:44 | our color to our quote.
| | 02:46 | We'll save this, and view it in the
browser, and that looks very light.
| | 02:54 | This will happen sometimes.
| | 02:56 | A color that looks
darker when it's a flat space
| | 03:00 | can look a lot lighter when it set in text.
| | 03:02 | That's because the text has
a lot of whitespace in it.
| | 03:05 | You can almost imagine that we've
taken some white paint, and mixed it in with
| | 03:09 | that color, and it's gotten even lighter.
| | 03:11 | So now we need to find a darker color to use.
| | 03:14 | So we're going to go to
one of my favorite sites.
| | 03:17 | It's called Hues Hub, and
it's part of December.com.
| | 03:20 | We're going to find that
color, and then pick a darker one.
| | 03:23 | Now, the brown feels to me most
like these sort of orangey colors,
| | 03:26 | so we're going to go into that page,
and then we're going to open up our find
| | 03:31 | field -- on the Mac it's Command+F -- and I
can paste that color right in, and it
| | 03:36 | will find it for me.
| | 03:38 | There's the color we've been using.
| | 03:40 | Now, we need a darker color for the text.
| | 03:42 | So I'm going to recommend we go as many
as four steps down, and grab this color
| | 03:48 | here instead: 70625C.
| | 03:49 | Let's copy that, and go back over into
our text editor, and put in the new color.
| | 03:59 | Let's go ahead and save that.
| | 04:01 | Back over to the browser, and
refresh it, and that's much better.
| | 04:07 | It actually looks only a little
bit darker than our background color,
| | 04:10 | and it's within the same range of colors,
so the palette works really well together.
| | 04:14 | Now, there's one other work that I wanted to
change, and that's Union. This was italic.
| | 04:20 | And it does necessarily have to be
italicized or treated differently.
| | 04:24 | It's not the title of a movie or a book,
| | 04:26 | but I'd like to do something else with it.
| | 04:29 | Another way to bring a little bit of
attention to a word would be to capitalize it,
| | 04:34 | which helps make it stand out, and
then make it a little bit smaller, and add
| | 04:39 | some letter spacing, which then
pulls back some of the emphasis.
| | 04:42 | So again, it has sort of a middle emphasis.
| | 04:45 | So let's go back into our text editor,
| | 04:50 | and on our em, let's do a text-transform
to uppercase, and let's add some
| | 04:56 | letter-spacing, 1 pixel.
| | 04:59 | Let's also change the font size to 13 pixels,
| | 05:05 | so it's a little bit smaller than the text.
| | 05:08 | Save that, back in the browser,
and refresh, and that looks good.
| | 05:13 | It stands out a little bit, but not too much.
| | 05:16 | So it sort of has the same
relationship to the text that the italic would
| | 05:20 | have, and that's great.
| | 05:21 | Now I do have to tell you one thing here;
| | 05:24 | there are a lot of Web designers who
would say you should never make the
| | 05:28 | uppercase letters just a little
bit smaller using the font size.
| | 05:32 | They would say that you should always
use the syntax font-variant small-caps to
| | 05:38 | set your small caps in
Web text. I don't do this;
| | 05:41 | I disagree with it.
| | 05:43 | I find that using a font variant small caps
does not mean you're actually using
| | 05:48 | properly designed small caps.
| | 05:50 | It just means that the browser is
rendering the font smaller, and I personally
| | 05:55 | think that those small caps are too small.
| | 05:59 | Also, you should know that there are a
lot of traditional typographers who would
| | 06:03 | say you should never make
caps just a little bit smaller;
| | 06:06 | that cap should always be use to full
size unless the font comes with a properly
| | 06:11 | designed small caps version.
| | 06:14 | But I still do it, and here's why:
| | 06:16 | I find that official, properly
designed small caps are usually too small for
| | 06:21 | comfortable reading on the screen.
| | 06:23 | The counter forms get small.
The letters lose legibility.
| | 06:27 | I usually want my smaller caps to be a
bit bigger than the traditional properly
| | 06:31 | designed small caps.
| | 06:33 | So as a Web typographer, I always look
at what I'm doing, and the font I'm using,
| | 06:38 | and the effect I'm trying to achieve,
and then I modify the rules as needed.
| | 06:43 | But everything here looks good.
| | 06:45 | Now, of course, we should always
pick a font that always has the styles
| | 06:49 | and weights we need,
| | 06:50 | but this was a simple page, and
we didn't really need the italic.
| | 06:54 | It's just a nice easy way
to create subtle emphasis.
| | 06:58 | But using the bigger, lighter text, or
smaller spaced out caps, we were also able
| | 07:03 | to create subtle emphasis when needed.
| | Collapse this transcript |
| Looking at how using an "Other" Serif font affects the look and feel of a web page| 00:00 | Now that we've finished the Merriweather
site, let's take a look at how using an
| | 00:05 | other serif font like Merriweather can
affect the look and feel of the site.
| | 00:10 | We're starting here with a split screen
comparing the Merriweather page on the
| | 00:15 | left to the old style page set
in Crimson Text on the right.
| | 00:21 | If we just relax our eyes, and take in
the overall feeling of the page, the
| | 00:25 | Crimson page has more texture.
| | 00:27 | The shapes of the serifs, and terminals,
the smaller closed counters on the lower
| | 00:32 | case a and e, and the ribboning from
thick to thin strokes, and the bowls add
| | 00:37 | visual complexity to the font.
| | 00:40 | This complexity creates more visual texture.
| | 00:43 | Merriweather on the other
hand feels lighter and more open.
| | 00:48 | Looking closely at details we can see that
the letters in Merriweather are more open.
| | 00:53 | Let's look at the lowercase a in
the first few words here of the first
| | 00:57 | sentence, John and Sarah.
| | 00:59 | Looking at the name Sarah here, and
over here in Crimson, we can see that
| | 01:05 | Merriweather's a's are more open.
| | 01:07 | You might hear people use the term
friendly when they talk about a font.
| | 01:11 | Merriweather feels friendly. Even though
Merriweather feels more monoline, less
| | 01:18 | inky, and has a larger x-height, it
still feels humanist. It has serifs.
| | 01:24 | The bowls in the b, d, q, and p suggest an
angled stress, and it has old style figures;
| | 01:30 | you can see here in the address.
| | 01:33 | Comparing Merriweather to our other slab
serif font, Museo Slab, we can see that
| | 01:39 | the geometric forms in Museo Slab, the
round bowls in the o, the c, and the e
| | 01:45 | make the font feel a little
mechanical compared to Merriweather.
| | 01:49 | And the thick heavy structured
serifs promote this mechanical feeling.
| | 01:54 | So again, Merriweather
feels more open and friendly.
| | 01:59 | I still wish Merriweather had an italic.
| | 02:02 | If the information on our site were
more complex, we probably couldn't make
| | 02:06 | it work without an italic, but it
works here, and in fact, any of these fonts
| | 02:11 | could work for this page.
| | 02:12 | Choosing the best font would depend on
the message the client wants to communicate.
| | 02:17 | Are they deeply rooted in history?
| | 02:20 | Do they want to convey a
feeling of trust and stability?
| | 02:24 | Then perhaps an old style font would work best.
| | 02:26 | Are they a revitalized city, and they
want to focus on their new economy, and how
| | 02:32 | it's linked to their
old manufacturing economy?
| | 02:35 | Then perhaps we'd use a slab Serif.
| | 02:37 | The texture of a font, its stability,
its darkness or lightness, all these
| | 02:42 | qualities play a role in
helping a client convey their message.
| | 02:46 | But I have to say, if I could just
pick a font based on form, and I didn't
| | 02:51 | have to worry about the client's
message, the Merriweather page might be my
| | 02:56 | personal favorite so far.
| | 02:58 | I think its slight slab serif
qualities relate to the picture of the restored
| | 03:03 | factory building in the header image.
| | 03:05 | Since both the original factories, and
the slab serifs would have been in use
| | 03:10 | around the mid 1800s in the
area, I think it's a good match.
| | 03:14 | At the same time, the thinner stokes of
the font make it feel as so it belongs
| | 03:18 | to the 21st century, and they
keep the font light and legible.
| | 03:22 | And the subtle humanist touches, like
the narrower bowls with the subtle stress,
| | 03:26 | the open apertures,
and the old style numbers;
| | 03:29 | they all make the page feel a little
more welcoming than a true slab serif font.
| | 03:34 | As usual, changing the font
changed the overall feeling of a page.
| | 03:39 | Now that we've moved further along the
timeline, as we've started using fonts
| | 03:43 | designed for marketing, not just books,
as we've started using fonts created
| | 03:48 | with computers, not originally
cast in lead, the changes had become more
| | 03:53 | noticeable, and the
options have become more varied.
| | 03:56 | But even when we're talking about serif
fonts that aren't easily classified, we
| | 04:01 | can still use the same
language we've used all along.
| | Collapse this transcript |
|
|
8. Transitional Sans Serif FontsIdentifying a Transitional Sans Serif font| 00:00 | Sans serif fonts don't have serifs.
| | 00:04 | The first sans serif font was released
in 1816 by the great grandson of William
| | 00:11 | Caslon, whose old style font we
looked at earlier in the course.
| | 00:15 | It was not well-received, and
in fact, was called grotesque.
| | 00:20 | To this day, some sans serif fonts
use the term grotesque in their name.
| | 00:24 | Sans serif fonts gained some
popularity in the mid to late 1800s.
| | 00:31 | Like slab serif fonts, they were heavy, and
primarily used on broadsides, and for headlines.
| | 00:38 | In fact, looking at a digital version
of Franklin Gothic, which was released
| | 00:43 | right at the turn of the century in
1902, we can see the font is bold-weight;
| | 00:48 | not designed for reading
extended amounts of text.
| | 00:51 | Shortly after Franklin Gothic, font designers
started designing sans serifs for use in text.
| | 00:57 | Today, there are thinner weights of
Franklin Gothic, which were released in the 1980s.
| | 01:03 | We usually associate sans serif
fonts with feeling modern or technical.
| | 01:08 | Some people even call them cold,
because they lack the humanist calligraphic
| | 01:12 | forms we associate with many serif fonts.
| | 01:15 | But the association between sans serif
fonts and technology is more than just
| | 01:20 | lack of calligraphic forms.
| | 01:22 | In fact, as you'll see later in the
course, there are humanist sans serifs.
| | 01:28 | We tend to associate sans serif fonts
with ideas of modernism and technology,
| | 01:32 | because of when they
were developed and used.
| | 01:35 | The start of the 20th
century was a time of change.
| | 01:38 | Innovations in communication
included wireless signaling, and the first
| | 01:43 | transatlantic radio signal.
| | 01:45 | Innovations in transportation included
the dirigible, the first airplane, and
| | 01:51 | the first prototype for a
liquid-fueled rocket.
| | 01:54 | Innovations in industrialization
included the assembly line, and mass production.
| | 02:00 | Innovations in economics included the
first bank with a national presence in the
| | 02:05 | U.S., mortgages, auto
loans, and consumer credit.
| | 02:11 | And of course, World War I, the war to
end all wars, was fought from 1914 to 1918.
| | 02:19 | Millions of lives were lost in the battle
due to technological advances in firepower.
| | 02:25 | Many civilians suffered from
malnutrition due to lack of manpower to grow food,
| | 02:29 | and lack of fuel to
transport it to populated areas.
| | 02:33 | So after almost a century of whimsical
fonts, which were display faces not used
| | 02:38 | for text, designers turned to
a simpler streamlined typeface.
| | 02:43 | In the decade immediately following World
War I, some designers wanted to move forward.
| | 02:48 | They wanted to embrace
technology, and order, and cleanliness.
| | 02:53 | They did not want to reflect on their
humanist roots, which can remind us of
| | 02:58 | the fallibility of man.
| | 03:00 | This new rational approach to design, modernism,
demanded clean fonts devoid of ornamentation.
| | 03:06 | Thus, many sans serif fonts were developed
in the first half of the 20th century.
| | 03:13 | But perhaps the most well-known
sans serif is Helvetica, designed by
| | 03:18 | Max Miedinger in 1957.
| | 03:22 | A prevalent default Web font, Arial,
is very similar to Helvetica, and is
| | 03:26 | designed to be a generic sans serif font.
| | 03:29 | In fact, Helvetica and Arial are so similar;
| | 03:32 | it's hard to see their
differences unless we overlay them.
| | 03:36 | Here Helvetica is red, Arial is
blue, and the purple is where they
| | 03:40 | intersect with each other.
| | 03:43 | Helvetica and Arial both have
monoline strokes with no stress.
| | 03:47 | They have a slightly narrow, but not
condensed bowl, tiny apertures, terminals
| | 03:53 | that end without additional
shapes, and large x-heights.
| | 03:59 | Sans serifs like Helvetica and Arial
are sometimes called transitional sans,
| | 04:04 | because of their upright structure.
| | 04:06 | Notice the similarities in structure
with Utopia, a transitional font we looked
| | 04:11 | at earlier in the course.
| | 04:13 | For example, they both have smaller
apertures in the e, and a slightly narrow
| | 04:18 | bowl on the o. Sans serifs like
Helvetica and Arial are also sometimes referred
| | 04:24 | to as anonymous sans.
| | Collapse this transcript |
| Choosing a Transitional Sans Serif font| 00:00 | So now that we know what a transitional
sans serif font looks like, we need
| | 00:05 | to pick one to use.
| | 00:07 | Let's start by looking at Arial.
| | 00:10 | Arial is a default Web font.
| | 00:12 | You can see that it has a similar
x-height to Verdana, and it has a much
| | 00:17 | smaller, narrower aperture.
| | 00:20 | It has an italic that is oblique.
| | 00:22 | That means that it doesn't have some
of the humanist forms we've seen in
| | 00:25 | the italics so far,
| | 00:27 | but it's a good italic.
| | 00:28 | It remains readable, and
the same is true of the bold.
| | 00:33 | The bold has good contrast with the regular
weight, but it doesn't fill in too much.
| | 00:37 | A great thing about using Arial
is that it works cross-browser.
| | 00:40 | A drawback is that as a default font,
it's ubiquitous, and many Web designers
| | 00:46 | are tired of using it.
| | 00:47 | Another drawback is that it only
has two weights: regular and bold.
| | 00:52 | Throughout this course, we've found it
advantageous to use three or four weights.
| | 00:57 | If you're interested in using a
transitional sans serif, that is, a font that
| | 01:01 | looks similar to Arial, but is not
Arial, you might try using Pragmatica.
| | 01:05 | Pragmatica's italic and bold are fine, and
it's been tested cross-browser, and holds up well.
| | 01:13 | I would recommend using Pragmatica.
| | 01:15 | It's a good quality font, and
well-hinted, so it doesn't distort on
| | 01:19 | different browsers.
| | 01:20 | I find it has a slightly tight letter
spacing for my personal preference, but
| | 01:25 | it's within range, and it's still readable.
| | 01:28 | Pragmatica is available in the Personal
plan and higher on Typekit, so it's not
| | 01:32 | the best choice for this course.
| | 01:34 | So we'll keep looking.
| | 01:35 | Another font to consider is Nimbus Sans.
| | 01:40 | Nimbus Sans is a little bit darker on
the screen, and it has a smaller x-height,
| | 01:44 | you can see here, compared to Verdana.
| | 01:47 | You can see that I've set
it at 16 pixels on 22 pixels.
| | 01:52 | It needs to be set a bit larger than Pragmatica
or Arial, because of its small x-height.
| | 01:58 | The bold on Nimbus Sans is a bit heavier than
many of the bolds that we've been looking at,
| | 02:03 | and this is probably because the text weight
for Nimbus Sans is a bit heavier to start with.
| | 02:08 | One of the things I enjoy about Nimbus
Sans is its slightly looser letter spacing,
| | 02:13 | and it's been tested cross-browser,
and works very well.
| | 02:16 | In addition, it's available in the
trial plan on Typekit. Next is FacitWeb.
| | 02:22 | It's a popular Web font
that works cross-browser.
| | 02:25 | It's a little different from
the other three we've looked at.
| | 02:29 | It has a good x-height, and a slightly
narrower bowl that feels almost square.
| | 02:34 | It also has an even more open aperture.
| | 02:37 | You can see in the a, and the e, and
especially on the c. The aperture is becoming
| | 02:43 | a bit humanist, as you'll
see later in the course.
| | 02:47 | But I'd still place it in the transitional
sans category, because of the font's
| | 02:51 | upright structure, particularly
the bowls on the b, the p, and the q.
| | 02:58 | One drawback about FacitWeb
to me is the letter spacing.
| | 03:02 | Where Pragmatica's is a little too tight for
my taste, FacitWeb's is a little too loose.
| | 03:08 | It's still within range, and
it hasn't lost legibility;
| | 03:11 | it's just a little too
loose for my preference.
| | 03:13 | On the other hand, one of the things I
really like about FacitWeb is it has a
| | 03:18 | more humanist italic.
| | 03:20 | You can see here the
extension on the f in the word font.
| | 03:24 | I find the bold a little too heavy for
my personal taste again, but it's within
| | 03:28 | range, and you can still read it.
| | 03:30 | Another font I want to show you to
recommend something to avoid in a sans serif
| | 03:35 | font is when one letter stands out
from the other letters in the system.
| | 03:40 | Here, the lowercase t extends down below
the baseline, and that looks lovely in a
| | 03:46 | heading, but I find it
doesn't work in the text.
| | 03:49 | We can start reading the text, For
decades, critics have predicted, and that t
| | 03:54 | just keeps popping out at us,
and it can stop the reader's eye.
| | 03:59 | You don't want a font that will
make your readers slow down or stop.
| | 04:03 | They might leave your page.
| | 04:05 | This font is a little bit too light,
and a little too tight than for what I'd
| | 04:09 | recommend using for text.
| | 04:11 | It looks quite lovely as
a heading, but not in text.
| | 04:14 | You'll see that it's set quite large,
and partially that's because it's so light
| | 04:20 | that when set smaller, it
was even harder to read.
| | 04:23 | Let's scroll down, and I'll
show you it in 14 pixels here.
| | 04:28 | In 14 pixels, it gets a
little bit harder to read.
| | 04:31 | This font has another problem.
| | 04:33 | Wherever there's an fl in the text --
| | 04:36 | for instance, this is the word flavor --
the fl is replaced with a capital L. I
| | 04:42 | think there's a ligature that's
supposed to be working here that isn't.
| | 04:45 | Since the font is so tight, it gets very
textural, and it's got a beautiful texture.
| | 04:50 | I might recommend a font like this for
headings, or a callout, or something where
| | 04:54 | you're not using so much text, but
it doesn't work for extended text.
| | 05:00 | Based on looking at all of these fonts,
we're going to go with Nimbus Sans.
| | 05:05 | It's available via the trial plan, so
everyone can use it, and it's got good
| | 05:09 | letter spacing, good contrast and
weights, and it works cross-browser.
| | Collapse this transcript |
| Changing styling to improve the readability of text| 00:00 | Now that we've picked Nimbus Sans as
our transitional sans serif font, let's
| | 00:05 | use it in our site.
| | 00:06 | This time we'll open up the Arial
default site in your text editor, and let's
| | 00:15 | save it as nimbus_sans_tk_site.
| | 00:22 | And again, you can keep it in the
original folder since we will not be rewriting
| | 00:26 | anything, and let's view it in the
browser, and it's in Arial, and we need to get
| | 00:32 | Nimbus Sans from Typekit.
| | 00:34 | So go to Typekit, make sure you're
logged in, and launch your Kit Editor.
| | 00:40 | We'll need to delete one of our fonts;
| | 00:42 | I'll delete PT Serif, and then
we can add Nimbus Sans to our kit.
| | 00:48 | We'll need the Regular, Italic, Bold, and
Bold Italic, and we've been using Light
| | 00:58 | for our main heading, so
let's grab that as well.
| | 01:01 | Our Kit Size is still fine.
| | 01:04 | We can publish our changes.
| | 01:07 | And while we're here, let's grab our
embed code, and copy that, and paste it in
| | 01:14 | the head of your HTML document, and
then save that, and I want to go back to
| | 01:20 | Typekit for a moment.
| | 01:21 | We're using five weights and styles,
which means we're going to have to use,
| | 01:25 | under Weights and Styles here, the
variation-specific font-family names.
| | 01:31 | We can copy this from the Regular, and
go back into our HTML file, we'll go to
| | 01:36 | the CSS portion, and add that with a
comma for universal selector.
| | 01:42 | So now we have the normal style,
400 weight, Nimbus Sans and our
| | 01:46 | universal selector.
| | 01:48 | Change that to 400.
| | 01:48 | Now take a moment to add the variation-specific
font-family names throughout the document.
| | 01:55 | If you need a refresher, I covered
this in the chapter on Venetian fonts.
| | 01:59 | When you're done, meet me back here.
| | 02:02 | Okay, so your variation-specific
font-family names should be in your document,
| | 02:08 | and I'd like to scroll down
and just do one thing here.
| | 02:12 | I'd like to show you the strong.
| | 02:14 | The strong is what we've been using
to make the sentence about the Bay Road
| | 02:18 | businesses either bold, or bold and italic.
| | 02:21 | I'd like you to make sure that you've
set it using the nimbus-sans-i7, and a
| | 02:26 | font-weight 700, and a font-style
italic, so that it will be bold italic.
| | 02:31 | Once you've done that, make sure it's
saved, and let's put it on your server.
| | 02:39 | Then we can go to the browser.
| | 02:40 | I can use a tab here, and let's view
it on our browsers off of our servers.
| | 02:47 | And we can see now that it's set in Nimbus Sans.
| | 02:50 | We have the light for the h1 and the h3,
we're using the bold for the h4s, and
| | 02:57 | the regular for the text.
| | 02:59 | Everything looks a little bit too small.
| | 03:03 | That's not surprising, because Nimbus
Sans has a small x-height compared to Arial,
| | 03:08 | which was the original
default font for this site.
| | 03:11 | Because it does have a quite loose
letter spacing, the only thing that feels
| | 03:16 | like it really fits is the footer.
| | 03:18 | So if we increase the size on the font
and on the type, we're going to have to
| | 03:24 | make sure that the
footer doesn't get any bigger.
| | 03:26 | So let's go back into our text editor, and
we're going to make a couple of changes here.
| | 03:32 | Let's change the universal selector to
16. We're going to keep the line-height
| | 03:36 | the same, because it looked quite generous;
| | 03:39 | I don't think we need to make it any
bigger. And let's make our h1, let's make
| | 03:44 | that 33 on 35, and welcome, we'll make that 15.
| | 03:50 | The h2, let's make that 18 on 18.
| | 03:56 | The h3, let's make that 25 on 25.
| | 04:04 | The h4, let's make that a 17 on 17.
| | 04:11 | As for the quote, let's go ahead and
make that a 17, because we just made the
| | 04:17 | text a 16; we like to keep this a
little bit bigger than the text, and let's go
| | 04:22 | ahead and keep it on 22.
| | 04:25 | Actually, let's go ahead and make it on 23,
because we don't want it to be too tight.
| | 04:29 | Let's set the acronym to 14 down here.
| | 04:32 | And we want to make sure that the
footer doesn't get any bigger, so let's make
| | 04:36 | sure we put in a specific
font size for our footer.
| | 04:40 | We'll keep that at the 15 pixels.
| | 04:42 | Now let's go ahead and save this, and
we'll have to reupload it to our servers,
| | 04:47 | and then let's take a look,
and refresh, and that looks good.
| | 04:51 | It looks pretty good, and
I want to check, and good;
| | 04:55 | our footer is still working.
| | 04:56 | Now there are two things that
I'm not crazy about on this page.
| | 05:00 | One is I'm not crazy about the bold italic
that I had you set for the Bay Road businesses.
| | 05:07 | I think that between the bold and that
oblique, which is like a false italic on
| | 05:12 | the word businesses, the e's are
starting to fill in a little bit.
| | 05:15 | So I'd like to just make that a plain bold.
| | 05:18 | We're going to get rid of the italic on that.
| | 05:21 | And then the other thing is I'm
noticing that the Date, Time, and Place feel
| | 05:25 | like they're sort of
floating away from each other here.
| | 05:28 | They don't fill like a cohesive unit.
| | 05:31 | I think that they need to
be a little bit tighter.
| | 05:33 | And I'm noticing that our overall line
height is quite generous, so maybe what
| | 05:40 | we need to do is just tighten that up,
and we might be able to fix that problem.
| | 05:44 | So let's go back into our text editor,
and on the strong, let's go ahead and
| | 05:50 | get rid of the italic.
| | 05:52 | We can turn this back into an n7.
| | 05:53 | And then in the universal selector,
let's go ahead and make our line-height 21,
| | 06:00 | and see if that'll fix that
other problem we're having.
| | 06:04 | Let's reload it onto the server,
and refresh, and that looks better.
| | 06:11 | Bay Road businesses looks better, and so
does the chunking here on this information.
| | 06:17 | It feels more cohesive, like it
belongs together. That's good.
| | 06:22 | Let's see.
| | 06:22 | Everything is looking good, and the
hierarchy is working, the visual chunking of
| | 06:27 | information is working;
| | 06:29 | this page looks good.
| | Collapse this transcript |
| Looking at how using a Transitional Sans Serif font affects the look and feel of a web page| 00:00 | Now that we've finished the Nimbus Sans
site, let's take a look at how using a
| | 00:04 | transitional sans serif font can
affect the look and feel of the site.
| | 00:09 | We're looking at a split screen
between Nimbus Sans on the left and
| | 00:14 | Pragmatica on the right.
| | 00:16 | We didn't make a Pragmatica page in this course.
| | 00:19 | I made one on my own for comparison purposes.
| | 00:23 | Just sort of relax your eyes
and look at the overall texture.
| | 00:27 | You can see that the
Nimbus Sans page feels darker.
| | 00:31 | It's a darker, heavier font.
| | 00:33 | The Pragmatica page feels lighter.
| | 00:36 | They both have an oblique
italic up here in the tag line.
| | 00:40 | It's not a humanist italic, because
both fonts are transitional sans serifs.
| | 00:45 | The Pragmatica has a slightly
lighter bold than in the Nimbus Sans.
| | 00:50 | The bold in the Nimbus Sans on the left,
on the e, it's starting to fill in,
| | 00:54 | but Pragmatica's e is
not starting to fill in.
| | 00:59 | In some ways, though, I actually like
Nimbus Sans' bold better than Pragmatica's bold.
| | 01:05 | And the reason is, if we look
closely down here, the C's in Construction
| | 01:10 | Continues feel a little bit
darker than the rest of the bold.
| | 01:14 | We can also see it up
here in The New Kids in Town.
| | 01:18 | It's most noticeable down in the
italic, where the capital B and R in Bay Road
| | 01:24 | are a little bit bigger and
thicker than the rest of the letters.
| | 01:28 | You'll also notice that the bold
italic feels a little extended.
| | 01:32 | All the letters feel a little bit
wider than the other letters in the font.
| | 01:36 | In fact, I wouldn't use the
bold italic in Pragmatica.
| | 01:40 | I just kept it this way because I
wanted to show you how it looks.
| | 01:44 | It feels a little bit like
it's outside of the system to me.
| | 01:47 | Let's take a look at
another sans serif font: Arial.
| | 01:52 | Now, most people, when they're first
starting to look at sans serif fonts, think
| | 01:57 | that they look pretty much alike,
but we can see this isn't true.
| | 02:00 | Again, Arial has a slightly lighter
texture than Nimbus Sans, and Arial also
| | 02:06 | doesn't have as many weights to work with.
| | 02:09 | So we'll see that the heading up here, and
Around Town, they're heavier than what
| | 02:15 | we were using in Nimbus Sans, because
Nimbus Sans has more weights to work with.
| | 02:19 | Now, that doesn't mean that Arial isn't
as good; it just means that it doesn't
| | 02:24 | have the same number of weights to work with.
| | 02:27 | Of the three transitional sans serifs we've
been looking at, Arial, to me, has the best bold.
| | 02:34 | The e doesn't fill in, and there's a
consistent size and weight between the
| | 02:39 | capitals and lowercase.
| | 02:40 | So these are the three
transitional sans serif fonts.
| | 02:45 | Let's take a moment to compare
Nimbus Sans to a couple of serif fonts.
| | 02:51 | I chose to compare Nimbus Sans to Museo
Slab, because a slab serif font like this
| | 02:56 | one has a monoline stroke.
| | 02:59 | So it has more similarities to Nimbus
Sans than other serif fonts would have.
| | 03:04 | But even so, if you relax your eyes, and
just look at the overall texture of the
| | 03:08 | page, Museo Slab has more texture on the
page, and that's because of the serifs.
| | 03:14 | The page texture is just more complex.
| | 03:17 | Let's look at one last page here.
| | 03:19 | We'll look at the Merriweather.
| | 03:22 | Merriweather has some slab serif
and some transitional serif qualities.
| | 03:27 | It's not exactly a monoline font, and it
does have more humanist qualities than
| | 03:32 | Museo Slab did, which gives it a
different texture when we're looking at it.
| | 03:37 | And especially compared to Nimbus Sans,
you can really see that Merriweather
| | 03:41 | looks older and more traditional.
| | 03:44 | Merriweather is also the only font
we've looked at in this video that has the
| | 03:49 | old style numbers, which really
increases the humanist texture on the page.
| | 03:54 | So using a transitional sans serif font
gives a cleaner crisper look to the page.
| | 04:00 | It's easy to see why some people call
them old fonts when we compare them side
| | 04:05 | by side with the font like Merriweather,
which feels very open and friendly.
| | 04:10 | But neither look,
neither font is right or wrong.
| | 04:14 | It really depends on the overall
feeling you want to create for the site you
| | 04:19 | are designing.
| | Collapse this transcript |
|
|
9. Geometric Sans Serif FontsIdentifying a Geometric Sans Serif font| 00:00 | Sans Serif fonts do not all look alike.
| | 00:03 | While transitional sans like Helvetica
and Arial are sometimes called generic or
| | 00:09 | anonymous, some Sans Serifs based on
circles and triangles, are called geometric.
| | 00:15 | The most famous geometric Sans Serif is
probably Futura, designed in 1927 by Paul Renner.
| | 00:22 | Futura is about as geometric as a font
can get and still be usable in text.
| | 00:28 | You can see the bowls are almost perfect
circles while some letters are based on
| | 00:33 | triangles and keep their sharp apex.
| | 00:35 | I mentioned in the previous chapter
that after World War I, some designers
| | 00:41 | rejected humanist forms because they
represented the fallibility of man.
| | 00:45 | Paul Renner was one of those designers.
| | 00:48 | He believed in radically simplified forms.
| | 00:51 | He preferred rationality and functionality.
| | 00:54 | He disliked calligraphic forms.
| | 00:56 | He believed geometric
simplicity had a calming effect.
| | 01:00 | It is perhaps ironic that Germany's
defeat in World War I meant the fall of
| | 01:05 | the German monarchy.
| | 01:06 | A temporary halt to censorship meant
German artists like Renner could experiment.
| | 01:10 | They could be influenced by constructivism
which had an industrial angular style
| | 01:15 | and geometric abstraction.
| | 01:17 | But as much as Paul Renner disliked
calligraphic forms and letters,
| | 01:21 | the very open round bowls and the triangular
forms undermine readability in Futura.
| | 01:27 | The large circular bowls have spaces
that are almost as large as the
| | 01:31 | spaces between words.
| | 01:32 | This creates large spaces in words
like in the letter a in the word great.
| | 01:37 | The x-height is small and the ascenders
and descenders are very long, which make
| | 01:41 | the stems feel long.
| | 01:42 | They draw the reader's eye down the page
rather than horizontally along the lines of text.
| | 01:47 | Thus, most geometric sans are
not as geometric as Futura.
| | 01:52 | Letters need to work together in a
system, and if they're built upon an
| | 01:57 | external idea like circles and triangles,
the legibility and readability of the
| | 02:00 | font can be compromised.
| | 02:03 | So most contemporary geometric sans
will just feel more geometric than other
| | 02:07 | Sans Serif fonts because they
have some geometric components.
| | 02:11 | For example, both Museo Sans
and Muli have shorter stems.
| | 02:15 | They have slightly wider apertures,
they both have a spur on the u, and they
| | 02:21 | both have a slight curve at the bottom
of the t. In addition, Museo Sans has a
| | 02:27 | humanist double-decker a.
And finally, Museo's shoulders,
| | 02:31 | the humps that meet the stem of the
h and u have a slight shape to them
| | 02:36 | suggesting a slight stress even
though the letters are monoline.
| | 02:40 | Museo Sans has humanist and
geometric characteristics.
| | 02:44 | Muli feels more geometric.
| | 02:47 | And Futura is the most geometric of all.
| | Collapse this transcript |
| Choosing a Geometric Sans Serif font| 00:00 | So now that we know what a geometric Sans Serif
font looks like, we need to pick one to use.
| | 00:06 | We'll start with Futura PT.
| | 00:09 | This is a digital version of
Futura, a well-known geometric font.
| | 00:13 | It is as geometric as possible and
can still be easily read in text.
| | 00:18 | You can see immediately, when compared with
Verdana, the Futura has a very small x-height.
| | 00:23 | In fact, we need to set the text
at 18 pixels for it to be readable.
| | 00:28 | When text type starts getting that big,
it makes me get a little nervous because
| | 00:32 | if the Web font doesn't load,
the fallback font will look huge.
| | 00:36 | Both Arial and Verdana have a
much bigger x-height than Futura PT.
| | 00:41 | Other than that when looking at
Futura PT, you can see it has the round
| | 00:45 | circles for the bowls and we can see
that as well in the text, and you can see
| | 00:50 | it has a very heavy bold.
| | 00:51 | There's a lot of contrast in
this font between bold and regular.
| | 00:55 | I think this helps emphasize the
overall geometric feeling of the font.
| | 00:59 | We're not going to use
this font for two reasons.
| | 01:02 | One, it has the very small x-height.
| | 01:04 | That means the text needs to be set so big
just so that it looks good in a text size.
| | 01:10 | The other is that the font is available
only in the Personal Plan and higher on
| | 01:14 | Typekit, so not everyone has access to it.
| | 01:17 | So let's take a look at
another font. Here we have Muli.
| | 01:20 | Muli is a geometric Sans Serif font
available via Google Fonts, and again, it
| | 01:25 | has the very round bowls we can see
here in the a. And we can also see that
| | 01:31 | the a is a single-decker a and it's a
bit lighter than what we saw in Futura,
| | 01:35 | but it's still legible.
| | 01:36 | It does not have an italic,
but we could still make it work.
| | 01:40 | We saw that with Merriweather.
| | 01:42 | But my concern with Muli is that
it did not hold up cross-browser.
| | 01:46 | Part of this has to do with how light it
is and part of it has to do with hinting.
| | 01:51 | On Safari 5 and Opera 10 in Windows XP,
there were some hinting issues.
| | 01:56 | You can see how the heading here
gets light and dark within the letters.
| | 02:00 | It's still readable and it
does not completely fall apart.
| | 02:03 | I would personally avoid this font until
browser upgrades in Safari and Opera
| | 02:08 | mean we could expect less
readers to see the font this way.
| | 02:12 | But Muli held up beautifully across all
other browsers so it's a good solid font.
| | 02:16 | Now let's take a look at Museo Sans.
| | 02:19 | This font tends to look geometric on
the page and text even though it has
| | 02:25 | the double-decker a and some other humanist
characteristics, like the slightly open
| | 02:30 | aperture on the e. It still has very
round bowls and it has the oblique italic.
| | 02:35 | That is, the italic is not humanist.
| | 02:38 | It looks more like it's
just been slanted over a bit.
| | 02:41 | Museo Sans has a slightly smaller
x-height than Verdana, we can see here,
| | 02:46 | and the bold isn't quite as
heavy as Futura PT's bold was.
| | 02:51 | Museo Sans is also available in the Trial
Plan in Typekit, so everyone has access to it.
| | 02:57 | So this may be the font we use.
| | 03:00 | Looking at another geometric Sans
Serif font, this one is too light and
| | 03:05 | too loose, it's difficult to read.
| | 03:07 | It becomes like little
specs of texture on the page.
| | 03:10 | The letters in each word float away from
each other and they don't feel cohesive.
| | 03:14 | And the text almost looks like it
has a pixel of letter spacing added
| | 03:18 | even though it doesn't.
| | 03:19 | Then of course, the lightness of the
font also makes it more difficult to read.
| | 03:24 | This geometric font has better letter spacing.
| | 03:27 | It might actually be a little bit tight, but
that's not a make-or-break deal at this point.
| | 03:31 | It has a good weight overall, but my
concern with this font is that it has
| | 03:35 | a slightly hand-drawn feeling.
| | 03:36 | I'm going to zoom in here, Command++ (plus) on
the Mac, and you can see that there are
| | 03:42 | these imperfections in the edges of the letters.
| | 03:45 | They almost look like they've been traced.
| | 03:47 | The o is not a perfect circle
and the G here is more egg shaped.
| | 03:52 | Now this doesn't mean it's a bad font.
| | 03:55 | It just means that it's not
appropriate for this project.
| | 03:57 | I'm looking for a true geometric feeling
font, and this is a little bit too casual.
| | 04:03 | And I don't feel it's appropriate
for this project or for a city.
| | 04:06 | It doesn't feel business-like enough to me.
| | 04:08 | If I wanted something that referenced
to the human hand, I would look for a
| | 04:12 | more humanist font.
| | 04:13 | So we won't use this font either.
| | 04:15 | Based on looking at all of these
fonts, we're going to use Museo Sans.
| | 04:20 | It's available via the Trial Plan, so
everyone can use it, and it's got a good
| | 04:25 | letter spacing, good contrasting
weights, and it works cross-browser.
| | 04:29 | Some weights and styles are even
available to use with @font-face.
| | Collapse this transcript |
| Downloading a free font licensed for use on the web| 00:00 | So now that we've picked our geometric
Sans Serif font, Museo Sans, we need to
| | 00:06 | get it into our city site.
| | 00:07 | Museo Sans has multiple weights and styles
available on Typekit through the Trial Plan.
| | 00:13 | It has 100 through 1,000.
| | 00:15 | But we're going to go about getting
the font into our site using @font-face.
| | 00:21 | Quite frankly, because there are so
many more weights and styles here available
| | 00:26 | via Typekit, that's probably how I
would usually access Museo Sans,
| | 00:30 | but I want to make sure you know how
to use the @font-face syntax.
| | 00:33 | There have been a few small changes
recently and this will give you the updates.
| | 00:38 | It's important to know how to use the
@font-face syntax because there are
| | 00:42 | Web fonts out there that aren't available
from either Google Web Fonts or Typekit,
| | 00:46 | and some are free fonts.
| | 00:49 | You can find them at Font Squirrel, on
the websites of type designers,
| | 00:56 | and from services like Fontspring and MyFonts.com.
| | 01:02 | Others are fonts that you'd have to
purchase a license in order to use,
| | 01:06 | but you would still need to make them
work yourself using @font-face.
| | 01:10 | So let's start by going to Font Squirrel,
and we can search for Museo Sans and
| | 01:16 | click on the name of the font.
| | 01:17 | And you'll see here that even though
Museo Sans is @font-face-compatible,
| | 01:23 | which means it's been approved for use on the
Web, it doesn't give us the opportunity
| | 01:27 | to download an @font-face kit.
| | 01:30 | The only thing that we can download is the
OpenType Font and we would have to do that offsite.
| | 01:36 | Now most fonts will actually
give you the @font-face kit.
| | 01:39 | Here I've opened the PT Sans font.
| | 01:41 | You can see there's a link
here to the @font-face kit.
| | 01:45 | But because of the licensing, Font
Squirrel is not allowed to disseminate or
| | 01:50 | to share this font, so we have to go
back and get it from somewhere else.
| | 01:55 | So let's go ahead and click on the
Download OTF, which is offsite, and it
| | 01:59 | takes us to Fontspring.
| | 02:00 | Now Fontspring looks a lot like Font
Squirrel because it's a sister site, and
| | 02:06 | we can see here we are at the Museo Sans page.
| | 02:08 | And as we scroll down, at first it may seem
like you're not going to get a free font here.
| | 02:14 | But that's just because some of the weights
and styles are not free and others are.
| | 02:18 | Here's the one we're looking for, Museo Sans.
| | 02:21 | We can add this to our cart.
| | 02:23 | And then we also want to get the italic,
so let's go ahead and back up and get
| | 02:29 | the Museo Sans 500 Italic
and add that to our cart.
| | 02:33 | Let's back up again because we need a bold.
| | 02:36 | Now the Museo Sans 700 is not free and
that's our bold, but I happen to know
| | 02:42 | that Museo Bold is free, so let's
search here for Museo. Here we go!
| | 02:49 | Find fonts, and you can see that we
have a number of options for Museo.
| | 02:55 | There's four different fonts and they
all have a very similar structure if
| | 03:00 | you'd just look at the word
Museo going down this line.
| | 03:03 | And the main difference tends to be the serif.
| | 03:06 | So let's go into Museo here down at
the bottom, scroll down, and we will grab
| | 03:12 | the free Museo 700 and add to cart.
| | 03:17 | Now we have our text weight, a text
italic, and a bold, and the bold does have a
| | 03:22 | slight serif to it which is going to
be a little different but they'll work
| | 03:26 | because they have a similar structure,
and I'm sort of interested in seeing how
| | 03:29 | that's going to affect the
final texture on the page.
| | 03:32 | So now we can check out and you'll need
to log in to your account to check out,
| | 03:38 | and if you don't have an account yet,
you can create a new account and we can
| | 03:42 | download all of these.
| | 03:48 | And when we're done, we now have
the free fonts on our computers.
| | Collapse this transcript |
| Using Font Squirrel to create an @font-face kit| 00:00 | So now that we've downloaded the three
free Web fonts from Fontspring,
| | 00:04 | let's open them up and take a look at them.
| | 00:07 | In my Downloads folder, I can see that
my zipped files have already opened and
| | 00:11 | let's look at Museo Sans 500.
| | 00:14 | Inside I have the license for the
font and the OpenType format file.
| | 00:19 | In a folder called web fonts, I have
the @font-face license and a file on
| | 00:24 | how to use these fonts.
| | 00:25 | Then I have this other folder.
| | 00:26 | In this folder, I have a demo and I
have four different Web font files.
| | 00:31 | I have the EOT, which is for
Internet Explorer 9 and earlier;
| | 00:35 | the SVG, which is for early
versions of iPhones and iPads;
| | 00:40 | the TTF, which is a raw TrueType file
that most of the other browsers use;
| | 00:45 | and last, we have the WOFF,
which is a Web-Only Font Format.
| | 00:50 | It's the emerging standard for
the last year or so, so many of the
| | 00:53 | newest browsers use WOFF.
| | 00:56 | There's also a folder for the specimen
files and these support the demo up here.
| | 01:01 | Now let's go ahead and open up that demo.
| | 01:04 | I always open up the demo
file before I start using a font.
| | 01:08 | I like to make sure that it all
downloaded correctly, so if I have any problems
| | 01:12 | getting it to work, I know it's on
my end, not a problem with the font.
| | 01:17 | Now I want to take a moment and point
out that not all offsite links from
| | 01:22 | Font Squirrel will take you to Fontspring.
| | 01:25 | And because Fontspring and Font Squirrel
are sister sites, all these files that
| | 01:30 | we just downloaded here, all the files
that we need in the demo file, these are
| | 01:35 | very similar from Fontspring as we
would have gotten from Font Squirrel.
| | 01:38 | So what happens if Font Squirrel takes us
to a site where we don't get all these files?
| | 01:44 | Well, let's take a look at that.
| | 01:45 | Let's go to Font Squirrel
and let's go to MEgalopolis.
| | 01:53 | So MEgalopolis is another font that
must be downloaded offsite and does not
| | 01:59 | offer the @font-face syntax for us.
| | 02:01 | So why don't we download that
offsite and see what happens?
| | 02:05 | We're taken to the SMeltery which
is the site for the font designers.
| | 02:09 | Let's take a moment to read the EULA.
| | 02:12 | That stands for End User License Agreement.
| | 02:15 | We can see here in the fifth item down
that this font may not be redistributed,
| | 02:19 | shared, repackaged, or included,
etcetera, etcetera, and so this is why
| | 02:24 | Font Squirrel did not include it on their site.
| | 02:26 | Instead, they gave us a link to this site
where we could get it directly from the SMeltery.
| | 02:32 | We can also see that two items down,
Embedding this font in a Web page with an
| | 02:36 | @font-face declaration is allowed
once you credit SMeltery with the links
| | 02:41 | somewhere on your site.
| | 02:42 | So we can use this for the @font-face
syntax, so that's good.
| | 02:46 | So why don't we go ahead and download this font?
| | 02:50 | Click on Download and then click on
OpenType, and yes, we do want to download this.
| | 02:56 | Back in Downloads, we can see that we
now have the MEgalopolis file,
| | 03:01 | but all we have is the OTF.
| | 03:02 | We don't have a demo file, we
don't have any of the Web font files.
| | 03:07 | So so far we can't really use this with
an @font-face syntax, but we can make an
| | 03:12 | @font-face Kit back at Font Squirrel.
| | 03:15 | So let's go to Font Squirrel,
and this time let's go to the
| | 03:18 | @font-face Generator.
| | 03:20 | We're going to generate our own kit.
| | 03:23 | Now they're under construction today,
so it looks like that they're upgrading
| | 03:27 | their powerful hardware and they have
removed some of the features that will be
| | 03:32 | added back in the next few months.
| | 03:34 | But let's take a look at
this and see what we get.
| | 03:38 | We'll add our MEgalopolis font here
and we'll go ahead and just work with Optimal
| | 03:46 | and we can say, Yes, the fonts I'm uploading
are legally eligible for web embedding.
| | 03:51 | We've read that EULA and
we know that that's true.
| | 03:54 | Now let's download our kit.
| | 03:59 | Back into our Downloads folder, we now
have a webfontkit, and if we take a look
| | 04:03 | at it, we have some very familiar files here.
| | 04:06 | We have a demo that we can open, so
right-click, and we can see from the demo
| | 04:14 | that the font has downloaded correctly
and that it works. That's great.
| | 04:19 | And we can also see that we
have three Web font files here.
| | 04:22 | We have the EOT, the TTF, and the WOFF.
| | 04:27 | So one of the things that must not be working
right now on Font Squirrel is the SVG file.
| | 04:33 | That's okay though.
| | 04:34 | They'll probably get that up and
running within the next few months.
| | 04:36 | It's been there for a while.
| | 04:37 | But we can still work with this if we needed to.
| | 04:40 | So when it comes to using @font-face,
fontsquirrel.com is a great resource not
| | 04:46 | just because it provides free fonts
available for font-linking, but because
| | 04:50 | it also has the @font-face Generator.
| | 04:53 | Just make sure you only use fonts
legally eligible for font-linking
| | 04:57 | and definitely test these fonts
that you make cross-browser.
| | 05:01 | Web fonts need different hinting
so they'll hold up on the screen.
| | 05:04 | A font that's great for print may not
look very good on the screen
| | 05:08 | even if you do have the Web font
files needed to make the font work.
| | Collapse this transcript |
| Adding the @font-face syntax to the CSS| 00:00 | Now that we have our Web font files,
let's get our @font-face syntax into our CSS.
| | 00:06 | First, let's make our document.
| | 00:08 | In the Exercise Files, you can open up the
original Arial site with your text editor
| | 00:14 | and let's save that as museo_sans_site,
and we can save that in the same folder
| | 00:30 | since we won't be rewriting anything.
| | 00:33 | Now, let's go get the CSS syntax that we need.
| | 00:37 | Downloads, we can go to Museo Sans 500,
into Web fonts, and I'm looking for
| | 00:47 | the stylesheet.css.
| | 00:49 | So open that up and we can see here that
we have the vendor information and then
| | 00:57 | we also have the @font-face
syntax, which is what we need.
| | 01:00 | Let's go ahead and copy all of that
and then in the Museo Sans site, in the
| | 01:07 | CSS section of the HTML document, right
above the universal selector, we can paste that.
| | 01:13 | And we now have the CSS in
for the Museo Sans 500 Regular.
| | 01:18 | Now let's get the @font-face syntax in
for the other two weights and styles.
| | 01:24 | Now looking at this syntax, each
one is very similar, I'm going to walk
| | 01:27 | you through it here.
| | 01:28 | The first line says this will be an
@font-face syntax that I'm declaring.
| | 01:34 | The second line gives us the name
of the font-family that says this is
| | 01:37 | MuseoSans500Regular.
| | 01:40 | The third line makes the syntax compatible
for Internet Explorer 9 and higher.
| | 01:46 | The fourth line makes the syntax
compatible for Internet Explorer 8.
| | 01:49 | The next line, other recent browsers
like Firefox and Chrome, will know where to
| | 01:55 | go get the font files that they need.
| | 01:57 | The next line will tell other older browsers
where to get the font files that they need.
| | 02:02 | And the last tells older iPhones and
iPads where to get the font file they need.
| | 02:07 | Then we have a font-weight: normal
| | 02:08 | and a font-style: normal
| | 02:10 | and then the declaration closes.
| | 02:12 | You'll notice that even in the bold version
that we're using, the font-weight is normal.
| | 02:17 | And even in the italic version
we're using, the font-style is normal.
| | 02:22 | Fontspring creates a separate font for
each weight and style, then sets weight
| | 02:26 | and style to normal.
| | 02:28 | This increases support and avoids
creating fake bolds and fake italics
| | 02:32 | in Internet Explorer.
| | 02:34 | It still works because the fonts themselves
are bold and italic regardless of whether
| | 02:38 | they're set to bold and italic
in the @font-face declaration. Okay.
| | 02:43 | So the @font-face syntax is a new
document, let's go ahead and save that.
| | 02:47 | We've completed step one of the process.
| | 02:50 | Next, we'll tell the browsers to
actually use these fonts in the text.
| | 02:53 | So keep this file for the next lesson.
| | Collapse this transcript |
| Implementing the font family in the CSS| 00:00 | We've already added the
@font-face Syntax to our CSS.
| | 00:05 | Now we need to tell the browsers that
we're using these fonts in our page.
| | 00:09 | We do this by setting the font-family.
| | 00:12 | Go ahead and select and copy the
MuseoSans500Regular font-family,
| | 00:18 | down in our Universal Selector, we can add that
along with a comma so that we have a font stack.
| | 00:25 | Now, you'll notice that I copied and
pasted, it's very important that this
| | 00:29 | font-family match the font-family up here,
and that's because the browsers know
| | 00:35 | when they see the font-family down here
that they should look for the Web font
| | 00:39 | files associated with the font-family up here.
| | 00:43 | Let's go ahead and save this
and view it in our browser.
| | 00:47 | And it is not working, it is in Arial.
| | 00:51 | I knew this would happen.
| | 00:52 | I wanted to show you a very common problem.
| | 00:55 | The reason why this is not working,
let's go back into our editor here,
| | 00:59 | is because our @font-face declaration is
telling the browser to look for the fonts
| | 01:04 | via this URL and it's looking directly
for the Web Font files, so it expects to
| | 01:09 | find the Web Font files in the
same folder that the CSS is in.
| | 01:14 | But my Web Font files are still in my
Download folder, so I need to move those over.
| | 01:20 | So first, I will start with my 500s, I
will grab all four fonts and I will move
| | 01:31 | them to my Exercise Files, my city_site,
and now they're in the same folder as
| | 01:40 | my HTML file that has my CSS in it.
| | 01:43 | Go ahead and get the rest of the files now.
| | 01:45 | Now, if I go back to my browser and
refresh this, Command+R, we can see that
| | 01:52 | it is using Museo Sans.
| | 01:54 | But there is a problem here.
| | 01:56 | I'm going to zoom in, Command++
and show you that bold is faked.
| | 02:02 | We know this for two reasons.
| | 02:04 | One, the bold that we used has some slight
Serifs on it and there are no Serifs here.
| | 02:09 | I'm going to keep zooming in on this.
| | 02:12 | The other way that we can tell, is we
can tell this has been slightly faked
| | 02:16 | because the letters have been
just slightly stretched vertically.
| | 02:19 | We can see in the letter e very
clearly that the right side and the left side
| | 02:24 | are a little heavier but the top line
is not, and that's because it's been
| | 02:29 | stretched horizontally actually, so
we get this point at the top of the e,
| | 02:33 | especially in the counter form.
| | 02:35 | So this is a fake bold.
| | 02:37 | We need to go back and fix this.
| | 02:38 | First, I'll zoom out, Command+0,
and then toggle back to my editor.
| | 02:44 | And what we need to do is add the
correct font family anywhere we're going to
| | 02:50 | use the italic or the bold.
| | 02:52 | So let's set our italics first, and I
usually do this by copying and pasting as
| | 02:57 | much as possible to avoid mistakes.
| | 03:00 | The first place I'm going to have
a italic is in the tagline here.
| | 03:05 | I put in a new font-family line,
and here you can see it still says
| | 03:11 | MuseoSansRegular, and that's not correct.
| | 03:14 | So let's go up and find our Italic,
Copy that, scroll back down to our
| | 03:20 | tagline, Paste that in.
| | 03:23 | So now our tagline will come in as italic
and we need to get rid of this font-style: italic
| | 03:29 | as well because we don't
want it to double italic.
| | 03:32 | Now let's see where else we use italic, we
can just Copy this and Paste it in as needed.
| | 03:38 | We use it in the em,
get rid of font-style: italic,
| | 03:44 | and we use it in the quote,
get rid of font-style: italic.
| | 03:51 | Now let's go ahead and do
this for the bolds as well.
| | 03:56 | In our h4 we have a bold.
| | 03:58 | So I put in the font-family but right
now it still says Italic so let's go find
| | 04:03 | our bold, Museo700Regular, Copy that,
scroll down to my h4, change it to the
| | 04:15 | 700 Regular, and get rid of
the font-weight: bold,
| | 04:18 | because we don't want it double
bolded, and then I'll Copy that whole
| | 04:22 | line and then down here in strong,
I will add the bold weight font and
| | 04:27 | get rid of the font-weight.
| | 04:28 | Let's Save that and go back
into our browser and take a look.
| | 04:34 | I'll Refresh and we can see that the
bold is coming in correctly and the italics
| | 04:39 | are pretty much coming in correctly
here in the tagline and over in the quote,
| | 04:43 | but it is not coming in
correctly in the word, Union.
| | 04:46 | Do you see how Union is slanted over even
more than for instance, the word library?
| | 04:51 | That means that Union has double italic
attached to it, and let's go back in and fix that.
| | 04:58 | The reason that happened is because the
em here has a default style and it will
| | 05:03 | come in as italic unless we
declare that it should be normal.
| | 05:09 | Let's go ahead and Save that, back in our
browser, Refresh, and that's much better.
| | 05:17 | Union is now fixed and the fonts
are all working properly in the site.
| | 05:22 | Next, we're going to style our text to
make sure it looks as good as possible.
| | 05:26 | So save this file for the next lesson.
| | Collapse this transcript |
| Changing styling as necessary to improve the readability of the text| 00:00 | Now that Museo Sans is working on our
site, let's make some changes to improve
| | 00:05 | the hierarchy and chunking on the page.
| | 00:09 | Looking at Museo Sans in our site,
the text looks good overall.
| | 00:13 | It's not too big, not too small,
not too tight, and not too loose.
| | 00:17 | But looking closely, we are having a bit of
a problem over here in the events listing.
| | 00:24 | The date, time and place
feel a little bit loose to me.
| | 00:28 | They don't feel as cohesive as I'd like them to.
| | 00:31 | They need to be chunked together a
little bit more to help readers skim
| | 00:35 | the information more easily.
| | 00:37 | When I scroll down it's hard to see
that these things all belong together.
| | 00:42 | So I'd like to tighten this up a bit,
and if I look at the text over here
| | 00:48 | in the main column, there's a
very generous line height.
| | 00:50 | So I'm wondering if just tightening
up the line height a little will help
| | 00:54 | us with this problem.
| | 00:56 | So let's go back into our Text Editor
and in the Universal Selector let's try
| | 01:01 | making our line-height 21.
| | 01:03 | We'll Save this, toggle back over to our
browser and Refresh, and that works better.
| | 01:11 | The Time, Date and Place feel a little
bit more cohesive on this side but the
| | 01:17 | line-height on the text in the articles
is still generous enough to help guide
| | 01:21 | our eyes horizontally along the rows of text.
| | 01:24 | So I think that solved
our problem. That's good.
| | 01:27 | Now let's just take a look and see if
there's anything else we'd like to change.
| | 01:31 | Usually I like the quote to be a little bit
bigger to just standout a little bit more.
| | 01:35 | So we'll go in and change that and
let's see if there's anything else.
| | 01:40 | The footer is looking a tiny bit big
here so I think I'd like to make that
| | 01:45 | a little bit smaller.
| | 01:46 | All right, so let's go back into our
Text Editor and on the quote,
| | 01:51 | let's bring that up to 16 and 23.
| | 01:56 | Now in the footer let's add a line,
font-size, and let's make it 14 pixels
| | 02:03 | so it's just slightly smaller than
the text, save that, Refresh and
| | 02:10 | the footer looks much better.
| | 02:11 | Now let's go up and check our quote.
| | 02:13 | You know, usually I like the quote
bigger but I think with the geometric sans
| | 02:18 | and the oblique feeling here it's actually
just feeling a little bit too big
| | 02:23 | and clunky to me, so I'm
going to bring that back down.
| | 02:26 | Sometimes the technique I use with
one font doesn't work with another font.
| | 02:30 | So let's go ahead and bring that back
down to 15 on 22, Save that, and back
| | 02:40 | over into our browser, that's much better.
| | 02:43 | I think the oblique is enough to call
attention to that quote without it having
| | 02:47 | to standout by being slightly bigger.
| | 02:49 | So everything else looks pretty good.
| | 02:52 | The page has good hierarchy and the
information is chunked really well.
| | 02:55 | Now because we used to the @font-face
syntax, we could only use three weights
| | 03:00 | and styles that were available to us.
| | 03:02 | Because we were using free fonts, we
could have used more weights and styles
| | 03:06 | if we were willing to purchase licenses for
the other weights and styles, but we didn't.
| | 03:10 | So because we didn't use all the other
weights and styles that would have
| | 03:14 | been available via Typekit, we can see
here that the Save the Date is a little
| | 03:18 | bit lighter that we're used
to as is the main heading.
| | 03:20 | Well, that's okay, it's not bad.
| | 03:23 | It's actually quite nice.
| | 03:24 | But if you wanted to use more weights
and styles of the Museo Sans, you could
| | 03:28 | always redo this page using the font
from Typekit because all the weights and
| | 03:32 | styles are available in their Trial Plan.
| | 03:35 | Now, I'm glad that we did it using
@font-face though, because what's nice
| | 03:40 | about getting this page to work using
@font-face is that we are no longer dependent
| | 03:45 | on Typekit or Google Web Fonts
to add Web fonts to our site.
| | 03:49 | We can now use any font licensed
for font linking via font-face.
| | Collapse this transcript |
| Looking at how using a Geometric Sans Serif font affects the look and feel of a web page| 00:00 | Now that we've finished the Museo Sans
site, let's take a look at how using a
| | 00:05 | Geometric Sans Serif font can
affect the look and feel of the site.
| | 00:10 | First, we're looking at a split screen here.
| | 00:12 | On the left is the page
we created in Museo Sans.
| | 00:16 | We used a couple of free fonts
available for use with the @font-face Syntax.
| | 00:21 | There wasn't a Museo Sans Bold
available, so we used a bold, slightly
| | 00:26 | Serif version of Museo.
| | 00:28 | There were only three weights
and styles available overall.
| | 00:32 | On the right, we have
another version using Museo Sans.
| | 00:36 | We did not create this page together.
| | 00:38 | I created this one on my own using five of
the weights and styles available in Typekit.
| | 00:44 | I wanted to create it for comparison purposes.
| | 00:47 | I was able to use all Sans Serifs fonts.
| | 00:50 | I was also able to incorporate a
light font and a bold-italic font.
| | 00:55 | In the version on the left, we weren't
able to create subtleties in weight on
| | 01:00 | the page because we had
less weights to work with.
| | 01:04 | Looking at the one on the right, you can
immediately see that the heading
| | 01:08 | Around Town is quite a bit lighter.
| | 01:10 | That's because it's set using a 300 weight.
| | 01:13 | The same is true of the main heading,
it's much lighter, and at this size it
| | 01:18 | still feels like a regular weight than a bold.
| | 01:20 | Now if you just relax your eyes and
look at the overall texture of the pages,
| | 01:25 | the one on the left feels more complex.
| | 01:29 | It feels less crisp.
| | 01:31 | The headlines in the articles use a
Serif font and this is adding more
| | 01:35 | texture to the page.
| | 01:37 | With the version on the right, without
Serifs, it feels crisper and cleaner,
| | 01:42 | and I think the light heading helps
make it feel even crisper and cleaner.
| | 01:46 | Both pages are very good.
| | 01:48 | Museo Sans is a lovely font no matter
how many weights and styles you work with.
| | 01:53 | Now, let's compare the Museo
Sans to the Nimbus Sans version.
| | 01:57 | Even though the text on both pages are
Sans Serif, Museo Sans has a slightly
| | 02:03 | humanist quality combined with very
geometric bowls are very round,
| | 02:09 | so it creates a more complex
texture than the Nimbus Sans.
| | 02:13 | The Museo Sans has a more humanist
texture and it's just not as crisp and clean,
| | 02:19 | it feels perhaps a bit older and softer.
| | 02:23 | Now either font works fine.
| | 02:25 | Choosing which font to use in the
final version would depend on the
| | 02:29 | overall feeling we were trying to
communicate about the city.
| | Collapse this transcript |
|
|
10. Humanist Sans Serif FontsIdentifying a Humanist Sans Serif font| 00:00 | Sans Serif fonts do not all look alike
while Transitional Sans like Helvetica
| | 00:06 | and Arial are sometimes called Generic
or Anonymous, and some Sans Serifs based
| | 00:12 | on circles and triangles are called Geometric.
| | 00:16 | Others which incorporate humanist
forms reminiscent of old style fonts
| | 00:21 | are called Humanist.
| | 00:23 | In 1926, right around the same time
Paul Renner was designing Futura,
| | 00:28 | a Geometric San Serif, Eric
Gill was designing Gill Sans.
| | 00:33 | Gill Sans is what we'd
call a Humanist Sans Serif.
| | 00:37 | Looking at this digital version of Gill
Sans we can see it has a double-decker
| | 00:41 | G with a closed loop.
| | 00:43 | It has a double-decker Humanist
form a with varying stroke thickness.
| | 00:48 | The a ends with a curled form.
| | 00:52 | It has relatively generous apertures
and the shape of the bowl suggest a stress
| | 00:57 | even though the stroke is monoline.
| | 00:59 | Gill Sans also has a round O but
that's the only bowl in the system that is
| | 01:04 | Geometric, the rest of the font feels Humanist.
| | 01:08 | There are many humanist
Web fonts available today.
| | 01:11 | Most of the Sans Serif text fonts
designed in the last 20 years tend to
| | 01:15 | have Humanist qualities.
| | 01:17 | I suspect, that's because the more
generous apertures help texts stay
| | 01:20 | readable at smaller sizes.
| | 01:23 | Humanist Sans Serifs are the most
readable of all the Sans Serif fonts.
| | 01:27 | Of course, typographers don't agree on the
exact definition of a Humanist Sans Serif.
| | 01:33 | In addition to generous apertures
some say a Humanist Sans Serif font has a
| | 01:37 | modulated stroke, that is there are
subtle thicks and thins in the strokes.
| | 01:43 | The slightly modulated
strokes can be pretty subtle.
| | 01:46 | The blue lines laid over this
large PT Sans e are the same length.
| | 01:50 | Other Humanist San Serifs have
more obvious modulated strokes.
| | 01:54 | Some typographers say a Humanist Sans Serif
has stems that do not lay flat to the baseline.
| | 02:01 | Others say a Humanist Sans Serif has
a double-decker g with a closed loop.
| | 02:05 | I would consider any of these fonts
to be Humanist, they all have Humanist
| | 02:09 | qualities though they don't all
have the same characteristics.
| | 02:13 | A Humanist Sans Serif has a
certain feeling when used in text.
| | 02:18 | When looking for a Humanist Sans
Serif I look first to the texture.
| | 02:22 | The things that makes Sans Serifs feel
more humanist to me are the open apertures
| | 02:27 | and bowls with an implied stress, that
is bowls that don't feel like they're
| | 02:31 | heaviest part is to the outside.
| | 02:34 | Here, these bowls have a shape that
implies heaviness in the upper right hand corner.
| | 02:39 | The second thing I look for when I'm
trying to decide if a font is a Humanist
| | 02:43 | Sans Serif is the Italic.
| | 02:45 | Does the Italic look Humanist?
| | 02:47 | I look for a single decker a, and
extended stroke on the f, and sometimes I'll
| | 02:54 | hit the jackpot and find a rounded
Italic e. If the Italic is oblique like
| | 02:59 | Pragmatica's italic then the text won't
have an overall humanist feeling on the page.
| | 03:04 | The last thing I look for are the
details in individual letters, whether it's a
| | 03:09 | double-decker a and g, whether there's
curve at the end of the lowercase l. For
| | 03:13 | example, if we look at Museo Sans it
has a double decker a, and a curve at the
| | 03:20 | bottom of the l, but it feels like
a Geometric font when use in text.
| | 03:24 | Museo Sans bowls in the e, the
b and the g are not Humanist.
| | 03:28 | I wouldn't call Museo Sans is a Humanist
font just because it has some Humanist details.
| | 03:34 | I always look at the overall
texture and feeling of the font.
| | 03:37 | Verdana, a popular Web font, is a
Sans Serif with both Transitional and
| | 03:43 | Humanist qualities.
| | 03:44 | Matthew Carter designed Verdana with
generous apertures and Humanist bowls to
| | 03:49 | maintain legibility on the screen.
| | 03:51 | Verdana's slight vertical
structure compliments Georgia,
| | 03:55 | which is the Transitional Serif font
Carter designed for the screen.
| | 03:58 | Verdana's Oblique provides contrast
to Georgia's Humanist Italic.
| | 04:04 | The more Sans Serif fonts you look at,
the more you'll find characteristics
| | 04:08 | gently blended into a single font.
| | 04:11 | Contemporary Humanist Sans draw
inspiration from a variety of sources.
| | Collapse this transcript |
| Choosing a Humanist Sans Serif font| 00:00 | So now that we know what a Humanist
Sans Serif font looks like,
| | 00:04 | we need to choose one to use.
| | 00:06 | The first we'll look at is PT Sans, a Humanist
Sans that I've used before and really enjoy.
| | 00:12 | It's available from Google Web Fonts,
it's in the Trial Plan on Typekit and
| | 00:17 | it's also approved for font linking via @font-face.
| | 00:21 | PT Sans is a workhorse Humanist Sans.
| | 00:24 | It holds up beautifully at small sizes and
has good forms so it looks good big too.
| | 00:30 | It also works cross-browser.
| | 00:32 | I particularly like its lowercase a. It
has a traditional old-style structure to
| | 00:39 | it with the small closed counter form.
| | 00:41 | I also love the italic for this font.
| | 00:44 | Let's scroll down and look
at some more italic here.
| | 00:47 | It's a bit narrower than
the text, which is expected.
| | 00:50 | Humanist Italics are narrower than text
but the PT Sans Italic is not too narrow
| | 00:56 | and I love the f, it has the extension
of the stem and a little extra swoosh at
| | 01:02 | the end, it feels like it's more
expressive than most italic fs.
| | 01:06 | I think it's lovely.
| | 01:08 | The bold is perhaps a bit bolder than I
usually like but it's within range for
| | 01:12 | legibility and readability.
| | 01:14 | If there are two things that I wish
this font could give me that it doesn't are
| | 01:18 | I wish that the quotation marks were
maybe just a little bit bigger, they feel
| | 01:23 | little small and dark compared to this text.
| | 01:26 | And I wish it had more weights and styles.
| | 01:28 | It has the usual four weights and styles;
| | 01:31 | Regular, Italic, Bold and Bold Italic,
and in most cases that is enough.
| | 01:36 | Like I said, I use and enjoy this font.
| | 01:39 | I highly recommend it.
| | 01:41 | The next font we're going to look at is
another favorite of mine, it's Ubuntu.
| | 01:44 | Ubuntu is available at Google Web
Fonts and has eight weights and styles.
| | 01:49 | It has a 300, 400, 500 and 800 weight,
so this bold is coming in pretty heavy
| | 01:56 | but I think that's because it's in 800.
| | 01:58 | If we wanted it a little lighter we could
always use a 500 and use a semi-bold instead.
| | 02:04 | I haven't actually used Ubuntu and
that's because the u and n have a
| | 02:08 | very specific shape.
| | 02:10 | If we look here at this n compared to
Verdana, you can see that Verdana has a
| | 02:14 | little bit of stem going up above the shoulder;
| | 02:18 | and on Ubuntu it comes to a point.
| | 02:21 | This gives Ubuntu a very
specific texture when used for text.
| | 02:24 | It has a Humanist feeling but
it's also a bit futuristic as well.
| | 02:29 | So I've never had the opportunity to
use this font for any of the projects
| | 02:33 | I've worked on, but I'm looking
forward to using it someday.
| | 02:37 | It holds up beautifully cross-browser,
it has a good italic, it looks good both
| | 02:41 | small and large, and it
also has multiple weights.
| | 02:44 | The next font we're going to
look at is Font Font's Meta Web Pro.
| | 02:50 | Meta Web Pro is a bit narrower and has looser
letter spacing than either Ubuntu or PT Sans.
| | 02:57 | Its narrow bowl makes it feel
a bit more vertical in text.
| | 03:01 | It has a slightly smaller x-height as
well so it needs to be set slightly larger
| | 03:06 | in text, but it's well within range.
| | 03:09 | It holds up beautifully cross-browser.
| | 03:12 | I haven't used it but I've seen
it used and have always enjoyed it.
| | 03:15 | It has a delightful italic
and a pretty good bold.
| | 03:19 | It's available in the Portfolio Plan
on Typekit where it has four weights
| | 03:23 | and styles available.
| | 03:25 | Because it's not available to everyone
we won't use this font for this course.
| | 03:30 | Next we have Open Sans also
available for multiple sources.
| | 03:35 | It's available in the Trial Plan entire
on Typekit as well as on Google Web Fonts.
| | 03:40 | Open Sans has 10 weights and styles.
| | 03:43 | It's another workhorse font.
| | 03:46 | It has a generous x-height and slightly
narrow bowls but not too narrow and it
| | 03:51 | has good letter spacing.
| | 03:52 | When we look at it compared to Verdana
we can see that it's very similar
| | 03:57 | in structure although Open Sans has
the double-decker closed loop g.
| | 04:02 | The bold has good contrast to the text
weight but it's not too bold, and the
| | 04:08 | italic is a little bit
narrower than I usually prefer.
| | 04:11 | There's the bold italic.
| | 04:13 | Let's go down here to the regular
italic, but it's absolutely within range.
| | 04:18 | It's not too narrow.
| | 04:19 | We don't have difficulty reading it.
| | 04:21 | So this is a great font.
| | 04:22 | It holds up cross-browser and I would
use it and I'd recommend it as well.
| | 04:26 | This Humanist Sans Serif font is too narrow.
| | 04:31 | It gets difficult to read.
| | 04:33 | We start looking space within the letters
because the counter forms get very narrow.
| | 04:37 | So sometimes it gets hard to read each letter.
| | 04:40 | But then also this font has the very
loose letter spacing, such a loose letter
| | 04:45 | spacing may not be a problem with the
wider font but the bowls are so narrow and
| | 04:50 | the letter spacing is so wide that
the letters start to look like
| | 04:53 | they're floating away from each other.
| | 04:55 | Another problem with working with
such a narrow font is the bold italic.
| | 04:59 | You can see here on the e, that the closed
counter form on this bold italic e gets very small.
| | 05:05 | There was a reason I originally
looked at this font.
| | 05:08 | I was intrigued by the double-decker
g with the opened loop.
| | 05:12 | I've seen this kind of g
before and it can work beautifully.
| | 05:16 | But I'm not sure it works here
with this font because it gives a wide
| | 05:20 | horizontal element to the lowercase g, while
the rest of the letters feel so tall and narrow.
| | 05:26 | We can see it here in the word reading.
| | 05:28 | The letters themselves are not bad.
| | 05:30 | In fact, they're well-formed and work
together in a system while the spacing
| | 05:35 | is loose, it's consistent.
| | 05:37 | I just think this font works better bigger.
| | 05:39 | If we look at the heading down here,
same font, set large for a heading,
| | 05:44 | it's actually quite lovely.
| | 05:45 | I just don't think it works well in text.
| | 05:48 | It's a little too hard to read.
| | 05:50 | This last font has the exact opposite problem.
| | 05:53 | The bowls are too wide.
| | 05:55 | If we look at the o here, large, it's
almost a perfect circle, but if we look at
| | 06:01 | it here in the heading, and then in
the text, it feels a little bit wider.
| | 06:05 | Now this might be a hinting problem.
| | 06:08 | When fonts aren't hinted properly the
pixels sort of shift around at different
| | 06:12 | sizes and on different browsers, and
letters can have slightly different shapes.
| | 06:17 | But some of the other letters are too
wide and don't fit in the system either.
| | 06:21 | Let's take a look at this lower case n,
it's just too wide for this system.
| | 06:26 | We can see it here in the text if we
read the first few words of the text:
| | 06:30 | For decades, critics have predicted the end,
looking at the word end, the letter n
| | 06:35 | looks wider than either the letter e
or the letter d on either side of it.
| | 06:40 | And that creates a little space within a
word and it undermines the rhythm of reading.
| | 06:46 | Finally, the link on the lowercase
g is too far over to the left.
| | 06:52 | The g almost starts to feel like it's
bending and tipping over and it also makes
| | 06:56 | the g feel a little bit too complex
compared to the other letters in the system.
| | 07:02 | We can see that here in the word heading,
that g it looks sort of small and dark,
| | 07:06 | and very complex compared
to the open, light, overly wide n.
| | 07:12 | So for this chapter, we're
going to use the Open Sans font.
| | 07:16 | It's available to everyone, it has a
wide-range of styles and weights and
| | 07:21 | it's just a beautiful font.
| | Collapse this transcript |
| Changing styling as necessary to improve the readability of the text| 00:00 | Now that we've picked Open Sans as our Humanist
Sans Serif font, let's use it in our site.
| | 00:06 | Start by opening the original verdana_site.
| | 00:11 | Let's open it in our Text Editor.
| | 00:13 | I'll right-click, and let's save it as
open_sans_tk -- let's use the Typekit font
| | 00:28 | for this -- _site, and you can save it
right in the original folder since
| | 00:32 | we won't be overwriting anything.
| | 00:33 | And then now, let's open
that in the Browser as well.
| | 00:39 | Right-click and we can see it's still in
Verdana, we haven't added our new font yet.
| | 00:46 | So let's go to Typekit, and if you're
not logged in you'll want to do that first.
| | 00:54 | And then let's launch our Kit Editor.
| | 00:57 | We need to remove one of the fonts,
let's remove Museo Slab and then
| | 01:05 | we'll find our new font, Open Sans
and we can add that to our kit.
| | 01:10 | Now in the kit, let's grab the Light,
we've been using that for our H1 and H3
| | 01:16 | headings, and we'll need the Regular and
Italic for text, and the Semi-Bold Italic
| | 01:22 | we've been using for that sentence
about the Bay Road businesses and
| | 01:27 | then Bold for H4 headings, and I don't
think we need the Bold-Italic so
| | 01:32 | we don't need to use that.
| | 01:33 | Let's go ahead and publish the Kit so changes
are official and we'll need our embed code.
| | 01:38 | We can copy that and then back in the
Text Editor, paste it as the first item
| | 01:47 | in the head of your HTML.
| | 01:48 | Save that, and back in Typekit.
| | 01:52 | You can see we're using five weights
and styles, so we are going to need to
| | 01:57 | include the variation-specific font
family names so that these weights
| | 02:02 | and styles will work with
Internet Explorer. Let's see here.
| | 02:06 | We'll start with the Regular,
copy this, back in our document.
| | 02:12 | We can add that right to the font
family for our universal selector,
| | 02:17 | make sure you put a Comma (,) in there.
| | 02:18 | So now our text, anything that is not
told otherwise, will come in as the
| | 02:25 | 400 weight, normal style Open Sans.
| | 02:29 | Next we need to add the correct
variance throughout the page.
| | 02:33 | Take a moment to add the variation-specific
font family names throughout the document.
| | 02:38 | Remember to use the 300 weight for the
H1 and H3, and the Italic 600 weight
| | 02:44 | for the strong element.
| | 02:46 | If you need a refresher on how to do this I
covered it in the chapter on Venetian Fonts.
| | 02:50 | When you're done, meet me back here.
| | 02:55 | Okay, your variation-specific font
family names should be in your CSS.
| | 03:02 | Let's scroll down so you can see the
ones that I've put in, in case you need to
| | 03:07 | take a look at them.
| | 03:10 | Now let's make sure our document
is saved and on our server.
| | 03:15 | Save it, and there it is.
| | 03:23 | And we can view it in the Browser.
| | 03:26 | You'll have to get it from your
server, mine is at goodwebfonts.
| | 03:29 | We can name it open_sans_tk_site,
and there we are. It looks great.
| | 03:39 | It looks perhaps maybe a little bit too small.
| | 03:41 | It's readable, but I think it could be
a pixel bigger and I think it might be
| | 03:46 | because Open Sans, even though it has
the same structure as Verdana,
| | 03:51 | it's a little bit lighter.
| | 03:52 | So let's go back into the CSS portion
of our HTML and make a couple of
| | 03:57 | quick changes here.
| | 03:59 | We'll change the universal selector to 15 on 22.
| | 04:02 | H1, we will change to 31 on 33.
| | 04:12 | The H2, we'll change to 17 on 17.
| | 04:18 | The H3, we'll change to a 24 on 24.
| | 04:24 | The H4 can go up to 16 on 16, and I always
like the quote to be a little bit bigger,
| | 04:32 | so let's go ahead and do that at
16 and we can keep it at 22.
| | 04:37 | Let's change our acronym as well, AM and PMs.
| | 04:41 | Go ahead and save this.
| | 04:43 | We'll need to re-upload it to the server,
and then back in the Browser
| | 04:51 | we can refresh, and that looks good.
| | 04:53 | It looks maybe a little bit big now
but at the smaller size it looked
| | 04:58 | a little bit too small.
| | 04:59 | That is one of the problems working with
Web Type is, unfortunately, we can't work
| | 05:04 | with one-half pixels.
| | 05:06 | But either size is fine and it
looks like the chunking looks good,
| | 05:10 | the hierarchy looks good, the italic semi-bold is
beautiful there so I think that we are all set.
| | 05:20 | As I said, neither size would be wrong
whether we have everything one pixel
| | 05:25 | smaller or kept it at this size,
neither one is wrong or bad.
| | 05:28 | It's just a matter of finding
the best visual balance possible.
| | Collapse this transcript |
| Looking at how using a Humanist Sans Serif font affects the look and feel of a web page| 00:00 | Now that we've finished the Open Sans site,
let's take a look at how using
| | 00:04 | a Humanist Sans Serif font can
affect the look and feel of the site.
| | 00:09 | Let's start with a spilt screen with Open
Sans on the left and Verdana on the right.
| | 00:15 | Open Sans and Verdana looked very
similar when we looked at the Web Fonts
| | 00:19 | specimen cheats earlier in the chapter,
so it's not surprising that their pages
| | 00:23 | would look somewhat similar.
| | 00:25 | But if you just relax your eyes and look
at the overall texture of the page,
| | 00:30 | the Open Sans page looks a little lighter and open.
| | 00:34 | Open Sans has a slightly more open bowl.
| | 00:38 | We can also see the Open Sans has a
lighter main heading and the about town
| | 00:43 | is also lighter, that's because we had
the 300 weight that we could work with.
| | 00:48 | We were also able to use a semi-bold italic
for that sentence about the Bay Road businesses.
| | 00:55 | Now the Open Sans has that slightly
rounder bowl than Verdana, so it starts
| | 00:59 | feeling a little bit more geometric
than Verdana, but it still doesn't feel
| | 01:04 | as geometric as say Museo Sans does.
| | 01:07 | Let's take a look at that.
| | 01:08 | If we look here between Open Sans, we
can see the bowl on the o, and Museo Sans
| | 01:16 | we can see that the bowl here in Museo
Sans is much rounder, and Open Sans
| | 01:22 | has more open apertures.
| | 01:23 | We can look there on the e, compared
to this e, which is more closed.
| | 01:27 | Museo Sans also feels darker on the
page, that's not because it's geometric,
| | 01:33 | that's just the design of this font,
it has slightly thicker strokes.
| | 01:37 | Overall, I think the Museo Sans feels
crisper and a little more structured.
| | 01:42 | Now let's compare Open Sans to Nimbus
Sans, our transitional Sans Serif font.
| | 01:48 | If you relax your eyes and just look
at the overall texture, you can see that
| | 01:52 | Open Sans looks much lighter
and it looks more open.
| | 01:56 | It feels a little more delicate, you could
maybe even say it looks a little more friendly.
| | 02:00 | It doesn't feel bubbly really, but the
Nimbus Sans over here feels a little bit
| | 02:05 | more closed in on itself.
| | 02:07 | It's also a little more
crisp, a little more clean.
| | 02:10 | Also because the Nimbus Sans is a little
bit of a darker font with a little bit
| | 02:14 | more letter spacing, we just get a
really different texture on the page.
| | 02:18 | Finally, I want to compare Open Sans to a
different Humanist Sans. This is open too.
| | 02:25 | We did not make this page in the course.
| | 02:27 | I made it on my own for comparison purposes.
| | 02:30 | I pointed out earlier in the chapter
that the forms of some of these letters,
| | 02:35 | especially we can see it here in the p,
n, g, here on the a, we can see that
| | 02:42 | these letters they come to a point
in one corner of the letters.
| | 02:46 | And these corners they give the font
a slightly futuristic look to it.
| | 02:50 | It's not quite geometric because the
font has Humanist forms, but there is
| | 02:56 | something very structured about it.
| | 02:59 | We can see that it creates a
different texture in the text.
| | 03:01 | Ubuntu comes with a lot of weights and styles.
| | 03:06 | The bold was actually too bold, so this
is actually the 500 weight which is the
| | 03:11 | semi-bold, and I use this for the
article headings as well as for the sentence
| | 03:16 | about the Bay Road businesses.
| | 03:18 | There are so many great Humanist fonts, it
was hard to choose one to use for this course.
| | 03:24 | All of the Sans Serif fonts we just
looked at are really good choices.
| | 03:28 | They all hold up well cross-browser
and I would recommend any of them.
| | 03:32 | When people first start looking at fonts
it's easy to think they all look alike,
| | 03:36 | especially Sans Serif fonts.
| | 03:39 | But once we start to notice the slight
changes in the letter forms and how the
| | 03:43 | letters relate to each other, we can
start to see how each font creates
| | 03:47 | a different texture on the page.
| | Collapse this transcript |
|
|
11. Handwritten FontsUnderstanding handwritten fonts | 00:01 | Handwriting fonts soften the
digital presentation of text.
| | 00:05 | Most of them are not easy to read.
| | 00:07 | I wouldn't recommend using them for
extended text, but they can be used
| | 00:11 | for short passages.
| | 00:12 | Many clients, designers, and bloggers
like to use Handwriting fonts because
| | 00:17 | it brings the personal voice, the
representation of humanity back into pixel-based
| | 00:21 | presentation of information.
| | 00:23 | This unspoken need for incorporating
the human hand reminds me of Gutenberg
| | 00:28 | and his Bible back in the 1450s.
| | 00:31 | You may remember from the beginning
of this course that Gutenberg purposely
| | 00:35 | mimicked manuscript books of the time.
| | 00:38 | He believed his work would be better
received if it looked and felt like the
| | 00:42 | handwritten books people were used to.
| | 00:44 | In fact, you may remember that Gutenberg
created multiple versions of letters so
| | 00:48 | they did not all look alike.
| | 00:50 | Slight variances in letters helped
the texture of the page feel imperfect,
| | 00:54 | unique, and handwritten.
| | 00:56 | One of the problems with digital handwritten
fonts is the repetition of letters.
| | 01:00 | A unique handwritten personal feeling
is undermined when we can easily see
| | 01:05 | that the exact same forms are
used over-and-over again.
| | 01:09 | Compared to an original script written
in Seth Barlow's whaling log in 1809
| | 01:14 | we can see the digital version doesn't hold up;
| | 01:16 | whereas, Barlow's writing feels elegant
and personal, the digital version feels,
| | 01:20 | well, digitally manufactured.
| | 01:23 | The other problem with handwritten
fonts is that even if you spend hours
| | 01:27 | trying to find a good match you'll
often have to settle for something that's
| | 01:31 | not quite what you wanted.
| | 01:32 | Barlow's script is nowhere near as
ornate as this one, but it was the
| | 01:35 | closest match I could find.
| | 01:37 | Of course, Handwriting
fonts don't have to be a script.
| | 01:40 | Many Handwriting fonts are Roman
fonts that have been designed to feel
| | 01:44 | more personal, more casual.
| | 01:46 | Comic Sans is a font designed
to mimic the text in comic books.
| | 01:50 | It's been overused and there are
plenty of designers who love to hate it.
| | 01:54 | But the reason it's been overused is
probably because people connect with it.
| | 01:58 | Comic Sans looks more like hand-printed
text than the Humanist Sans Serifs like
| | 02:03 | Gill Sans and PT Sans, but when
compared to Gill Sans and PT Sans
| | 02:08 | we can see that Comic Sans has a
pretty normal systematic structure.
| | 02:11 | This may also be why it's a
popular font, it's quite legible.
| | 02:15 | Mostly, the letters don't stray far
from traditional letter forms, they just
| | 02:19 | have rounded corners on the strokes;
| | 02:22 | some slight wiggles in the strokes, a
couple of unexpectedly curved lines and a
| | 02:27 | slightly tilted form or two.
| | 02:29 | There are other Handwriting fonts out
there that find the same balance between
| | 02:33 | imperfect handwriting and systematic structure.
| | 02:36 | Myndraine and Amatic Small Caps both fall
into this category, and both are Web Fonts.
| | 02:42 | Handwriting fonts aren't recognized in
the five families of Type, and many are
| | 02:46 | not appropriate for extended amounts of
text, but we need to recognize them as
| | 02:51 | a popular element in web design.
| | 02:53 | If we don't talk about and critically
analyze Handwriting fonts we can't find
| | 02:57 | the best ones to use and we can't
expect to have more high quality
| | 03:02 | Handwriting fonts to choose from in the future.
| | Collapse this transcript |
| Choosing a handwritten font| 00:00 | So now that we know more about Handwritten
fonts, we need to choose one to use.
| | 00:05 | If you look at Myndraine online, you'll see it
called an abstract font and a Sans Serif font.
| | 00:12 | I classify it as a Handwriting font that's
because of the strokes within the letters.
| | 00:16 | They aren't inky or curved, and
more because of the energy and forms
| | 00:20 | of the letters themselves.
| | 00:21 | The letters have a quirky form,
when used in text they have handwritten
| | 00:25 | energy and texture.
| | 00:27 | We can see up close some of the characteristics
that help make it feel handwritten.
| | 00:31 | For instance, the way the shoulder
comes up out of the stem on the n,
| | 00:36 | and the b, and the g and the p. But even
though there are these exaggerated shapes
| | 00:41 | within the letters, they work together
in a system because the letters still
| | 00:45 | follow a structured pattern.
| | 00:47 | No letter goes beyond our expectations of what
a letter form should look like in this system.
| | 00:53 | Myndraine has large x-height compared
to Georgia, so we're able to set it at
| | 00:58 | 14 pixels and it's quite legible and readable.
| | 01:02 | Myndraine Regular is
available on Google Web Fonts.
| | 01:05 | It does not have an italic or a bold
version at this time and it holds up
| | 01:09 | fairly well cross-browser.
| | 01:10 | There are some minor letter spacing
problems on Windows XP and the tops of
| | 01:16 | the letters get chopped off when
set at 11 pixel and 16 pixel.
| | 01:21 | This happens cross-browser.
| | 01:22 | But as long as you don't use it at 11
pixels or 16 pixels it's a good font.
| | 01:27 | So now let's look Ruluko.
| | 01:29 | It almost feels like an italic font,
in fact, Ruluko's f has that extended
| | 01:34 | stroke we've been seeing on italics.
| | 01:36 | The e is italic and curved and the n has
a lovely detail at the end here, almost
| | 01:42 | like a pen swooshed down and
then picked off the paper.
| | 01:45 | It's a nice detail.
| | 01:46 | Looking up at the headline, we can see
also that there's a very slight curve
| | 01:50 | on the left stroke of the u
and the k has a loop.
| | 01:54 | But even with all of these italic characteristics,
Ruluko remains vertical and structured.
| | 01:59 | Similarly the Myndraine, the letters
feel crisp, they're not inky.
| | 02:04 | So we have the form of the handwriting
but not the inkiness of the handwriting.
| | 02:09 | And Ruluko holds up fairly well cross-browser.
| | 02:13 | It does have a slight problem
on Opera 10 and Windows XP.
| | 02:17 | We get a few bits of darkness in some
of the letters but it's still readable
| | 02:21 | so this is a minimal problem.
| | 02:23 | It works fine on all other browsers tested.
| | 02:25 | Moving even further toward a
Handwritten Font is Sanvito Pro.
| | 02:29 | Now, this is different from any
of the other fonts we've looked at.
| | 02:33 | In fact, it reminds me of the Venetian letter
forms we looked at earlier in the course.
| | 02:38 | Now Sanvito Pro has a tiny x-height
so we had to set it at 20 pixels for it
| | 02:44 | to be easily readable, and compared to Georgia,
we can see how tiny that x-height is.
| | 02:49 | And we can also see the delightful
details of handwritten letters;
| | 02:53 | we can see the ribboning of the thick
to thin on the b, we can see the rising
| | 02:58 | crossbar on the e which we haven't
seen since the beginning of the course.
| | 03:02 | The font obviously feels very much like
handwriting, yet there's a system behind this font.
| | 03:08 | The letter forms have a consistent structure,
none of the letters feels out of
| | 03:12 | place or unexpected in the system.
| | 03:14 | So where the text is very textural and
dark and a little hard to read with
| | 03:19 | the very tiny little closed counter forms
on the lowercase a and e, it is readable.
| | 03:26 | I don't know if I'd use it for extended
amounts of text but it would be great
| | 03:30 | for a paragraph or two and also for headings.
| | 03:33 | Sanvito Pro is available in the
Personal Plan or higher from Typekit.
| | 03:37 | It comes in four weights;
| | 03:38 | Light, Regular, Semi-bold and Bold.
| | 03:42 | This font specimen sheet uses
the Regular and the Semi-bold.
| | 03:46 | In contrast to Sanvito Pro is
another calligraphic Handwritten Font.
| | 03:51 | I've repeatedly mentioned the importance
of letters working in a system.
| | 03:55 | In this font, the letters do not work
in a system and that causes some
| | 03:59 | problems when used for text.
| | 04:00 | Let's start by reading the text at the
very top here, For decades, we'll zoom in
| | 04:06 | and we can see that the d looks like a
slightly wider letter and the e is narrow
| | 04:11 | and the c is wider and the a
is narrow and the d is wider.
| | 04:16 | And the rhythm of the letters is, it's
not systematic and it sort of breaks
| | 04:22 | up the rhythm in the flow of the text and
that makes it a little bit harder to read.
| | 04:26 | In addition, the stress on the o is
too angled and it just feels like it's
| | 04:30 | sort of tipping over and that's even more
noticeable when we look back at regular size.
| | 04:35 | And finally, there's an optical
illusion happening in this font.
| | 04:39 | We can again, see in the heading, the
way that the foot Serifs are on the H and
| | 04:44 | the F, it's almost like the black
strokes are starting to become a shadow for
| | 04:48 | some invisible white letter that's there.
| | 04:51 | And this optical illusion is sort of fun
and unique in the heading but it causes
| | 04:56 | problems in the text.
| | 04:58 | The Serifs just don't feel
natural at small sizes.
| | 05:01 | In addition, once I see that invisible
white letter there I start even seeing
| | 05:05 | it in the n, in the I and that 3D feeling
becomes more important than the words themselves.
| | 05:12 | Another problem that we'll often have
when working with or looking for
| | 05:16 | a Handwriting Font is that most of
them have been designed for display use,
| | 05:21 | they've been designed to be used in
Headings, and so they may have very narrow
| | 05:25 | bowls like this one and they'll definitely
have the tighter letter spacing.
| | 05:30 | So whereas this heading it feels pretty
narrow and tight, but at least it's readable.
| | 05:35 | Once we get into the text, the words
just become like these little gray
| | 05:38 | splotches on the page.
| | 05:40 | And this is made even worse
by the huge word spacing.
| | 05:44 | If you look closely at this line here,
gravestones, from T-shirts to text
| | 05:48 | messaging, the word to is actually
narrower than the space on either side of it.
| | 05:53 | This makes it even harder to read.
| | 05:55 | And then finally, I wanted to show you
one last Handwriting Font where some
| | 06:00 | of the letters are just too unique.
| | 06:01 | So unique, personal handwritten forms
are the Catch 22 of handwriting fonts.
| | 06:07 | On one hand, you'd think that personal forms
would help make the font feel more handwritten.
| | 06:12 | For instance, here we have this big,
large loop on the f and we have this curve
| | 06:18 | on the t, but what actually happens is
that those unique fonts, they catch our
| | 06:23 | eye and we notice them
again and again in the text.
| | 06:25 | For instance, if we look at the first
line of text here, that t gets used one,
| | 06:30 | two, three, four times in the first line
and then we see it repeated here twice,
| | 06:37 | side by side in the word written, and
what was looking unique and personal
| | 06:43 | now pops out at us and says,
Hello, I'm the digital font.
| | 06:46 | This font has other problems too,
like the letter case e that unfortunately
| | 06:51 | looks like a c because the
closed counter form has closed up.
| | 06:55 | And it also has a complex texture
that makes the text harder to read.
| | 06:59 | But mostly, I wanted to point out the
more personal, the letter forms look,
| | 07:02 | the more they standout in the text and call
attention to the fact that they're digital.
| | 07:07 | When we pick a handwriting font, we need
to find one that has a good balance
| | 07:11 | balance between personal and digital.
| | 07:14 | So after looking at all of these
Handwriting Fonts, even though some of them
| | 07:18 | are beautiful and lovely, I don't think
any of them feel appropriate for our site.
| | 07:24 | Even my personal favorites like Sanvito
Pro, Ruluko and Myndraine, none of them
| | 07:30 | feel right for an official site for a city.
| | 07:33 | We need a font that's just a bit
more structured, a bit more official
| | 07:36 | and trustworthy because a city is not
just about community, it intersects
| | 07:40 | with business and government.
| | 07:42 | Overall, the Handwriting Fonts we
looked at are too old and traditional,
| | 07:47 | tootextural for reading on
the page or too casual.
| | 07:50 | So we aren't going to go through the
steps to use them in our city site.
| | 07:54 | In the next lesson, I will show you a
couple of examples of the fonts actually
| | 07:59 | in use so you can see for yourself how
they affect the look of the page,
| | 08:03 | and why none of them are appropriate.
| | 08:04 | In the meantime, if you want to use one
of these fonts for a different site,
| | 08:09 | you can access them from Google Web Fonts,
Font Squirrel or Typekit, the same way
| | 08:14 | we've been accessing all the
other fonts in this course.
| | Collapse this transcript |
| Looking at how using a handwritten font affects the look and feel of a web page| 00:00 | We didn't choose a Handwritten Font
to work with because none of them
| | 00:05 | are appropriate for our site.
| | 00:06 | They are too casual, too personal
or too old and traditional-looking.
| | 00:12 | But I went ahead and made pages on my own
using the three different handwritten fonts,
| | 00:17 | so you can see how they affect
the look and feel of our Web page.
| | 00:21 | Let's start with Myndraine.
| | 00:23 | It's the most systematic of the fonts;
| | 00:25 | it's the least like handwriting
even though there is a casual personal
| | 00:28 | feeling to the text.
| | 00:30 | To emphasize how casual Myndraine feels,
let's compare it three other Humanist
| | 00:35 | fonts we've used thus far in the course.
| | 00:38 | This is Merriweather which has a
Humanist structure but the Slab Serifs
| | 00:42 | keep it grounded and make it feel
more systematic than Myndraine.
| | 00:46 | This is Open Sans, which doesn't have
the extreme shoulders that Myndraine does,
| | 00:51 | so it feels more even on the page.
| | 00:54 | And this is Crimson Text, it has the
pen-formed terminals and Serifs so while
| | 00:59 | it might feel handwritten, it's
certainly doesn't feel casual.
| | 01:03 | Myndraine looks like someone with really
good handwriting could have printed it by hand.
| | 01:08 | Now it doesn't have a bold or italic so I want
to show you how I managed to get around that.
| | 01:13 | I haven't talked a lot about
creating hierarchy in this course.
| | 01:16 | I talk much more about it and go
over it in detail in my other course,
| | 01:20 | Typography for Web Designers.
| | 01:21 | But here, without a bold or italic,
I needed to figure out how to create
| | 01:25 | hierarchy between the h2, h3, h4, the
sentence about the Bay Road businesses,
| | 01:31 | the quote and the text.
| | 01:32 | So I used a couple of tricks
I've been using all along.
| | 01:35 | I primarily used size to create hierarchy
in the headings, but size wasn't enough
| | 01:41 | to make the article heading standout,
especially for the Events, people tend
| | 01:45 | to scan down the page looking for the next event.
| | 01:48 | So what I did is I set all the text
and the h3s to a very dark gray.
| | 01:53 | They are set at 333 instead of 000
and then the h4s are set to black.
| | 01:59 | This helps them feel slightly stronger,
slightly bolder than they are.
| | 02:03 | I also took a tip from an earlier page,
our Merriweather page, and I set the
| | 02:08 | quote in that nice dark brown, so it
pops out as a different voice but it
| | 02:12 | does so in a light way, not a strong way
and it doesn't compete with the headings.
| | 02:16 | I also added a red to the Bay Road businesses.
| | 02:19 | I was more concerned about this
sentence because it's important for
| | 02:22 | the businesses that people
know that they're still open.
| | 02:24 | So I wanted to set this as a different color.
| | 02:27 | I avoided blue because I didn't want it
to look like a link, and I also avoided
| | 02:32 | using really bright red.
| | 02:33 | Instead what I did was I try to draw
from a color already in our palette,
| | 02:37 | that it feels like it still
belongs with the page.
| | 02:40 | The last place we had had some emphasis
was in the word Union here, the name,
| | 02:45 | it had been italicized.
| | 02:46 | I decided to let that go, because, well
it's not a book title or a movie title
| | 02:51 | so it didn't have to be italicized.
| | 02:52 | And when I tried to set it a little
differently, there were just so many things
| | 02:56 | going on, on the page, it was
just becoming a little bit busy.
| | 03:00 | So looking at the overall texture of
the page in the finished hierarchy,
| | 03:03 | it's a casual personal feeling font that can
do its job even without a bold or an italic.
| | 03:08 | Again, I don't think it's appropriate
for this site but I'd recommend it for
| | 03:11 | the right content, a reminder that the
tops of the letters do get cut off if
| | 03:15 | you set Myndraine at 16 pixels or 11 pixels so
you need to plan accordingly and avoid those sizes.
| | 03:21 | I have provided the final files in the Exercise
Files if you want to see how I set the text.
| | 03:27 | A warning though, Myndraine does
use @font-face and the fonts were
| | 03:31 | downloaded from Font Squirrel.
| | 03:33 | So due to licensing issues, I haven't
provided the fonts, you'd need to go get
| | 03:36 | them from Font Squirrel yourself to
make the page work on your system.
| | 03:40 | So now let's take a look
at the page set in Ruluko.
| | 03:44 | We can see immediately that it's
softer and it feels more handwritten.
| | 03:48 | Again, Ruluko doesn't have an italic
or a bold so I had to work a little bit
| | 03:52 | harder to create the hierarchy.
| | 03:54 | Ruluko is a lighter weight font, so even
with the black article headings and the
| | 03:58 | dark gray text, it wasn't enough to
create the hierarchy that I wanted,
| | 04:02 | and I really wanted people to be able
to scan down and find an event.
| | 04:06 | So I ended up using all caps for the h4s.
| | 04:09 | Now usually I add a pixel of space
when I use all caps, because an all caps
| | 04:15 | setting tends to feel a little squished,
but I didn't have to do that here
| | 04:19 | because Ruluko's letter
spacing is very generous.
| | 04:22 | And again, you can see I used similar
approaches to creating hierarchy,
| | 04:27 | we have that brick red Bay Road businesses
sentence and the gray brown quote.
| | 04:32 | I love this font and recommend it.
| | 04:33 | I do have to point out one small problem
which could be a make or break problem
| | 04:37 | for other people but it's not
for me, and that's the apostrophes.
| | 04:41 | They look like they're straight.
| | 04:42 | Let me zoom in here using a Command++ on the
Mac and you can see that they're not curly.
| | 04:47 | I'm going to keep zooming in as far
as I can because the apostrophe is
| | 04:52 | very small and you can see that
it's not a very curly apostrophe.
| | 04:56 | And if I come back to Myndraine, again,
I'm going to zoom in as far as I can.
| | 05:03 | You can see that the apostrophe in
Myndraine has a bit more curve to it.
| | 05:06 | Ruluko's apostrophe looks more like
what we would call a dumb quote,
| | 05:11 | it's a prime symbol that's used to represent foot.
| | 05:14 | But, if you look very closely, you can see that
it actually has been designed by the designer.
| | 05:19 | It has a very slight curve to it and it
relates to the comma in the text so it's
| | 05:25 | just that this designer has chosen
to create a straighter apostrophe.
| | 05:29 | Let's go back out and so you can see,
it's just sort of loses some of the curve
| | 05:33 | that we maybe like to see with a font
that has so many delicate curves in it.
| | 05:38 | So again, some people might chose not to
use this font because of the apostrophe
| | 05:42 | but I would still use it.
| | 05:44 | If I had a site where I had a lot of
quotation marks then maybe I wouldn't
| | 05:49 | but it's perfect for this site in terms of
the number of apostrophes that are being used.
| | 05:53 | There's only a few of them so it would be okay.
| | 05:55 | Now let's see, I also
wanted to show you Sanvito.
| | 05:59 | Sanvito looks like it would be appropriate
if the town were a very old town
| | 06:03 | somewhere near Venice.
| | 06:04 | Sanvito has four weights;
| | 06:06 | I used the Light, the Regular and the Semi-bold.
| | 06:10 | I found the bold was way too heavy
and dark for the article headings,
| | 06:13 | it started to fill in.
| | 06:14 | So that's the semi-bold we're looking at.
| | 06:16 | And I usually use the light
weight for both the h1 and h3 headings.
| | 06:21 | But I found that the light didn't
quite work for the h3 headings,
| | 06:25 | it was starting to lose the sort
of inky feeling of the font.
| | 06:28 | They were getting a little bit too thin.
| | 06:30 | So instead, I kept them at the regular
weight and I also made them dark gray
| | 06:34 | similar to the text so they
didn't become too overpowering.
| | 06:38 | I feel a bit like a broken record but
I want to be clear that I think that
| | 06:42 | all three of these fonts are lovely
and they hold up cross-browser and
| | 06:46 | I would use them elsewhere.
| | 06:47 | They're just aren't appropriate for an
official government site, even one that
| | 06:51 | seems to focus on community.
| | 06:53 | In the next lesson, we're going
to look at how to pair fonts.
| | 06:56 | I can't promise but we might find a way
to include one of these fonts if we can
| | 07:01 | pair them with a font that is
more appropriate for the content.
| | 07:04 | I'll keep an eye on that
option as we move forward.
| | Collapse this transcript |
|
|
12. Pairing FontsUnderstanding what to look for when pairing fonts| 00:00 | The trick to choosing two fonts to pair
with one another is to choose fonts that
| | 00:06 | have both concord and contrast.
| | 00:07 | Concord means the fonts are in
harmony with one another, they
| | 00:11 | have some physical feature in common.
| | 00:12 | Contrast means the fonts have physical
features that are different from each other,
| | 00:16 | they aren't too similar.
| | 00:17 | If fonts are too similar it's almost like
wearing two colors that don't quite match,
| | 00:22 | it's disconcerting.
| | 00:25 | They look like they should be the same and
it's difficult to appreciate their differences.
| | 00:30 | If the fonts have too much contrast,
it's like wearing two colors that clash.
| | 00:34 | Physical features to consider
when picking fonts are Structure.
| | 00:37 | Do they have a similar bowl shape?
| | 00:39 | Do they have a similar aperture?
| | 00:41 | What about their stress, their
x-height, do they feel Humanist,
| | 00:44 | Transitional, Geometric?
| | 00:46 | We also look at Serifs.
| | 00:48 | Do they both have Serifs?
| | 00:49 | If so, what kind of Serifs do they have?
| | 00:52 | Are they both Sans Serif?
| | 00:53 | We also look at line weight.
| | 00:54 | Do they have a similar line weight
or a different line weight?
| | 00:57 | Are they heavy, light or in-between?
| | 01:00 | Do they have pen-formed strokes with
changes between thicks and thins or
| | 01:03 | are the strokes uniform?
| | 01:04 | Once you have a list of these elements
to consider you can look at two fonts and
| | 01:09 | ask yourself, where are they similar
and where are they different.
| | 01:13 | Today, we have font families with
both a Serif and a Sans Serif font.
| | 01:17 | If you're just learning to pair fonts,
working with a family like this
| | 01:20 | can make it a bit easier.
| | 01:22 | One family we've seen in this course is Meta.
| | 01:25 | Meta Serif Web Pro and Meta Web Pro
were designed to work together.
| | 01:29 | If we focus in on two words in the headings,
large for, we can see that the
| | 01:34 | a's and the e's have similar structures.
| | 01:36 | They have similar closed
counters and similar apertures.
| | 01:39 | We can see the relationship between
the x-height and the height of the stem
| | 01:43 | on the l is similar.
| | 01:44 | We can see that they have the same
shaped g, similar bowls though the Serifs
| | 01:49 | feel a tad rounder and similar fs.
| | 01:52 | If we relax our eyes and look at the texture,
we can see the Serif font on top
| | 01:56 | has more texture and the Sans Serif font
on the bottom looks more open and light
| | 02:01 | because of its letter spacing.
| | 02:03 | So for all the similarities, all the concord
between the two fonts, there is also contrast.
| | 02:08 | Another font we've looked at in
this course that has both a Serif and
| | 02:11 | a Sans Serif is Museo.
| | 02:13 | Here we are looking at
Museo Slab and Museo Sans.
| | 02:15 | Again, if we look at the words,
large for, in the heading we can see
| | 02:19 | the structural similarities.
| | 02:21 | And again, if we relax our eyes we can
see the slight difference in texture
| | 02:26 | due to the Slab Serifs in the top font.
| | 02:28 | Now if we look at PT Serif and PT Sans,
there are a few less similarities.
| | 02:33 | Again, if we look at the words, large for,
we can immediately see the g is different.
| | 02:38 | And if we look more closely, we can see
the x-height in the Sans Serif version
| | 02:41 | feels a little more generous compared
to the height of the stem on the l.
| | 02:46 | Finally, we can see the ascender on the
Sans Serif f feels a little shorter
| | 02:50 | as well, so there's a slightly different
ratio between ascender and x-height
| | 02:54 | in the Sans Serif font.
| | 02:56 | But the structures on the a and
the e are similar as are the bowls.
| | 03:00 | So when we relax our eyes and look at
the texture of the text, the two feel
| | 03:04 | like they belong together.
| | 03:05 | But not all font families come
with a pair you can just use.
| | 03:09 | Let's see if we can find one for Crimson
Text which is an Old style font we used
| | 03:13 | earlier in the course.
| | 03:15 | We can try and pair it with PT Serif, our
transitional font, but they look way too similar.
| | 03:20 | We don't even have to look closely at the
details in the fonts to know they look a lot alike.
| | 03:24 | We could try pairing with the Museo
Slab or Slab Serif font, they definitely
| | 03:28 | don't look too similar.
| | 03:30 | Museo Slab has a much
heavier presence in the text.
| | 03:33 | And when we look more closely at
the letters, we can see there are
| | 03:37 | differences all over the place.
| | 03:39 | The size of the x-height compared to
the stem of l, the shape of the g, the
| | 03:43 | shape of the bowl in the o,
even the shapes of the f and r.
| | 03:48 | Crimson Text's f and r curl over more
but I think there's too much going on here,
| | 03:53 | too much texture and perhaps
too many differences between the fonts.
| | 03:58 | They look too different to me.
| | 03:59 | One feels old and traditional while the
other feels strong and solid. I'll keep looking.
| | 04:04 | We could try pairing it with Merriweather,
our other Serif font, but I'm back to
| | 04:09 | an earlier problem, they feel too similar.
| | 04:11 | I find myself wondering, why
would I bother to use two fonts here?
| | 04:16 | Moving into the Sans Serifs, we could try
pairing Crimson Text with the Museo Sans.
| | 04:20 | It definitely doesn't have the problem
with too much texture that it did when
| | 04:25 | we tried pairing it with the Museo
Slab but I still don't care for the
| | 04:28 | old traditional Serif and the strong, solid
Geometric Sans, so we'll keep looking.
| | 04:34 | We could try pairing it with Nimbus Sans,
our transitional Sans Serif, but
| | 04:38 | Nimbus feels a little stiff compared to the
pen-formed humanist structure of Crimson Text.
| | 04:44 | If we look closely at the letters, we
can see that there are big differences
| | 04:47 | in the a and e both in the closed counters
and then the apertures, we can also see
| | 04:52 | the gs are different so are the fs.
| | 04:55 | And the feeling of the x-height
compared to the stem on the l,
| | 04:59 | it's not surprising they feel so different.
| | 05:00 | Finally, we can try pairing
Crimson Text with Open Sans which is our
| | 05:04 | Humanist Sans Serif font.
| | 05:06 | This might make the most sense.
| | 05:08 | The contrast between Serif and
Sans Serif is there but they both
| | 05:12 | have humanist structures.
| | 05:13 | Looking closely at the letters, I'm not
sure they're going to work as a pair
| | 05:18 | but they have a good shot.
| | 05:19 | I'm going to keep my eye on whether or
not Open Sans starts feeling too bubbly
| | 05:24 | compared to Crimson Text.
| | 05:26 | Open Sans bowl on the a is quite
generous, but both fonts have the open
| | 05:30 | apertures in the double-decker
g, so they might work.
| | 05:34 | Also, I did want to see if any of our
Handwriting Fonts could work with Crimson Text.
| | 05:39 | Myndraine obviously doesn't,
their textures are way too different.
| | 05:43 | Sanvito Pro could work, both fonts
feel old and handwritten with pens.
| | 05:47 | Ruluko is not an option, it's too light
and open and tall to pair with Crimson Text.
| | 05:52 | But looking at these Handwriting Fonts
reminds me, we can use what we know about
| | 05:56 | history to pair fonts.
| | 05:58 | Calluna which is a Venetian font pairs up
with Sanvito even better than Crimson Text did.
| | 06:03 | This is not surprising since they both
have characteristics found in books
| | 06:07 | from the late 1400s in Venice.
| | 06:10 | It's too bad Calluna's crossbar doesn't
hold up cross-browser because this would
| | 06:13 | be a lovely font pair, maybe someday.
| | 06:16 | And Ruluko feels so contemporary to me,
so light and Humanist but vertical too.
| | 06:21 | I thought it might pair well
with Merriweather, I think it does.
| | 06:24 | It's hard to tell here because Ruluko
feels a little big here, but this might
| | 06:28 | be a good pairing in the right
circumstances, especially since
| | 06:32 | Merriweather doesn't have an Italic.
| | 06:33 | So back to Crimson Text and
Open Sans, they might work.
| | 06:37 | When looking for two fonts to pair
together, it's a matter of balancing
| | 06:40 | contrast and concord.
| | 06:42 | It's also a matter of looking closely at
the letters but making sure you back up
| | 06:46 | a bit and consider the overall texture.
| | 06:49 | But here, I'm just using screenshots
of the Web Font's specimen sheet,
| | 06:53 | it's a quick comparison.
| | 06:54 | We won't really know how they
work together until we try them.
| | Collapse this transcript |
| Using one font for headings and another for text| 00:00 | There are many ways to work with
more than one font in a website.
| | 00:04 | One way is to use the fonts
for separate purposes.
| | 00:07 | For example, earlier in the course,
when we looked at Modern fonts, we couldn't
| | 00:11 | find any that worked in text.
| | 00:13 | That's because Modern fonts have such thin
thins they get lost on the screen at text sizes.
| | 00:19 | But if we were to use one font for
headings and the other font for text,
| | 00:23 | we might be able to use a
Modern font for a heading.
| | 00:27 | I followed the process from the last
lesson and compared Unna, our Modern font,
| | 00:32 | to all of the other fonts
we've used in this course.
| | 00:34 | There are lots of other fonts out there
but I wanted to keep it limited to the
| | 00:38 | ones we've already looked at.
| | 00:40 | Due to Unna's structure which isn't Humanist,
I think Nimbus Sans might work for us.
| | 00:44 | I'm a little concerned it might feel too
dark on the page with Unna, Nimbus Sans
| | 00:49 | has a slightly heavy weight,
so I've got Arial as a backup.
| | 00:53 | I actually think from experience that
Arial will work better but I want to
| | 00:57 | try Nimbus Sans first because I'm tired of
using default fonts and I want to use something new.
| | 01:03 | For the rest of this lesson, I'm going
to show you how I made decisions about
| | 01:07 | pairing Unna with a
Transitional Sans Serif font.
| | 01:11 | If you'd like, you can sit back and watch.
| | 01:13 | If you want to follow along in the CSS, you can.
| | 01:16 | I saved a copy of our Nimbus Sans page
in the Exercise Files for this chapter.
| | 01:23 | I've named it nimbus_sans_tk_unna_site.html.
| | 01:30 | Let's open it up in our Text Editor.
| | 01:33 | I've already added Unna to the file.
| | 01:35 | I want to point out two things.
| | 01:37 | One, we're using both the Google font and a
Typekit font in the same file. I rarely do this.
| | 01:44 | I find that when I do, the
fonts load a little more slowly.
| | 01:47 | But if you do do it, I recommend
putting the Google font syntax before
| | 01:52 | the Typekit syntax.
| | 01:54 | The other thing I want to point out is
that Nimbus Sans won't work on your page.
| | 01:58 | That's because the embed code is
from my kit and only works on my server.
| | 02:03 | So you need to go to Typekit, make sure
Nimbus Sans is in your kit, publish it
| | 02:08 | and copy and paste your embed
code into your HTML document.
| | 02:12 | Upload your file to the server.
| | 02:13 | When you're done, meet me back here.
| | 02:15 | Okay, now that your Nimbus Sans
is set let's look at what we have.
| | 02:21 | We can see that Nimbus Sans
is in the universal selector.
| | 02:24 | That makes sense because this file was
created from our old Nimbus Sans file.
| | 02:29 | I've already added Unna and we have
it for the H1 set at 37 on 39 pixels.
| | 02:35 | We have it in the H3 set on 30 on 30 pixels.
| | 02:39 | In the H4 it's set at 23 on 23 pixels
and I've set the font weight to normal
| | 02:45 | because Unna doesn't have a bold.
| | 02:48 | I've also added it to the quote set at
22 on 27 pixels and I've removed the
| | 02:54 | font style italic because Unna
does not have an italic.
| | 02:58 | Now let's take a look at this in the Browser.
| | 03:00 | You can see the two fonts I used on the page.
| | 03:03 | The headings and quote are in Unna and
the rest of the text is in Nimbus Sans.
| | 03:09 | I'd like to try and pull the heading
font into the page a bit so it doesn't
| | 03:13 | feel too separate from the text.
| | 03:14 | Using Unna in the quote helped me do this.
| | 03:17 | But there is a bit of a problem with hierarchy.
| | 03:20 | Unna doesn't have a bold or italic,
so I'm basically only using size to
| | 03:23 | separate the main heading from Around
Town and in Save the Date to the event
| | 03:29 | and article headings.
| | 03:31 | And there isn't quite enough hierarchy,
the headings feel too similar.
| | 03:34 | If we look at Save the Date and the
Library Used Book Sale, they sort of blend in,
| | 03:39 | there's not quite enough
difference between the two of them.
| | 03:42 | So I saved another version of the document
and I tried to make more hierarchy
| | 03:46 | simply by capitalizing our Around
Town and Save the Date headings.
| | 03:50 | I've also added one pixel of letter spacing.
| | 03:53 | Modern fonts have a beautiful contrast
between thick and thin and an elegant
| | 03:57 | structure and it really comes out when it's
set in all caps with a little bit of spacing.
| | 04:02 | But the problem now is that Around Town
and Save the Date stand out too much.
| | 04:07 | They're sort of big and clunky and they
begin to compete with the main heading.
| | 04:11 | So I saved another version of the document
and made these a little bit smaller.
| | 04:15 | I changed the size to 25 pixels.
| | 04:18 | Now they don't compete with the main
heading which is good but they've lost
| | 04:21 | some of their power in the right-hand column here.
| | 04:24 | Again, these two headings are
starting to feel too similar.
| | 04:27 | I think the problem is our H4,
which is the event and article headings.
| | 04:32 | They don't have quite enough hierarchy.
| | 04:34 | As I scan down this right column looking
for an event, they don't pop out at me.
| | 04:39 | So I saved the document again and changed
our H4s to 17 pixel bold Nimbus Sans.
| | 04:47 | This helps chunk the events
and make the titles pop out.
| | 04:50 | I'll scroll down again.
| | 04:51 | But now my main problem is that
the Nimbus bold is too heavy.
| | 04:56 | If we look here again at Library Used
Book Sale, the e is starting to almost
| | 05:00 | fill in, it feels very
heavy under the SAVE THE DATE.
| | 05:04 | So I decided to just give up and try to
make the Nimbus Sans work with the Unna,
| | 05:09 | and I made another version
using Arial. It's a good font.
| | 05:14 | It has the lighter strokes so the e is
no longer filling in here under Used, and
| | 05:20 | then also the text weight is
a little bit lighter as well.
| | 05:23 | And there is a good contrast between
the bold and the regular text, and I think
| | 05:27 | that contrast works really nicely with
the thick and thin strokes of the Unna.
| | 05:33 | So using the Arial feels a little bit
more appropriate to me with the Unna.
| | 05:37 | Nimbus Sans, we'll pop back to that.
| | 05:39 | It's a lovely font but it just
doesn't work in this context.
| | 05:43 | The Arial feels lighter and it
feels a little bit more cohesive.
| | 05:47 | I've provided both the final Nimbus Sans
file and the Arial file in the final
| | 05:52 | Exercise Files, if you want
to see the final type settings.
| | 05:56 | Working with two fonts means spending
time and figuring out the hierarchy.
| | 06:01 | It also means being willing to make
changes as you work through the process.
| | Collapse this transcript |
| Using different fonts for different kinds of information on the page| 00:00 | Another way to use two fonts on
a page is to integrate them more.
| | 00:05 | Instead of choosing to use one font for
the headlines and another for the text,
| | 00:09 | try using both fonts for text.
| | 00:12 | The trick is to identify different
kinds of information on the page,
| | 00:16 | then use one font for one kind of
information and the second font for
| | 00:19 | another kind of information.
| | 00:21 | We're going to do that in this
lesson using PT Serif and PT Sans.
| | 00:25 | The two were designed to work together
so we know we've got a great pair.
| | 00:29 | For the rest of this lesson, I'm going
to show you how I made decisions about
| | 00:33 | integrating PT Serif and PT Sans on the page.
| | 00:38 | If you'd like, you can sit back and watch.
| | 00:40 | If you want to follow along in the CSS, you can.
| | 00:44 | I've made a copy of the PT Serif file
we've made earlier in the course and
| | 00:49 | I've named it pt_serif_sans_tk_site.html.
| | 00:56 | It's available in the
Exercise Files for this lesson.
| | 00:59 | Open that up in your text editor.
| | 01:03 | I want to show you the changes
that I make along the way.
| | 01:05 | You'll notice I've already included the
PT Serif and PT Sans fonts, but I want
| | 01:12 | to point out that this Typekit
code won't work for your file.
| | 01:16 | This embed code is from my Typekit
account and works on my server.
| | 01:20 | So you need to put PT Serif and PT Sans
in your Typekit, publish it, copy and
| | 01:26 | paste your embed code into this HTML
document and upload it to your server.
| | 01:30 | When you're all done, meet me back here.
| | 01:33 | Now that your Typekit is all set, let's
scroll down and take a look at this document.
| | 01:39 | The PT Serif is in the universal selector
which isn't surprising because we used
| | 01:44 | the original PT Serif file for this file.
| | 01:47 | I've only added PT Sans all the way
down at the end to an a so all of my
| | 01:54 | links will be in PT Sans.
| | 01:56 | Let's take a look at that in the browser.
| | 01:58 | So we can see in the browser that everything
is PT Serif except for the links are Sans.
| | 02:04 | I did this because when I looked at
this page, I thought the links are
| | 02:09 | very business-like and official.
| | 02:10 | They are for things like paying your
taxes online and reporting a pothole.
| | 02:15 | So I thought the Sans Serif font
could work better there, whereas
| | 02:19 | the articles are a little bit more human
interest where one could go and have
| | 02:24 | a nice dinner perhaps.
| | 02:25 | So I thought the Serif font would work
better with the text in the articles.
| | 02:29 | But there's a slight problem,
| | 02:31 | since everything is Serif in this area
of the page and only the links are Sans,
| | 02:37 | the two don't feel integrated.
| | 02:39 | It feels more like we were doing in
the last lesson using one font for
| | 02:43 | one purpose and another font for the
other purpose and they're not integrated.
| | 02:47 | The only place they start to feel
integrated is here where we have a
| | 02:51 | Serif heading with Sans Serif links, and
I'd like to create more of that integration.
| | 02:56 | So I made a copy of this file
and let me show you what I did.
| | 03:02 | In the CSS, I made the h4 a PT Sans
and then I also specified that any of the
| | 03:10 | P-tags used in the news container,
which is our right-hand container,
| | 03:14 | should be PT Sans, and then I also set that
any of the line items in that news container
| | 03:19 | should also be PT Sans, and I
made sure the acronym are PT Sans.
| | 03:23 | So I'm bringing some more PT Sans into the file.
| | 03:27 | I did this because I wanted to bring
that Sans Serif into the page more,
| | 03:32 | but I really wanted to keep the text in
these articles as the Serif because, again,
| | 03:36 | those are our human interest stories.
| | 03:39 | Now looking at this, there is one
slight problem and I think it's just that here,
| | 03:44 | the heading looks very nice with
these events here, but the heading,
| | 03:49 | the h4 is looking a little bit
small compared to the Serif.
| | 03:52 | I think our Sans Serif has a tiny bit
smaller x-height than our Serif does.
| | 03:57 | So our Sans Serif is looking a little small.
| | 03:59 | So I want to bump those up.
| | 04:01 | Now these are on h4, but I don't want
to bump up both h4's, only the one here.
| | 04:05 | So let me show you what I did.
| | 04:08 | In the next version, I said that any
of the h4s in my content container,
| | 04:14 | which is my middle column,
should be a little bit bigger.
| | 04:17 | You can see here there is 17
pixel on 17 instead of 16 on 16.
| | 04:21 | Let's take a look at how that
worked out in version 3 here.
| | 04:27 | That works much better.
| | 04:28 | Now this heading is a little bit larger
and it works better with this Serif font
| | 04:33 | and this one is a little bit smaller
and works better with the Sans Serif font.
| | 04:37 | Now usually when I work in print, I try
to find a perfect size for the headings
| | 04:42 | that would be our h4 headings here
and use it everywhere on the page.
| | 04:46 | But unfortunately, when we're working
on the Web, we can't use half pixels.
| | 04:50 | I couldn't find a perfect middle size for those.
| | 04:53 | So we're using two slightly
different sizes and that's okay.
| | 04:57 | It's much more important that we keep
the hierarchy of the page and we help
| | 05:01 | people read the page
than it is to follow a rule.
| | 05:04 | One other thing here, we've started
integrating the type but I think we could
| | 05:09 | integrate it a little bit more.
| | 05:10 | What I'd like to do is bring in a
little bit more Serif over into this
| | 05:14 | right-hand column, I think a great
place to do it would be here, in the quote
| | 05:18 | because while the quote is a slightly
different kind of information than the
| | 05:23 | other text in that column and so it
won't feel out of place if it's set
| | 05:27 | differently from the rest of
the text in the right-hand column.
| | 05:30 | So we're going to go and make that
Serif and then up here, in our
| | 05:34 | main heading, it's all Serif.
| | 05:35 | I'm thinking, well, why can't I
bring some Sans Serif in there as well?
| | 05:38 | So I'm going to bring in a
Sans Serif for Welcome to.
| | 05:42 | I'm interested in doing that.
| | 05:43 | I think the Sans Serif will hold up
really nicely at that small size and
| | 05:48 | I enjoy the Serif font large.
| | 05:50 | So I've decided to do it that way but
if you'd prefer to do the small type in
| | 05:54 | Serif and the large type in Sans
Serif that would work fine as well.
| | 05:58 | So let's take a look at the
next CSS file that I had created.
| | 06:02 | You can see that I've changed the Welcome
to PT Sans and I've kept it at the same size.
| | 06:07 | And down here, I changed the quote to PT Serif.
| | 06:10 | So let's take a look at how that works.
| | 06:13 | Now we're in the fourth version of
this file and that's looking much better.
| | 06:17 | We're really starting to see here we have
Serif, Sans Serif, Serif, Sans Serif, Serif.
| | 06:23 | So these fonts are really integrated
along the right-hand column and
| | 06:27 | it's a nice, lovely integration
up here at the top as well.
| | 06:30 | I'm only noticing one last thing and this
is related to how information is chunked.
| | 06:36 | I feel like these lines here;
| | 06:37 | the Date, Time and Place
feel a little bit loose.
| | 06:40 | I'd like them to feel a
little bit more cohesive.
| | 06:43 | So let's go and take a look at
the last thing I did in our CSS.
| | 06:49 | For that right-hand column, the news
container for both the P element,
| | 06:53 | I changed the line height to 21 pixels
and I did the same in the line item
| | 06:58 | element in that same container.
| | 07:00 | Let's take a look at that. That's much nicer.
| | 07:03 | Comparing it back to the original version,
when only the links were Sans Serif,
| | 07:07 | let's take a look at that, the
page just feels a little flatter.
| | 07:12 | I think having two fonts helps slightly
differentiate the different kinds
| | 07:15 | of information and it gives
the page a subtle depth.
| | 07:18 | And here, let's take a look at what I mean.
| | 07:21 | If we pay attention to the Save the
Date area, where we go from Serif to
| | 07:26 | Sans Serif in two different weights to a
Serif, keep your eye on that while I pop
| | 07:31 | back over to our original version, and
you can just see there's a nice subtle depth,
| | 07:35 | just sort of layers of information there.
| | 07:38 | Integrating fonts this
way has its own challenges.
| | 07:41 | It would be easy for this page to get
chaotic and each font has four weights
| | 07:46 | and styles so we have eight to work with.
| | 07:48 | I was careful to use a system;
| | 07:50 | the h1, h2, and h3 are all set in the PT
Serif and the h4 is a PT Sans Serif Bold.
| | 07:59 | I made one slight change to the h4;
| | 08:01 | it's a little bit bigger in my center column.
| | 08:03 | But otherwise, they are the same.
| | 08:05 | Plus, all the text in the center
column is Serif while all the text in
| | 08:09 | the right-hand column, except
the quote, is Sans Serif.
| | 08:13 | I've provided a final version of this
page in the Exercise Files, so you can
| | 08:17 | see the final CSS styling if you'd like.
| | 08:20 | When you're mixing and matching fonts,
try doing so with a thoughtful system.
| | 08:24 | If you find a page you're working on is
getting too complex, try backing up and
| | 08:28 | getting the page to work in just one font.
| | 08:30 | Then you can add the second font in,
like we did in this lesson, adding the
| | 08:34 | PT Sans to the existing PT Serif page.
| | Collapse this transcript |
| Mixing and matching fonts within text| 00:01 | A third way to use more than one font
on a page is to use one font for the text
| | 00:07 | and to bring in another font when
you need it for special characters.
| | 00:10 | This can happen when text has mathematical
characters in it or words or phrases
| | 00:15 | that need to be set in a non-Latin script.
| | 00:18 | Today, we're going to integrate another
font into the Merriweather version
| | 00:22 | of this site which we made in the
chapter about other Serif fonts.
| | 00:26 | One of the things that I missed about
Merriweather is it doesn't have an italic.
| | 00:31 | This is isn't terrible.
| | 00:33 | We were able to work around it and we
created hierarchy into separate voice
| | 00:37 | for the Italic, but when I was looking
at some screenshots I've taken of the
| | 00:41 | Handwriting Fonts, I realize that Ruluko
looks somewhat similar to Merriweather.
| | 00:47 | They both are somewhat narrow
fonts with a vertical structure.
| | 00:51 | They both have open Humanist forms and
they both have sort of thin strokes and
| | 00:57 | they feel pretty monoline.
| | 00:58 | It occurred to me that they look lovely together
and they might be able to work together.
| | 01:03 | I wondered if I could use Ruluko as a
sort of italic for Merriweather, would
| | 01:09 | they be a good enough match?
| | 01:10 | I've saved the Merriweather page that
we made earlier in the course and
| | 01:16 | I've renamed it merriweather_ruluko_site.html
and it's available in the exercise
| | 01:24 | folder for this chapter.
| | 01:26 | Let's open it in the text editor.
| | 01:28 | You can see that I've already added the
Ruluko to the Merriweather page and
| | 01:36 | I've changed the em which is our italic
for the word union to Ruluko and I have
| | 01:42 | removed all the styling.
| | 01:43 | I have kept the font style normal
because in em has a default style of italic
| | 01:48 | and I don't want it to come in as Ruluko Italic.
| | 01:52 | I've also added Ruluko to the quote
and I've kept everything else the same.
| | 01:58 | These are all the same sizes
and colors that we used in
| | 02:00 | the original Merriweather site.
| | 02:01 | So let's take a look at how that worked.
What happened is that the Ruluko is
| | 02:07 | way too small to work with the Merriweather.
| | 02:10 | We can see here the union is very small
in this sentence and the quote feels
| | 02:16 | a little bit weak and small.
| | 02:18 | So what I did was I made a second
version of this page and I made the fonts
| | 02:24 | a little bit bigger and don't be
surprised if you have to do this.
| | 02:28 | Sometimes you need to make the second font a
little bit bigger or smaller to make it work.
| | 02:32 | So I changed the em to use here in union
to 16 and I changed the quote here to
| | 02:40 | 17 pixels on a 22-pixel line height.
| | 02:44 | Now this is much larger than the
Merriweather text size of 14 pixels.
| | 02:48 | But let's see how that
looks in my second version.
| | 02:51 | It looks really good.
| | 02:53 | The union just flows right in that sentence.
| | 02:56 | Now sometimes a font pair can't be
used this way because the second font will
| | 03:01 | look a hair too small at one size and
then look a hair too big when it's set
| | 03:06 | only one pixel bigger and unfortunately, we
can't work with one-half pixels. But this worked.
| | 03:11 | We got lucky.
| | 03:13 | Union flows right in with the rest of the text.
| | 03:15 | It doesn't pop out of the text.
| | 03:17 | It just has a subtle emphasis.
| | 03:18 | It's really nice and the quote down
here is obviously a different font but when
| | 03:24 | that works structurally well with
Merriweather, it doesn't feel out of place.
| | 03:30 | When you need to mix fonts within the
same sentence or paragraph and you don't
| | 03:35 | want them to be in conflict with each
other, look for two fonts that have a
| | 03:39 | similar internal structure
as well as a similar weight.
| | 03:43 | If Ruluko or Merriweather had been a
heavier font, this wouldn't have worked.
| | Collapse this transcript |
| Looking at how using two fonts affects the look and feel of a web page| 00:01 | Using two fonts changes the
overall texture of the page.
| | 00:04 | Here, we have the original Arial page.
| | 00:07 | It works fine all in Arial.
| | 00:09 | It has a crisp, clean look.
| | 00:11 | It has good hierarchy, it's readable
and the letter forms and spacing are good.
| | 00:15 | But when we added the modern font, Unna, to the
page, the overall feeling of the page shifted.
| | 00:21 | Unna gives the page a little
contrast, a little elegance.
| | 00:24 | We're using Unna in the
heading and the quote only.
| | 00:28 | That's because the thin strokes in
modern letters don't hold up on screen
| | 00:32 | when used for text.
| | 00:33 | The hierarchy works as does the visual
relationship between the vertical forms
| | 00:37 | in Unna and the more vertical
structure of Arial which is a
| | 00:41 | Transitional Sans Serif font.
| | 00:43 | But part of choosing a Web font
is recognizing when not to use one.
| | 00:47 | I still wouldn't use Unna
for this site. I enjoy Unna.
| | 00:51 | It's got well-proportioned letters, overall
good spacing and it holds up cross-browser.
| | 00:56 | But I still wouldn't use it
for this site for two reasons.
| | 00:59 | First, take a look at Around Town.
| | 01:03 | It feels a little fuzzy around the edges.
| | 01:05 | Now I'm going to zoom in on it using
Command++ on the Mac and we can see how it
| | 01:10 | has these beautiful crisp thin lines.
| | 01:13 | Unna is a modern font, has
these amazingly thin lines.
| | 01:18 | The think strokes are part of what
makes Unna beautiful, but the strokes
| | 01:22 | can't hold up at this size back at
the original size on the screen.
| | 01:27 | This is not a fault with the font;
| | 01:29 | it's happening because I'm trying to
use a font with such thin thins for a
| | 01:34 | heading that's still too small
to show off its best features.
| | 01:38 | This font would be more beautiful, more
elegant and more graceful if it was used larger.
| | 01:43 | The second reason I wouldn't use this font is
because the name of the city is Springfield.
| | 01:48 | Look at the main heading.
| | 01:49 | See the awkward relationship between
the F into the I. In order to keep the
| | 01:54 | terminal on the F from slamming into
the dot on the I, there's too much space
| | 01:58 | between the letters.
| | 02:00 | Many fonts for print fix
this by creating a ligature.
| | 02:03 | A ligature is a single character
designed to represent two characters.
| | 02:08 | Here's an example of a ligature from Minion Pro.
| | 02:11 | It looks sort of strange and seems
big, but you can see down here in the
| | 02:16 | word Springfield that it does look like an F
and an I. Most Web Fonts don't offer ligatures.
| | 02:22 | So it's important.
| | 02:23 | It's especially important if you're
webpage is for a city called Springfield to
| | 02:28 | use a font that has a good relationship
between the F and I. We can see
| | 02:33 | the problem repeats itself
down here in the word benefit.
| | 02:37 | Now to be fair, neither of these
problems make Unna a bad font.
| | 02:42 | They just make it an inappropriate
font for this project.
| | 02:46 | Now let's take a look at the
PT Serif page we created back in
| | 02:50 | the Transitional Fonts chapter.
| | 02:52 | The PT Serif page is fine.
| | 02:54 | We have good hierarchy, good chunking of
information and the Serif font gives it
| | 02:58 | a slightly more traditional feeling.
| | 03:01 | But there are benefits to using two fonts.
| | 03:03 | Here we have the site with PT Serif and PT Sans.
| | 03:07 | The article headings set in the PT Sans
Bold really pop out and that's because
| | 03:13 | the strokes are more prominent and it
knows the contrast between the bold Sans
| | 03:17 | Serif heading and the regular Serif text.
| | 03:19 | I think this helps to emphasize
the humanist voice of the articles.
| | 03:24 | Meanwhile, in the right hand column,
the date and time and place set in
| | 03:29 | Sans Serif also emphasizes that
this is a list of information.
| | 03:33 | This is different from the articles.
| | 03:35 | The Carnegie quote feels even more
humanist and personal in the Serif Italic
| | 03:40 | because it has the Sans Serif to contrast to.
| | 03:43 | Using the PT Serif and PT Sans
together doesn't just make the page
| | 03:47 | more visually appealing,
| | 03:49 | it could potentially
make it slightly more usable.
| | 03:51 | The shift in font further chunks the
information both in terms of creating
| | 03:56 | stronger hierarchy and in terms of
subtly associating different kinds of
| | 04:00 | information on the page with different fonts.
| | 04:03 | So in this page we used the PT Serif and
PT Sans which were designed to work together,
| | 04:07 | but earlier in the chapter, we looked
for a font to pair with Crimson Text
| | 04:11 | and it looked like Open Sans
would be a good option.
| | 04:15 | So I went ahead on my own, we didn't do
this in the course together, and I made
| | 04:20 | a page using Crimson Text and Open Sans.
| | 04:24 | I used the PT Serif and PT Sans model
as my guide that is I use the same
| | 04:29 | layout in terms of where to use the
Serif versus the Sans Serif, where
| | 04:33 | to use regular, bold and italic.
| | 04:35 | So I set up this page with Crimson Text
and Open Sans and the two work fine
| | 04:40 | together, but I'm not sure
they're a perfect pair.
| | 04:43 | Now, this is a personal preference and
other typographers might disagree with
| | 04:47 | me completely, but I think the Open Sans
gets a little too open and bubbly here
| | 04:53 | compared to the darker, inkier, more
traditional look of the old styled Crimson Text.
| | 04:58 | It's not a bad pair here where the
headings really contrast with the text.
| | 05:03 | But over here under the links, they
don't feel like the best match to me.
| | 05:07 | I think they're a little bit too different.
| | 05:09 | If I look at this a in Departments,
it's a little bit bubbly compared to
| | 05:12 | the closed counter form on the
Old Style a there in Popular.
| | 05:17 | And it really sort of bothers me
here over in the quote where the
| | 05:21 | Old Style Italic is used.
| | 05:22 | It feels so narrow and inky.
| | 05:25 | I'm not quite sure I would pair these fonts.
| | 05:27 | But again, another typographer
might say, I like the contrast.
| | 05:31 | I would use these two because of the contrast.
| | 05:33 | I'd like to compare this one here with
the Crimson Text which, by the way,
| | 05:37 | was so inky and dark, I actually had to
use that sort of lighter brown color
| | 05:42 | to pull it back a little.
| | 05:43 | Let's compare that if you keep your eyes
right there to the one in the PT Sans
| | 05:48 | and Serif and there's just more continuity here.
| | 05:51 | That's what I prefer.
| | 05:52 | Again, somebody else might
say no, I love the contrast.
| | 05:55 | I think using the PT Serif and PT Sans
actually doesn't have enough contrast.
| | 05:59 | So at some point, as with all visual
arts, typography does become a matter
| | 06:04 | of taste. Either of these two would
actually be a pretty good combination
| | 06:08 | and I have to admit;
| | 06:09 | if we look at the original page set
all in Crimson, you see this looks very
| | 06:14 | old-fashioned and going back to the one
with the Open Sans, it definitely pulls
| | 06:19 | the page into this century.
| | 06:21 | It doesn't feel quite so old and traditional.
| | 06:23 | But I would point out that the Crimson
Text Italic has a problem with the F-I pair
| | 06:28 | as well and it doesn't have the
problem appear with the main heading
| | 06:32 | but down here in the italic,
it's driving me a little batty.
| | 06:35 | It's beginning to read benef it its people.
| | 06:38 | So if I were to use the Crimson Text,
I would not use italic for this quote.
| | 06:42 | It would probably work fine for another quote.
| | 06:45 | The final page we're going to
look at was our Merriweather page.
| | 06:49 | This is the original Merriweather page
we made and as you'll remember,
| | 06:53 | we added Ruluko in place where
we might have used italics.
| | 06:58 | It doesn't make a big difference in the
texture of the page, but it does give us
| | 07:02 | a slight break in the texture for the quote.
| | 07:04 | So there are multiple ways to mix and
match fonts on the page and there are
| | 07:08 | countless fonts to consider
when creating a font pair.
| | 07:11 | I recommend keeping an eye on the
structure, weight and overall texture
| | 07:15 | of the fonts you're considering.
| | 07:16 | So you can pick two fonts with a
good balance of similarity and contrast.
| | 07:21 | I also recommend keeping your eye and
how the fonts actually behave in context.
| | 07:26 | Do they do the job you need them to do?
| | 07:28 | Be willing to change one
of the fonts if necessary.
| | Collapse this transcript |
|
|
13. Script Display FontsUnderstanding Script fonts| 00:00 | Script fonts don't all look alike.
| | 00:03 | Some look elegant, reminiscent
of fine handwriting created with
| | 00:07 | a pointed, flexible quill.
| | 00:09 | Others feel kitschy, fun, reminiscent
of the scripts popular in the 1950s.
| | 00:15 | Even though Scripts can look very different
from each other, they have common elements.
| | 00:19 | A Script is based on handwritten forms.
| | 00:21 | The lowercase letters are linked and
there's usually a forward slant to the letters.
| | 00:27 | The first lead type Script font was
designed in 1577 by Robert Granjon about
| | 00:33 | 105 years after Nicolas Jenson created his
Venetian font and almost 150 years before
| | 00:39 | William Caslon designed his Old Style font
| | 00:43 | In fact, using a fancy Script on a
document was a status symbol in the late 1500s.
| | 00:49 | People especially preferred Scripts
with detailed, complicated flourishes
| | 00:54 | and contrast between thick and thin strokes.
| | 00:56 | Of course, at the time, letter-pressed
printing technology didn't allow for
| | 01:01 | printing such thin details.
| | 01:03 | This didn't happen for another 150
years when John Baskerville designed
| | 01:07 | his Transitional font.
| | 01:08 | So most fancy Scripts were
originally printed with engraved copperplate.
| | 01:13 | The copperplate could reproduce fine lines.
| | 01:16 | Unfortunately, copper is much softer
than lead so the plates could only be used
| | 01:21 | to make about 200 impressions.
| | 01:23 | Then the plates would have to be
ground down and the message re-etched.
| | 01:27 | Now, this may seem like it doesn't have anything
to do with Web fonts, but I think it does.
| | 01:33 | The story of early printed Script fonts
reminds me of how modern fonts like Unna
| | 01:37 | don't hold up well in text on the screen.
| | 01:40 | They don't have a chance to show off
their beautiful, delicate thin strokes
| | 01:44 | unless they're used as very large headings.
| | 01:47 | It seems to me that today's screens and browsers
are similar to lead type in the late 1500's.
| | 01:53 | Neither can reproduce fine
lines in their full glory.
| | 01:56 | Of course, back then printers could turn
to engraved the copperplate even if
| | 02:00 | it meant re-engraving the plate multiple
times to print a large run of documents.
| | 02:05 | Today, we don't have that option, but we can
pick a Script that holds up well on screen.
| | 02:10 | We can pick a Script font with good links
on the lower case letters, comfortable
| | 02:14 | forward slant, and strokes that
don't get fuzzy or lost on the screen.
| | Collapse this transcript |
| Choosing a Script font for display use| 00:00 | So now that we know more about Script fonts,
we need to pick one to use.
| | 00:04 | There are a couple of Scripts on
Typekit that I'd be interested in using
| | 00:08 | for this project, but none are available
in the trial plan and since there are
| | 00:13 | so many Script fonts to choose from, we're going
to just choose a font from Google Web Fonts.
| | 00:17 | I don't usually use a Web font specimen
sheet when looking for a display font to
| | 00:22 | use for a single headline, like
we're going to do in this next project.
| | 00:26 | Display fonts are fonts that
are not meant to be used in text.
| | 00:29 | They are designed for display purposes
only so that is, they were designed to
| | 00:33 | only be used in headlines.
| | 00:35 | So mostly, I just need to know if the
font works for the phrase I'm going to use.
| | 00:40 | So in Google Fonts we can narrow
down the fonts that we're looking at.
| | 00:44 | We can go over the Filters and we can
turn-off everything except for Handwriting.
| | 00:49 | When we do that we have 102
font-families to choose from.
| | 00:52 | I usually like to sort by Alphabet,
that way if I get interrupted in the middle
| | 00:58 | of my search I can more quickly and easily
figure out where I ended and where to start again.
| | 01:04 | And here you'll notice that they give
us a sentence; Grumpy wizards make toxic
| | 01:08 | brew for the evil Queen and Jack, but
you should always, always test your font
| | 01:13 | in the phrase you're going to be using.
| | 01:14 | Now we're going to be doing a Web page ad
for the library-used book sale and the
| | 01:20 | headline for that ad is Reading one
book is like eating one potato chip.
| | 01:28 | So I've typed that in there and you
can see that all of the fonts have now
| | 01:32 | changed to our phrase, that's great.
| | 01:33 | But we're not going to be using it this small;
| | 01:36 | we're going to be using a big display font.
| | 01:38 | So we can change the size, let's go up
to maybe 72 and this looks to be about
| | 01:43 | the right size although you'll see that quite
a few of the fonts get cut off at this size.
| | 01:49 | So the ad lists some of the kinds of
books they'll have for sale and one
| | 01:53 | category is romance.
| | 01:55 | I'm interested in finding a Script that
feels traditionally romantic to use for the ad,
| | 01:59 | I know it's sort of corny
but I'd like to try it.
| | 02:02 | It might be a nice way to subtly bring
the content of a book into the ad.
| | 02:08 | Through the magic of video, I was able
to weight through the 102 Handwriting
| | 02:13 | fonts and pick a couple to show you.
| | 02:15 | I set them quickly in my HTML document
using a size close to what I've thought
| | 02:20 | I'd probably use in the ad.
| | 02:22 | I also set them at dark gray, not black.
| | 02:24 | It softens the relationship between the
heading in the background and this
| | 02:28 | helps my eyes when I'm looking
at so many different fonts.
| | 02:31 | So first here are some nice fonts
that I'd use if I was looking for
| | 02:35 | a different kind of Script.
| | 02:36 | Neither of these are as romantic as
I'd like, but they're great fonts.
| | 02:40 | This is Lobster Two which always feels
sort of 1950 small-town grocery store to me,
| | 02:46 | and Cookie which I
wasn't familiar with before.
| | 02:49 | I like it for this phrase.
| | 02:51 | It's got good solid O's, good
letter forms, good word spacing;
| | 02:55 | even good links between letters.
| | 02:57 | The e is not linked to the k in
the word like, but that's okay.
| | 03:01 | It feels right, it feels like the
person writing made the k then picked up
| | 03:05 | their pen and made the e. But again
unfortunately, it's not quite as romantic
| | 03:10 | as I'd like it to be.
| | 03:10 | Lover's Quarrel is more romantic, but
I don't care for the way the capital R
| | 03:16 | interacts with the lower
case e in the word Reading.
| | 03:18 | The swish touches the e and
it looks like it's a mistake.
| | 03:22 | Also the e is a bit too active for my taste.
| | 03:25 | And it has much longer ascenders and descenders.
| | 03:28 | I think I want to cluster the words closer
and I can't because the ascenders and
| | 03:32 | descenders are so long.
| | 03:34 | Monsieur La Doulaise is practically the
epitome of an old, elegant, romantic Script,
| | 03:39 | but may be I don't want something
quite this old-looking.
| | 03:43 | I think I want something with a bit
more presence, something that can be set
| | 03:47 | a little bigger in the
space I've got to work with.
| | 03:50 | That means I'm going to need less
slant and shorter ascenders and descenders.
| | 03:54 | I guess I want something a
little more 20th Century at least.
| | 03:58 | At first glance this font, Great Vibrations,
is exactly what I'm looking for,
| | 04:02 | except the o has a lot of personality.
| | 04:05 | Unfortunately I keep seeing a pair of
eyes looking out of the word book and the
| | 04:10 | then the word potato gets a little hard
to read because of the Os and the A.
| | 04:14 | So it's just not going to
work with my particular words.
| | 04:18 | Dynalight is not bad, but it feels a
little angular, I want something more flowing.
| | 04:22 | And the word spaces are a
tiny bit too wide for my taste.
| | 04:27 | Bilbo Swash Caps is quite nice, but
not exactly what I'm looking for,
| | 04:31 | I want something with more flow.
| | 04:33 | Pinyon Script is very elegant looking,
I thought this would be what I was
| | 04:36 | looking for but now I think it might be
too cliche, too delicate, may be too
| | 04:41 | boring for such a great quote.
| | 04:44 | Rochester isn't elegant and cliche
enough, it's too bubbly for this project.
| | 04:48 | Though I like it and I
would use it for another one.
| | 04:51 | Dancing Script might work, it has a lot
of flow, it has some slant but not too much,
| | 04:55 | the connections are good.
| | 04:57 | It has variations in the form,
so it has a lot of energy.
| | 05:01 | And I had looked at this font Euphoria
with a different phrase in the past,
| | 05:05 | and I have to admit, I didn't like it.
| | 05:07 | I did not like how none of the letters connect.
| | 05:10 | I did not like how the d
center in the g is broken.
| | 05:13 | I thought it looked too unique and would
emphasize that this was a digital Script,
| | 05:16 | but when I set it for this phrase
for this project, I think it works quite well.
| | 05:21 | I enjoy how each letter feels flowing
and romantic, but with a little energy.
| | 05:26 | And I think the broken letters
sort of work here too.
| | 05:29 | And may be it's because
the quote is sort of funny.
| | 05:31 | It isn't so serious.
| | 05:33 | So when looking at Display fonts I
always try and keep an open mind because
| | 05:37 | a font that didn't work for me for
one project could work for another.
| | 05:40 | But you know what none of these fonts
are feeling exactly right to me, and
| | 05:44 | quite frankly, it's a little overwhelming.
| | 05:47 | After collecting and looking at so many
possible display fonts, you might need
| | 05:51 | to take a break and come
back to them with fresh eyes.
| | 05:54 | And that's what I did, I set this
project aside for a couple of hours.
| | 05:58 | When I came back to it I had a
better understanding of my problem.
| | 06:02 | My problem is that I challenged myself
to use a romantic font, but the romantic
| | 06:06 | fonts don't feel strong enough.
| | 06:08 | They don't have the impact I want them to have.
| | 06:11 | And a lot of the other fonts are fine,
but they feel a little too casual to me.
| | 06:15 | Even if they have lovely letters, loops and
connections, they don't have the impact I want.
| | 06:20 | So in the end, I decided to go with the
Script that I liked the best with the quote,
| | 06:25 | Lobster Two Italic is a strong
powerful Script that helps the sentence
| | 06:30 | just hit us over the head.
| | 06:32 | I made sure to test it cross-browser
and there is a slight problem in
| | 06:35 | Internet Explorer 7 and 8.
| | 06:37 | The descenders on the g get slightly cut off,
the connections also get slightly longer.
| | 06:42 | This happens on a couple of the browsers.
| | 06:44 | Oddly enough on Opera 11 for Mac, the
connections disappear and the letters no
| | 06:49 | longer connect at all.
| | 06:50 | Opera seems to have the most
problems with rendering Web fonts.
| | 06:54 | These issues are really
more annoying than anything.
| | 06:56 | The overall legibility and the
feeling of a heading is still good.
| | 07:00 | So I'm going to go ahead and use this font.
| | 07:02 | I do want to take a moment to point out
something I avoid when choosing Script
| | 07:07 | fonts and that's fonts that
look like they've been live traced.
| | 07:10 | Now Live Trace is a filter in Adobe
Illustrator that lets you scan in a drawing
| | 07:14 | or handwriting and you can
turn it into a vector-based image.
| | 07:17 | This font looks live-traced to me.
| | 07:19 | The edges aren't smooth and the
thick and thin strokes don't make sense.
| | 07:23 | Looking at the descender on the
letter g, it looks like it was composed of
| | 07:28 | shorter straight segments, instead
of looking like a flowing curved line.
| | 07:32 | And there's also a problem
with how the e and a connect.
| | 07:37 | I realize this font is trying to convey
a casual look but I think the quality of
| | 07:41 | line gets in the way.
| | 07:42 | And when you compare it to another
casual Script, you can really see what I mean.
| | 07:46 | So I've chosen Lobster Two
for this Script heading.
| | 07:49 | It would be one in a series of four
ads and usually I pick all four display
| | 07:54 | fonts at the same time to make sure
I create a system that works together.
| | 07:58 | But it's hard to show the process for
all four fonts at once, so I'm going to do
| | 08:03 | one font at a time for this course.
| | 08:05 | If for any reason Lobster Two Italic doesn't
work with the system, we'll revisit it later.
| | 08:09 | But for now, this is the font we'll use.
| | Collapse this transcript |
| Changing styling as necessary to improve the form and placement of letters on the page| 00:00 | So now that we've picked our font,
Lobster Two Italic, let's make it work.
| | 00:05 | I've provided an exercise file
which we're looking at here called
| | 00:09 | lobster2_script_book_sale.html.
| | 00:14 | I've already added the Google Web Font
code to the head of the HTML document
| | 00:19 | and I've setup the font-family as usual.
| | 00:22 | Note that I've added a font style
of italic to our h1 which is our main
| | 00:29 | heading on this document.
| | 00:31 | Now let's take a look at it in the browser.
| | 00:34 | I already have mine open, I'll toggle
to it and we can see that there are
| | 00:39 | a couple of problems.
| | 00:40 | First is that everything in the page is
set in Lobster Two because we used it in
| | 00:46 | the universal selector.
| | 00:48 | So it makes it sort of hard to figure
out what we might need to change to make
| | 00:52 | this headline look as good as possible.
| | 00:55 | So let's go in and change that. Back in
the text editor, I would take this font
| | 01:00 | family and copy it, go
down into the h1 and paste it.
| | 01:04 | So now our h1 is definitely set as
Lobster Two and then back up in the universal
| | 01:10 | selector, let's just delete Lobster Two
from our font family stack.
| | 01:13 | You can save that and back in the browser
we can refresh it and that's better.
| | 01:20 | Now we can see how the display font, how
the headline interacts with the text font.
| | 01:25 | And I think it looks a little bit too small.
| | 01:28 | Now this page is based on a default
page that was created in Georgia.
| | 01:33 | And in Georgia, the font looks fine.
| | 01:35 | But with the Lobster Two it
just looks a little bit too small.
| | 01:39 | So let's try bumping that up a bit.
| | 01:41 | Back in the Text editor,
let's try making this 95 on a 105.
| | 01:46 | You can save that and refresh it and
that looks pretty good, but now I think
| | 01:52 | it actually looks a little bit
too big and I'll tell you why.
| | 01:56 | When I set this in the HTML I actually
use some line breaks to control where
| | 02:01 | the lines would break.
| | 02:02 | I wanted to keep one book
together and one potato chip together.
| | 02:07 | So I don't usually use line breaks.
| | 02:09 | I very rarely use them, but I
will once in a while in a headline.
| | 02:13 | But when you use a line break,
you have to be more responsible.
| | 02:16 | We have to be sure that if this page is
seen on a browser that makes the font
| | 02:21 | a little bit bigger or a little bit looser,
we don't want one of the words to
| | 02:26 | bop down to the next line.
| | 02:27 | It would create a very uneven
ragged edge in this headline.
| | 02:31 | So we need to go in and
make it a little bit smaller.
| | 02:34 | Why don't we try that at 90 on 100,
go ahead and save this, back into the
| | 02:41 | browser and refresh, and that looks a
lot better, it gives us some wiggle room.
| | 02:46 | Now you've probably noticed we're
keeping the line-height really tight.
| | 02:49 | It's only an extra 10 pixels,
I would never do that in text.
| | 02:54 | But it works here because we're working
with only a few words and it also helps
| | 02:58 | that this font, Lobster Two Italic, has
a really short ascenders and descenders
| | 03:04 | and then it also helps that none of
the ascenders and descenders are directly
| | 03:08 | above and below each other.
| | 03:09 | So they don't have the opportunity
to run into each other.
| | 03:13 | This looks pretty good and we could
keep it just the way it is, but I think
| | 03:17 | we should look for a better font
for the text part of the ad.
| | 03:20 | Georgia is a good font but the Serifs have a
lot of texture and the bold is sort of bubbly.
| | 03:25 | We might be able to find another less
visually complex font that could let
| | 03:31 | the heading pop out even more.
| | Collapse this transcript |
| Choosing a second font to pair with the Script Display font| 00:00 | So we have our main heading set as Lobster
Two Italic and the page looks pretty good.
| | 00:05 | But I think the texture created by Georgia,
which is the Serif font is slightly
| | 00:10 | competing with the main heading.
| | 00:11 | The two fonts are okay together, they
aren't bad, but I think we could find
| | 00:16 | a simpler text font that would let
the main heading stand out more.
| | 00:21 | So here we have a screenshot of
our main heading from back when
| | 00:24 | I was testing script fonts.
| | 00:25 | I can add part of a screenshot of Georgia
from my files, just to see how the
| | 00:31 | two worked together.
| | 00:32 | It doesn't have to be the
exact text at this point.
| | 00:35 | I'm sort of sketching here.
| | 00:36 | I'm looking at the relationship
between the fonts.
| | 00:39 | I often use screenshots of
existing text to do this.
| | 00:42 | It saves a lot of time.
| | 00:44 | So as you know I think Georgia
is a bit too visually complex.
| | 00:48 | I think part of the problem is that even
though Lobster Two is a Script font, it
| | 00:53 | doesn't have much of a slant.
| | 00:54 | It has pretty thick almost vertical lines
and those lines are repeated in Georgia bold.
| | 00:59 | In fact there are some lovely similarities
between Lobster Two Italic and Georgia.
| | 01:05 | And if I were using Lobster Two Italic
in a different project, if I wanted to
| | 01:10 | find a font to compliment it and have
a more similar visual relationship, this
| | 01:14 | could be a really nice match.
| | 01:17 | But since I want this heading to stand
out as much as possible, I want to
| | 01:21 | go with a font with a bit more contrast.
| | 01:23 | So I'm immediately thinking Sans Serif.
| | 01:25 | This is Museo Sans.
| | 01:27 | I started with Museo Sans
because I figured I would show you
| | 01:30 | the least successful pairing.
| | 01:33 | I expected the heavy strokes and the very
round bowls would create too much contrast.
| | 01:38 | But I have to say Museo Sans Humanist
qualities are working here and this is
| | 01:43 | really a very nice font pair.
| | 01:44 | The heavy strokes on Museo Sans, instead
of creating contrast, are in harmony with
| | 01:49 | the thick strokes on Lobster Two Italic.
| | 01:52 | The Humanist a and e in Museo Sans keep
it feeling softer than a true Geometric font,
| | 01:58 | but the circular bowl makes a nice
contrast to the slightly narrow bowls
| | 02:02 | in Lobster Two Italic.
| | 02:04 | In fact, Museo Sans helps make Lobster
Two Italic feel a little softer,
| | 02:09 | more flowing and contrast to the
Geometric shapes in Museo Sans.
| | 02:12 | Nimbus Sans on the other hand is fine
but the slightly loose letter spacing
| | 02:18 | gives it a bit more texture
than I'd like to see here.
| | 02:21 | The Open Sans is really nice. As much
as I like the thick strokes in Museo
| | 02:27 | Sans, the thinner strokes in this font
really let the bold strokes in Lobster
| | 02:32 | Two Italic pop out.
| | 02:34 | I think there's more contrast between
regular and bold here too, which
| | 02:37 | could really work for us when
setting our headline in the ad.
| | 02:40 | Finally I like how Open Sans' bold
and regular weights work together and they
| | 02:45 | mimic the thick and thin
strokes in Lobster Two Italic.
| | 02:49 | This might be the one for me.
| | 02:50 | But we've got one last font to look at, PT Sans.
| | 02:54 | It's funny because in the last chapter,
when looking for a font to pair with
| | 02:59 | Crimson, the PT Sans felt good in the text
while the Open Sans felt too bubbly and round.
| | 03:05 | But here the Open Sans felt good to me
and the PT Sans feels a little too narrow.
| | 03:11 | I think it's too similar to the
Lobster Two Italic and it's creating
| | 03:15 | a texture of vertical lines and shapes that
mimics the vertical strokes in Lobster Two Italic.
| | 03:20 | It just goes to show you that picking
the right font really depends on context.
| | 03:25 | Well I think Museo Sans and PT Sans
would be perfectly acceptable choices.
| | 03:31 | In this case, the Open Sans is my
preference, it's more open and round than
| | 03:35 | Lobster and it has good contrast
between regular and bold weights.
| | 03:39 | I think it'll serve us well.
| | Collapse this transcript |
| Incorporating a second font with the Script Display font| 00:00 | We have our main heading set as Lobster Two Italic
and we've picked Open Sans as our text font.
| | 00:07 | Right now the text is still set
in Georgia, so we need to fix that.
| | 00:11 | We're looking at
lobster2_open_sans_book_sale.html,
| | 00:19 | which I've provided in the Exercise Files.
| | 00:21 | Let's look at it in the text editor.
| | 00:23 | The last time we used Open Sans, we
used it from Typekit, but it's also
| | 00:28 | available from Google Web Fonts.
| | 00:30 | Since Lobster Two is on Google Web
Fonts, it's better to just get both fonts
| | 00:34 | from the same place.
| | 00:35 | I've already added the Google Web Fonts
code for Open Sans, and I've already
| | 00:41 | added the conditional comment for
Open Sans so Internet Explorer will
| | 00:45 | recognize both weights.
| | 00:47 | Now we've just got to add the
font-family to a universal selector.
| | 00:52 | So let's add Open Sans here and we
need it to match, up here in our code
| | 00:58 | from Google, we can see that it should be a
capital OPEN and then that plus means we
| | 01:04 | should use a space and then a capital S
and so let's do capital "Open Sans" and
| | 01:12 | end our quotation marks.
| | 01:15 | And since we're switching this to a
Sans Serif font, let's go ahead and change
| | 01:20 | our font stack to Verdana and Sans Serif.
| | 01:25 | And then let's see down on our h2, we should
make sure that our font weight is 700,
| | 01:30 | which is good because it's bold, excellent.
| | 01:32 | Let's take a look at this in
our browser. We can refresh.
| | 01:38 | Looking at the page with Open Sans,
I think the text is a little big now.
| | 01:43 | That's not surprising since Open Sans
has a bigger x-height in Georgia.
| | 01:48 | Let's make it a little smaller
so the heading pops out even more.
| | 01:51 | Go back over into our text editor and
let's change our font size on a universal
| | 01:56 | selector down to 16 and
the line height down to 26.
| | 02:00 | On our h2 we can change that to 17
as well, bring that down by 2 pixels.
| | 02:07 | Save that, back in the browser,
refresh and that looks better.
| | 02:13 | Although I think I would like the
headline about the Friends of the Library
| | 02:17 | Used Book Sale to pop out a little bit more,
we don't necessarily need it but I think
| | 02:22 | if it was a little bigger and darker
it would look really nice with the thick
| | 02:26 | strokes of the Lobster Two Italic.
| | 02:28 | So let's go back into our TextWrangler,
or whatever text editor you're using, x
| | 02:32 | used we'll make that one pixel bigger,
and let's refresh, and that looks good.
| | 02:38 | Like I said, the heading didn't necessarily
need a little extra push to make it legible,
| | 02:42 | but I think the larger size just
opens up the counter forms and
| | 02:47 | the line of text begins to visually relate
to the heavy strokes in the main heading.
| | 02:51 | This looks good.
| | Collapse this transcript |
| Setting fallback fonts| 00:01 | Our script version of the library book
sale page looks great, but before we move
| | 00:06 | on I want to check the fallback fonts.
| | 00:08 | I always set fallback fonts so I have
some control over what fonts load
| | 00:13 | if my Web fonts don't.
| | 00:14 | But in this case I want to take a
couple extra steps to make sure they
| | 00:19 | work the way I want them to.
| | 00:20 | I'm trying to control the heading.
| | 00:22 | I want to create a specific rhythm.
| | 00:24 | I want the first line to end with one
book and the last line to contain all
| | 00:29 | three words, one potato chip.
| | 00:31 | I forced this using br tags.
| | 00:34 | This isn't great syntax and I don't
usually try to force line breaks, but this
| | 00:39 | heading is the main element in the page.
| | 00:41 | We aren't using any images
so I want it to be perfect.
| | 00:45 | But when we try to control line breaks
we have to be aware of what can go wrong.
| | 00:50 | You'll remember we set the heading a
couple of pixel smaller than its maximum size.
| | 00:55 | So if a browser slightly expands the letter
spacing the words will still fit on each line.
| | 01:01 | Now we need to make sure the
fallback fonts will fit too.
| | 01:04 | So let's take a look at
this in our text editors.
| | 01:07 | If you didn't keep the file
from the last lesson that's okay.
| | 01:10 | I've provided this file in the Exercise Folder.
| | 01:13 | So I like to check my fallback
fonts by purposely putting the wrong
| | 01:17 | font-families in my syntax.
| | 01:19 | I do that by adding a capital X here after
Open Sans and then here after Lobster Two.
| | 01:27 | You can save this and take
a look at it in the browser.
| | 01:31 | We'll refresh and it does not work and
that's because the fallback font right now
| | 01:37 | for our h1 is Georgia and Georgia has
much wider bowls than Lobster Two Italic,
| | 01:42 | so the word book did not fit on that
line and it bobbed down to the next
| | 01:47 | line and it's just not delightful.
| | 01:49 | So we're going to go back and then change that.
| | 01:52 | Back into your text editor let's try
making our fallback font Times New Roman.
| | 01:57 | Times New Roman has a narrower
bowl so this should work for us.
| | 02:02 | Refresh it and that's better.
| | 02:04 | It at least fits, although it's just
barely fitting and if this were pulled in
| | 02:09 | to a browser that in any way slightly
opened up the letter spacing or
| | 02:14 | made the letters a little bit
bigger, it's not going to fit.
| | 02:16 | So I think we're going to need to bring
our type size down just a little bit.
| | 02:21 | So let's go ahead and
bring this down to 88 on 98.
| | 02:24 | Save that and refresh it and that
gives us just a little bit of wiggle room.
| | 02:31 | I'm feeling pretty confident that this
will fit on most browsers. So we're good.
| | 02:35 | Let's take a look at how this would
look if we took our Xs out and saw it in
| | 02:42 | the correct font again. That looks good.
| | 02:46 | Now we know even if the fonts don't
work the fallback fonts will still look
| | 02:51 | great and keep the rhythm of the heading intact.
| | Collapse this transcript |
|
|
14. Wood-Type-Inspired Display FontsUnderstanding Wood Type fonts| 00:00 | Wood Type came in to use in the 1820s
at the same time Slab Serif fonts were
| | 00:07 | developed and for a similar purpose.
| | 00:09 | As I mentioned earlier in the course
the Industrial Revolution increased
| | 00:13 | production which in turn created
the need to market products.
| | 00:18 | As more broad sides went up advertising
various products and services and
| | 00:24 | as more newspapers started selling more
ad space, sellers wanted to use larger,
| | 00:29 | more elaborate fonts.
| | 00:30 | Individual fancy letters could measure
2 to 3 inches high, because sellers
| | 00:35 | wanted to catch the buyer's eye.
| | 00:38 | But lead type is heavy, and casting new,
fancy, elaborate, unique fonts for the
| | 00:43 | simple purpose of competing
with the other guy was expensive.
| | 00:47 | That's when Wood Type entered the scene.
| | 00:49 | Wood Type was lighter and
cost half as much to produce.
| | 00:53 | In addition, when prepared by machine
Wood Type had smoother, more even surfaces.
| | 00:58 | Now the earliest known Chinese
wood block print dates from 868.
| | 01:05 | So it wasn't a new idea in the early 1800s.
| | 01:08 | It's just the up until that time type
design and print shops were focused on books.
| | 01:14 | Suddenly, with the shift to advertising,
print shops and newspapers needed
| | 01:19 | lighter, cheaper type.
| | 01:21 | Letters needed to be made
with something other than lead.
| | 01:25 | I wish I could just hand you
a piece of each kind of type.
| | 01:29 | It's hard to truly understand the
weight of large lead letters, but here
| | 01:34 | I have, side by side, a wood capital M on the left
and it weighs slightly more than two quarters.
| | 01:41 | Each quarter weighs just over of 5.5 grams.
| | 01:43 | On the right is a lead capital M. The
slag is a little bigger than the wooden
| | 01:49 | ones so it's not a perfect
match, but it's pretty close.
| | 01:53 | The lead M weighs the same as 30
quarters or a 170 grams and that's for only one
| | 02:01 | relatively small display letter.
| | 02:04 | Remember in the 1820s
letters were getting bigger.
| | 02:08 | Here we have two pieces of wooden type.
| | 02:10 | Each one measures just over 4
inches or 10.5 centimeters tall.
| | 02:16 | Together they weigh
about the same as 9 quarters.
| | 02:19 | If these letters were lead they'd
weigh 674 and 3/4 grams or the
| | 02:26 | equivalent of 119 quarters, which is one
quarter shy of three rolls of quarters.
| | 02:34 | If we were going to set our current
headline reading one book is like eating one
| | 02:38 | potato chip and lead letters of about
this size and shape it would weigh about
| | 02:43 | the same as 62 rolls of quarters.
| | 02:47 | Lead type is heavy.
| | 02:48 | It's cumbersome to work with
at large sizes. Wood Type,
| | 02:52 | because of its original purpose to
market products and services by catching
| | 02:57 | the buyer' eye, came in a
variety of shapes and sizes.
| | 03:01 | Today, digital versions represent the
variety of forms created during the
| | 03:06 | 100 years Wood Type was popular for printing.
| | 03:09 | Although, Hamilton Wood Type continued
to manufacture fonts until the
| | 03:14 | end of the century Wood Type fell
out of favor in the 1920s.
| | 03:18 | This is not surprising since the first
radio commercial was broadcast in 1922.
| | Collapse this transcript |
| Choosing a Wood Type font for display use| 00:00 | So now that we know more about Wood
type fonts we need to pick one to use.
| | 00:06 | There are less Wood Type inspired fonts
available for online use then there are Script fonts.
| | 00:12 | In order to show you more options, and a
greater variety of styles, I'm going to
| | 00:17 | show you some from Typekit even though
we can't use most of them in this course
| | 00:21 | since they're not available in the trial plan.
| | 00:23 | When trying to decide what display font
to use, you should always test the fonts
| | 00:28 | using the words or phrase you'll be setting.
| | 00:30 | So let's start by looking at
one of Typekits Wood Type fonts.
| | 00:34 | We're going to search for Cowboyslang and
we're going to test it using our actual phrase.
| | 00:43 | We can go to Type Tester, click here to
edit and our phrase is Reading one book
| | 00:51 | is like eating one potato chip, and we
can also take a look at this even bigger,
| | 01:00 | there's a slider here.
| | 01:01 | So we can make it quite large.
| | 01:05 | Now I like to make screenshots of
fonts so I can compare them to each other
| | 01:10 | while deciding which one to use.
| | 01:12 | The interface on Google Web Fonts
didn't let me see the whole phrase this big,
| | 01:17 | but here you can see on
Typekit it could get pretty big.
| | 01:20 | So I'm just going to take
a quick screenshot of this.
| | 01:23 | On the Mac I'm using Shift+Command+4
and then I can go to my screenshot and
| | 01:30 | I'm going to name it cowboyslang_tk_port
because it's only available in the portfolio plan.
| | 01:44 | I always tried to name my screenshots
with what plan they're in on Typekit.
| | 01:50 | Mostly because not all of my students
have the same plan that I do and that way
| | 01:54 | if they come and talk to me about a
font I know just from the title whether or
| | 01:58 | not it's one they can use.
| | 02:00 | I've reviewed dozens of Web fonts and
through the magic of video here are some
| | 02:05 | I would consider for this project.
| | 02:07 | The Cowboyslang is a favorite for this project.
| | 02:10 | Two of the kinds of books for
sale are adventure and history.
| | 02:16 | This font is cliche American Old
West and it has a lot of personality.
| | 02:21 | It has a funky ear on the G that I
would never consider for text and the
| | 02:26 | thick serifs create a fun counter
form shape between the letters.
| | 02:30 | It's a strong slightly quirky font that
I think would work well with our strong
| | 02:35 | slightly quirky quote.
| | 02:36 | But unfortunately, it's not available
in the trial plan on Typekit.
| | 02:40 | So we're going to keep looking.
| | 02:43 | Another font available from Typekit is
called Stud which I love for the thinner
| | 02:48 | strokes, the expanded forms,
and the slightly inky feeling.
| | 02:53 | Now you have to be careful when using fonts
that looked like they didn't quite print right.
| | 02:58 | The suggestion of ink is meant to
make the font looked more tactile and
| | 03:02 | hand-done, but looking at the spot on
the T you can see it occurs three times
| | 03:07 | in close proximity.
| | 03:09 | This undermines the tactile feeling
and shouts out that it's a digital font.
| | 03:13 | I don't think I'd used this font only
because the quote has the word potato with
| | 03:18 | it and the repetition of the
letter T is unfortunate here.
| | 03:21 | But I would definitely consider
this font for a different quote.
| | 03:24 | The Concave Tuscan replaces curved
lines with a series of straight lines.
| | 03:29 | I've always found this font to be a
little too angular for my personal taste
| | 03:34 | and there are other Tuscans I prefer.
| | 03:35 | This is absolutely a personal preference
and you and your client may feel
| | 03:40 | differently and that's fine.
| | 03:42 | Gothic Open Shaded is based on a machine
cut Wood Type produced in the late 1870's.
| | 03:48 | It's beautiful, but it's
not what I'm looking for.
| | 03:52 | DeLittle Chromatic is based on a
British font produced around 1900.
| | 03:57 | Again, it's not what I'm looking for.
| | 04:00 | Chunk by the league of movable type is
designed to be reminiscent of Wood Type.
| | 04:05 | It's definitely got a
contemporary feeling to it.
| | 04:09 | It's the most cleanly structured
font we've looked at so far.
| | 04:13 | This font is available through Typekit's
Trial Plan so we could use it, but it
| | 04:18 | doesn't have the feeling I'm looking for.
| | 04:20 | I want something a little more cliche.
| | 04:23 | Poplar Standard based on the Wood Type
Poplar from the 1830s is also available
| | 04:29 | through Typekit's Trial Plan.
| | 04:32 | Since most people associate Sans Serif
fonts with the 1900s and later I don't
| | 04:37 | think I want to use this one.
| | 04:39 | Also, the counter form on the e
gets really small even at large sizes.
| | 04:45 | Fatboy has the feeling I'm looking for,
because it has this thick blacky serifs
| | 04:50 | and it's been expanded to
within an inch of its life.
| | 04:53 | In the 1820s they used fonts that were hyper
expanded and fonts that were hyper condensed.
| | 05:00 | But unfortunately, given the number of
words in my headline and the relatively
| | 05:05 | small amount of space to work with
I don't think this is the right font.
| | 05:09 | I know I've been looking for cliche,
but Rosewood makes me think of circuses
| | 05:14 | and I can't see to separate
that connection from the font.
| | 05:18 | So I'm going to keep looking.
| | 05:21 | Now Ewert is interesting.
| | 05:23 | This one is from Google Web Fonts.
| | 05:25 | I can tell because I made the Google
Web Font screenshots a bit differently.
| | 05:30 | I set them dark gray and centered.
| | 05:33 | I like the cliche feeling of Ewert.
| | 05:36 | It's sort of a half Tuscan and
half Gothic font, which is unique.
| | 05:41 | I'm not sure of the outline though, it's
complex and the words start to get busy.
| | 05:46 | Even though we'd be using this font for a heading
I think this font needs to be set quite big.
| | 05:52 | So it might not be appropriate for this project.
| | 05:56 | Holtwood One Small Caps is a possibility.
| | 05:59 | It reminds me of Fatboy, but not as expanded.
| | 06:03 | It could hold up in the heading.
| | 06:04 | It feels big without
having to be used really big.
| | 06:07 | Sancreek is another Tuscan font.
| | 06:11 | Again, a bit on the complex side for my taste.
| | 06:15 | I feel like it would need to be set
really big to appreciate its forms.
| | 06:19 | Remember, Wood Type letters were
often two to three inches tall.
| | 06:23 | When complex letters like these are set
at one inch on the screen, I think they
| | 06:28 | lose some of their individuality.
| | 06:30 | They can also start to vibrate
between letter and letter space.
| | 06:34 | I don't think I'd pick this font for
this project, but if the heading had less
| | 06:38 | words and more space it could
be a contender. Smokum is fun.
| | 06:43 | The thicks and thins have been reversed.
| | 06:45 | It's a little hard for me to take the
font seriously though maybe because the
| | 06:49 | forms feel backwards.
| | 06:51 | It's a fine font and the letters work
in a system and the letter spacing and
| | 06:55 | word spacing are great and it's readable,
but I want something with more impact.
| | 07:01 | Ultra is another contemporary digital
font inspired by the old Wood Type.
| | 07:06 | It reminds me a bit of Cowboyslang,
but without the funky energy.
| | 07:11 | It's definitely got more impact
than Smokum and it could work.
| | 07:15 | But I think I prefer Holtwood One Small Caps.
| | 07:20 | I hadn't thought about using all caps,
but it makes sense giving the time period
| | 07:24 | I'm trying to represent.
| | 07:27 | I tried setting the Ultra in all caps
to see if I would like it as much and in
| | 07:32 | some ways I love it.
| | 07:34 | I like the complexity on the A, I also
like the thin line at the end of the tail
| | 07:40 | on the R, but I'm concerned
about some of the spacing.
| | 07:44 | The letters with the thick foot
serifs are spaced tightly making the curved
| | 07:49 | letters feel disconnected.
| | 07:50 | You see how the C seems to float
away from the rest of the word.
| | 07:54 | Since I plan to use this font
big the spacing would be prominent.
| | 07:59 | Holtwood One spacing is a bit more even.
| | 08:02 | So I think I'll go with it.
| | 08:05 | I tested it across browser and it works well.
| | 08:08 | It gets a little jogging on a couple of
browsers and there is a slight change
| | 08:11 | in letter spacing, but overall it's fine.
| | 08:14 | When looking for a Wood Type font
try keeping in mind the amount of space
| | 08:19 | you have to work with.
| | 08:21 | They were designed to be used big and
you can lose important details if you
| | 08:25 | use them too small.
| | 08:27 | Holtwood One is a fairly simple font.
| | 08:29 | So it will be okay even if we
need to set it less than 150 pixels.
| | Collapse this transcript |
| Changing styling as necessary to improve the form and placement of letters on the page| 00:00 | Now that we've picked our Wood Type font,
Holtwood One Small Caps, let's make it work.
| | 00:06 | I've provided an exercise file
which we're looking at here.
| | 00:10 | I've already added the code from
Google Web Fonts to the head of the
| | 00:15 | HTML document and I've set up
a font family as usual.
| | 00:18 | Let's take a look at it in the browser right-
click, and there are a couple of problems.
| | 00:25 | First, the heading is too big.
| | 00:27 | We'll get back to that in a second, but
equally disturbing to me is that all the
| | 00:32 | text is now set in the Holtwood One.
| | 00:36 | And it's too bold and square
to really work as a text font.
| | 00:41 | So let's go ahead and change that.
| | 00:42 | It will help us to focus on our headline.
| | 00:45 | Back in the text editor let's fix this
by copying our font family out of the
| | 00:52 | universal selector and pasting it into
the h1, and let's remove Holtwood One
| | 00:59 | from our universal selector.
| | 01:01 | Save that, back in the browser, and Refresh,
I'm using a Command+R, and that's better.
| | 01:08 | Now that the text is set we
can really focus on that heading.
| | 01:12 | So there are a couple of things that
aren't quite working with this heading.
| | 01:15 | Most noticeable is that it's too big.
| | 01:18 | It's slamming into the sides of the
page and the first line is breaking.
| | 01:23 | So book is all by itself.
| | 01:25 | There are a couple of
more subtle problems as well.
| | 01:27 | First, I'm not crazy
about the centered alignment.
| | 01:30 | Centering type is very
traditional and this font is clunky.
| | 01:34 | I don't think it's going to work as well in
a centered alignment as the Script font did.
| | 01:39 | I think we could so something to take
advantage of the square forms in the letters.
| | 01:43 | I'm thinking we should set it up so that
the type in each line is a different size.
| | 01:48 | We can set it so that the words in
each row take up the entire space.
| | 01:53 | We can make it feel more like an old
broadside and then this will also create
| | 01:58 | a square section of type which may mix
the thick squared edges of the font.
| | 02:02 | There other thing slightly bothering me,
because this is a small caps font,
| | 02:06 | the first R is very slightly larger than
the rest of the other letters and this
| | 02:12 | feels a little traditional to me.
| | 02:14 | I'd rather that R was the same
size as the rest of the letters.
| | 02:18 | So we're going to make sure
all the letters are lowercase.
| | 02:21 | Let's go make all of these changes and
let's set up our heading here which is
| | 02:25 | currently set in h1 with a couple of breaks.
| | 02:28 | We are going to get rid of these breaks and
let's wrap each individual line in its own h1.
| | 02:34 | We'll do reading, and one book, and then
we'll do is like eating one and potato chip.
| | 02:49 | Of course, this would work as is, but I
am just going to move it around a little
| | 02:53 | so I can see it a little bit better.
| | 02:56 | Then we're going to need to set each
line as its own class so that we can make
| | 03:00 | each line look a little bit different.
| | 03:02 | We'll keep the h1 for reading the
same and one book, let's make that
| | 03:05 | class="book" and make this one
class="eating" and class ="chip".
| | 03:18 | Now back up in the CSS we need to make
a couple of classes for book class I've
| | 03:23 | already tested these sizes,
so I know what will work.
| | 03:26 | Let's do a font size.
| | 03:27 | So let's go ahead and make this an h1 book.
| | 03:31 | Let's do this 94 pixels with a
line height of 104 and close it.
| | 03:38 | I missed the semicolon there
| | 03:41 | and let's do an h1 for eating and the
font-size of 50, and a line-height of 60,
| | 03:54 | and then we'll do the h1, chip.
| | 03:56 | So font-size of 68 and a line-height of 78.
| | 04:02 | Up here in our original h1 let's go
ahead and change this to 108 on 108.
| | 04:13 | I had originally, when I was testing this,
set it with an additional 10 pixels
| | 04:18 | on the line height similar to how we
did down here, but it made it a little bit
| | 04:22 | loose so we're going to take that out.
| | 04:24 | While we're here, let's add a text
transform to a lowercase to get rid of
| | 04:30 | that capital R. Go ahead and save this, and
then back in the browser let's take a look.
| | 04:35 | That looks good.
| | 04:37 | The heading is still set, text aligned centered.
| | 04:40 | We didn't change that, but
it feels solid and square.
| | 04:44 | It also has a great texture from the
different sizes we used for each line.
| | 04:48 | When using this approach, make sure you
vary the number of characters per line.
| | 04:52 | It doesn't work if there's not
enough contrast between font sizes.
| | Collapse this transcript |
| Choosing a second font to pair with the Wood Type font| 00:00 | We have our main heading set
as Holtwood One Small Caps.
| | 00:05 | The page looks pretty good.
| | 00:06 | Georgia is a fine second font with Holtwood.
| | 00:09 | There's a nice contrast in terms
of bowl, weight, and serif shape.
| | 00:14 | Georgia's more delicate serifs creates a
texture that contrasts nicely with Holtwood One.
| | 00:19 | And if we wanted to, we
could keep the page as is.
| | 00:23 | But it's always good to
consider our other options.
| | 00:26 | Here we have a screen shot of
Holtwood One and here I've added Georgia.
| | 00:32 | I think Georgia, as a transitional
Serif font, is a great choice for a Serif.
| | 00:38 | It's more structured than, for instance,
Crimson Text which feels Humanist and sort of inky.
| | 00:44 | Crimson Text just has a little a bit
too much contrast with Wood Type font.
| | 00:50 | Museo Slab is an unexpected surprise for me.
| | 00:53 | I thought it would be too
similar to Holtwood One, but it's not.
| | 00:57 | Museo Slab is more
Humanist and the texture is good.
| | 01:01 | The softer forms are working for us here.
| | 01:03 | Merriweather on the other hand which
does have serifs that feel almost Slab-like
| | 01:09 | is just a little too light, a
little too Humanist, and too vertical.
| | 01:13 | There's just too much contrast here and I
think it draws away from the power of the heading.
| | 01:19 | If I were to use a Serif, I'd go with
either Georgia or Museo Slab at this point.
| | 01:24 | Checking out the Sans Serif
fonts, Museo Sans is a good option.
| | 01:27 | Without the serifs, it feels more
clean and geometric and makes the heading
| | 01:32 | feel even stronger.
| | 01:33 | It also emphasizes the square serifs in
the heading, the square layout we created.
| | 01:39 | Nimbus Sans is okay, maybe a little too
vertical, a little too loosely spaced.
| | 01:45 | It's not bad or wrong and someone could
choose this font, but it's not my favorite.
| | 01:50 | And I think Open Sans is a little too
Humanist and PT Sans is a little too
| | 01:55 | Humanist and a little too narrow.
| | 01:58 | I think I like the Museo Slab the best.
| | 02:01 | This surprises me because I expected
to want more contrast, but the
| | 02:05 | two feel right together.
| | 02:07 | I'm tempted to use Museo Sans and that
wouldn't be a bad decision, but it
| | 02:12 | starts feeling maybe a little too clean,
too geometric with Museo Sans.
| | 02:16 | Museo Slab sort of supports and
continues the Wood Type feeling that's
| | 02:21 | been created in the heading.
| | 02:22 | At the same time, it softens
a little bit in the text.
| | 02:26 | I think it will serve us well.
| | Collapse this transcript |
| Incorporating a second font with the Wood Type display font| 00:00 | We have our main heading set as
Holtwood One Small Caps and we've picked
| | 00:06 | Museo Slab as our text font.
| | 00:07 | Right now, the text is still set
in Georgia, so we need to fix that.
| | 00:12 | Let's look at it in the text editor.
| | 00:14 | I've already added the Typekit code
for the Museo Slab from my Typekit.
| | 00:20 | You need to add Museo Slab 500 and 700
to your kit, publish it, and add your
| | 00:26 | embed code to this document
so it will work on your system.
| | 00:30 | I don't usually use fonts from both
Google Web Fonts and Typekit, but when I do,
| | 00:36 | I paste the Typekit code
after the Google Web Font code.
| | 00:39 | So now that your Typekit has been set up
and the correct embed code is in the
| | 00:45 | document, we need to apply
the font family as usual.
| | 00:49 | We need to add Museo Slab as our
font family in our universal selector.
| | 00:54 | Let's go ahead and do that now, museo-slab.
| | 01:01 | We also need to change the font-weight to 500;
| | 01:04 | Museo Slab uses a 500 and 700
for regular and bold.
| | 01:10 | And then down here in the h2, let's
change our bold to 700. We can save that.
| | 01:17 | Now in order for us to see this font in action,
we need to upload it to our servers,
| | 01:22 | so let's go ahead and do that.
| | 01:23 | And then back in the browser,
take a look at it from your server.
| | 01:30 | Mine is at goodwebfonts.com/lynda and I
can pick mine up here and that looks good.
| | 01:38 | It's now using the Museo Slab.
| | 01:41 | Unfortunately, the Museo Slab is
looking a little bit too big down here
| | 01:46 | in the bottom line and I wish there was a little
bit more contrast between the h2 and the text.
| | 01:53 | So I think what I'm going to do is bring the
text size down a little but keep the h2 as is.
| | 02:00 | So back in the TextWrangler or whatever
text editor you're using, I'll go ahead
| | 02:04 | and change my font-size to 17 and 27,
I'll save that, and I need to re-upload it,
| | 02:10 | and then back to the browser, refresh it,
I'm using Command+R on the Mac.
| | 02:17 | It's looking a little bit better,
but I think that the text can get
| | 02:21 | even a little bit smaller.
| | 02:22 | So I'll go back and into the
TextWrangler, change that to 16 and 26.
| | 02:28 | Again, I'll keep the h2 as is,
I like that little extra contrast.
| | 02:33 | Upload, back to my browser
and I will refresh again.
| | 02:38 | And that looks pretty good.
| | 02:41 | The Georgia font would have been fine,
but I think the Museo Slab makes
| | 02:45 | the ad feel more finished.
| | 02:47 | It was worth the extra effort
to find and apply a second font.
| | 02:51 | Now before we finish up this lesson,
I wanted to show you one last thing.
| | 02:56 | I've been thinking about the more
complex headline fonts that I decided not
| | 03:00 | to use for this project.
| | 03:02 | I said they need to be set big in
order to show off their detail, but
| | 03:06 | we wouldn't have enough room to do them justice.
| | 03:09 | Well, I decided to go ahead and try one of them.
| | 03:13 | We didn't make this page in the course.
| | 03:15 | I did it on my own, and I provide the
file with the final files in the exercise
| | 03:19 | folder, so you can take a look at it.
| | 03:22 | I set a page in Ewert which has a lot
more detail than Holtwood One Small Caps.
| | 03:28 | I set the font big like it deserves
and it's quite beautiful.
| | 03:32 | It works better centered at the size as
you can see, and as I scroll down,
| | 03:38 | you can see that Museo Slab still
works well as a second font.
| | 03:42 | Now the ad gets long, so
my client might not like it.
| | 03:46 | But when a font calls out to me, I'll
often try a second version just to see
| | 03:50 | if I can get it to work.
| | 03:52 | Sometimes it works, sometimes it doesn't,
and you never know, the client might
| | 03:56 | love the unique experience
created by such a long page.
| | 04:00 | It definitely draws out the
quote and it creates suspense.
| | 04:03 | Of course, when I do something like this,
I need to be prepared for our client
| | 04:08 | to try and merge the ideas.
| | 04:11 | And I need to have the vocabulary and
confidence to explain why Ewert
| | 04:16 | can't be used smaller like we were
able to do with the Holtwood One.
| | 04:20 | I need to be able to explain to them and
point out that Ewert was designed to be
| | 04:24 | used big and that we'd lose all
the detail we love if it's set small.
| | 04:29 | I just wanted to show you that like most
projects, there are multiple successful
| | 04:34 | solutions to our Wood Type page and
that changing a font can completely
| | 04:39 | change the outcome of the project.
| | Collapse this transcript |
| Setting fallback fonts| 00:00 | Our Wood Type version of the
Library Book Sale Page looks great.
| | 00:05 | But before we move on, I want
to check the fallback fonts.
| | 00:09 | I want to make sure the page has a similar
feeling even if the fonts don't load.
| | 00:14 | We're working with the file
from the last lesson.
| | 00:17 | If you didn't save yours, that's okay.
| | 00:19 | I've provided a new starting
point for this lesson.
| | 00:23 | Just make sure you put your embed code
in the document so your Typekit fonts
| | 00:27 | will work on your system.
| | 00:29 | Let's open up our document now.
| | 00:31 | Mine is already open in my text editor.
| | 00:35 | Let's make our fonts fail.
| | 00:38 | I do that by adding a capital X for
each of the font families and saving it,
| | 00:44 | we'll go ahead and upload this to our
server, and back in the browser,
| | 00:52 | we can refresh, and nothing breaks.
| | 00:55 | But Georgia just looks sort of wimpy.
| | 00:57 | The h1 needs a heavier fallback font.
| | 01:00 | I think I'd recommend Impact.
| | 01:02 | It's not a great font for text because
it's so heavy, but it will work at this
| | 01:07 | size and it would create a strong heading.
| | 01:09 | So let's go back into the text editor
and for h1, let's make our font stack
| | 01:15 | Impact and then I'm going to add Arial Black.
| | 01:21 | Impact needs to be capitalized,
so let's do that there.
| | 01:23 | Then I'm going to change Georgia to Arial
and let's change this to a Sans Serif for h1.
| | 01:32 | And then for the universal selector,
why don't we go ahead and use an Arial
| | 01:36 | and Sans Serif as well?
| | 01:39 | I think the sort of vertical structure
of Arial would work better with the
| | 01:42 | Impact or the Arial Black
than the Georgia would.
| | 01:46 | Let's go ahead and save that, re-upload it
to our server, and refresh it in our browser.
| | 01:53 | This looks good.
| | 01:54 | It's not great, but it's
much better than the Georgia.
| | 01:58 | So let's go ahead and just change our
fonts back so that we are not keeping
| | 02:02 | our fonts breaking here on our server,
but I think we can be happy with this
| | 02:07 | with our fallback fonts.
| | 02:08 | Back into TextWrangler, let's take off
those Xs so that our fonts will work and
| | 02:14 | re-upload it to our server after we've
saved it, back in the browser and refresh,
| | 02:20 | and we're back to the finished page.
| | 02:22 | But now we know, even if the Web fonts
don't work, the heading will still
| | 02:27 | feel strong and the text will
work well with the heading.
| | Collapse this transcript |
|
|
15. Art Deco FontsChoosing an Art Deco font for display use| 00:00 | Art Deco fonts were originally in use
in the '20s and '30s, about the same time
| | 00:06 | as Paul Renner was designing the
Geometric Sans Serif font, Futura, and Eric
| | 00:11 | Gill was designing the
Humanist Sans Serif font, Gill Sans.
| | 00:16 | Art Deco fonts are usually streamlined
and strive for geometric beauty like the
| | 00:21 | lettering seen here on
the American Stock Exchange.
| | 00:23 | They represent luxury and prosperity
even during the Great Depression.
| | 00:29 | They celebrated new technologies and materials.
| | 00:32 | Art Deco was opulent and luxurious, a
reaction to the forced austerity imposed
| | 00:39 | by World War I on the French artists
and designers who initiated the style.
| | 00:44 | As a general style, Art Deco was
often described as purely decorative.
| | 00:49 | Some Art Deco fonts are characterized
by straight lines and sharp angles,
| | 00:54 | like the lettering here in the Empire State Building.
| | 00:57 | There aren't many Art Deco
fonts available for the Web.
| | 01:01 | A contemporary digital font, LTC
Broadway, is based on the original font
| | 01:06 | designed by Morris Fuller Benton in 1927.
| | 01:10 | It references the heavy strokes of the
lettering found in the Empire State Building.
| | 01:15 | Broadway is a decorative font with the geometric
quality and an emphasis on the vertical line.
| | 01:21 | This version is available via Typekit's
Personal Plan as is LTC Broadway Engraved.
| | 01:28 | Limelight, available on Google Web
Fonts has similar characteristics.
| | 01:33 | Finally, Cassannet is a recently
released free font that's available
| | 01:38 | for download at cassannet.net.
| | 01:41 | It looks more like the lettering we saw
on the American Stock Exchange Building.
| | 01:45 | I love the open geometric forms of this font.
| | 01:48 | I'm not crazy about the big R, but I
think it would be fine if we would use the
| | 01:53 | same size as the rest of the letters.
| | 01:55 | But even though I like this font,
it's not my first choice.
| | 01:58 | I know this as an Art Deco font, but
most people probably don't.
| | 02:04 | Some of the books available at the used book
sale are about architecture and history.
| | 02:08 | There are also biographies.
| | 02:10 | All of these categories could be
represented by an Art Deco font.
| | 02:15 | Limelight is more cliche and would
certainly communicate early 20th Century
| | 02:19 | history, the period between
the First and Second World Wars,
| | 02:22 | better than Cassannet.
| | 02:25 | And also selfishly, I would like to
use a font with extreme thicks and thins.
| | 02:30 | We haven't been able to use one yet in this
course because they haven't held up on the screen.
| | 02:34 | So we're going to use Limelight.
| | 02:37 | I tested it cross-browser.
| | 02:39 | It gets a little jagged on a few
browsers, but I think it's going to
| | 02:43 | be a great choice.
| | Collapse this transcript |
| Changing styling as necessary to improve the form and placement of letters on the page| 00:00 | So now that we've picked our font,
Limelight, let's make it work.
| | 00:04 | I've provided an Exercise File
which we're looking at here.
| | 00:08 | I've already added the code from
Google Web Fonts in the head of the HTML
| | 00:14 | document and I've set the font-family as usual.
| | 00:18 | Let's take a look at it in the browser.
| | 00:21 | And it's got a few problems.
| | 00:23 | The most noticeable problem
is that the heading is too big.
| | 00:27 | The first line is breaking,
so book is all by itself.
| | 00:30 | I don't think we should go
any bigger with this font.
| | 00:34 | The repetition of the vertical strokes and
the vertical counter forms is very strong.
| | 00:40 | It would start to feel more like
shapes than letters and words.
| | 00:43 | We could break the first line after the
word Reading, but I think that's going
| | 00:48 | to give us an almost diamond-shaped text block.
| | 00:52 | Here let me show you.
| | 00:54 | Back in the text editor, down in
the HTML, I can add a br tag here.
| | 01:00 | I can save and refresh it in my browser
and you can see how the headline
| | 01:05 | is starting to look a little bit like a globe.
| | 01:09 | The shape doesn't add any meaning to
the layout and sort of detracts
| | 01:13 | from the words themselves.
| | 01:15 | I think it'd be better off removing the
break and just making the heading smaller.
| | 01:19 | So in the text editor, we'll
remove that, up in the CSS, our h1.
| | 01:24 | Let's go ahead and try making that a
65 instead of 75, and let's keep
| | 01:31 | the line-height the way that it is.
| | 01:34 | Go ahead and save this, back in the
browser and refresh, and that's starting
| | 01:39 | to look much better.
| | 01:40 | I think that the heading could be a
little smaller, although it's hard to tell
| | 01:44 | because we're using the Limelight in
the text here which we need to get rid of.
| | 01:50 | The very strong thick lines and then
the very thin lines make this font
| | 01:56 | very hard to read at a small size.
| | 01:58 | So we need to get rid of
the Limelight in our text.
| | 02:01 | We can do that by copying and pasting
the font-family from the universal selector
| | 02:06 | down into our h1, and then let's remove
limelight from the universal selector
| | 02:12 | so all our text will be Georgia.
| | 02:15 | And then I thought about making our h1 a
little bit smaller, so let's make that 63.
| | 02:20 | Go ahead and save that, back in the
browser and refresh, and now it looks better.
| | 02:27 | I have to say after the very thick
Wood Type that we were just working with,
| | 02:33 | it feels a little bit boring.
| | 02:34 | And Art Deco type, though based on
geometric shapes and lines, is usually in
| | 02:39 | a more decorative context
like elaborate architecture.
| | 02:43 | So let's take a look at some of
the architecture from the time.
| | 02:46 | Even a more simple architecture
will give us some inspiration.
| | 02:51 | Here I'm looking at the American Stock
Exchange building and I'm noticing these
| | 02:56 | horizontal lines sort of above the windows.
| | 02:59 | Maybe we can add a top border to our ad.
| | 03:02 | So back in TextWrangler or whatever
text editor you're using, let's go to the
| | 03:08 | main_container and let's add a border-top.
| | 03:11 | Let's make it 9 pixel and we'll make it
double so that we have that extra border up there.
| | 03:18 | And let's go ahead and make it the
same color as the rest of the border.
| | 03:25 | Close that with our semicolon
| | 03:27 | and we'll take a look.
| | 03:29 | Refresh, and now it looks good.
| | 03:31 | When adding an extra element, thinking about
the historical context of the font can help.
| | 03:37 | For example, adding the double border
to the top of the container instead of
| | 03:43 | adding it all the way around feels more
architectural and it draws our eyes up
| | 03:48 | and emphasizes the heading.
| | Collapse this transcript |
| Choosing a second font to pair with the Art Deco font| 00:00 | We have our main heading set as Limelight.
| | 00:03 | The page looks pretty good.
| | 00:05 | Georgia is a fine second font, there
is a nice contrast in terms of bowl
| | 00:11 | and weight and Limelight is
Sans Serif and Georgia is Serif.
| | 00:16 | Georgia's more vertical structure
keeps it from feeling like it has too much
| | 00:19 | contrast with Limelight.
| | 00:21 | If we wanted to we could keep this page as is.
| | 00:24 | But as usual, it's always good
to consider our other options.
| | 00:27 | Here we have a screen shot of Limelight
and here I've added Georgia to
| | 00:33 | use as our starting point.
| | 00:35 | It's more structured, so it's
not too bad of a second font.
| | 00:39 | Crimson Text, on the other hand,
feels too Humanist and inky.
| | 00:43 | It just doesn't work with the crisp
lines and the vertical forms in Limelight.
| | 00:48 | Museo Slab is not bad, though I
think the Slab serifs are a bit too much.
| | 00:53 | They create a stronger horizontal shape
than Georgia's do and feel out of place
| | 00:58 | with the vertical shapes in Limelight.
| | 01:00 | Though I have to say, the round bowls
work very well, which makes me think
| | 01:05 | that Museo Sans could be a good option.
| | 01:08 | It has the round bowls but without the
serifs, it feels more clean and geometric.
| | 01:13 | It might be a better match for Limelight.
| | 01:14 | But I think Nimbus Sans is even better.
| | 01:18 | Even though the bowls in Limelight are
based on circles, they also have these
| | 01:22 | strong vertical strokes.
| | 01:23 | Nimbus Sans as a Transitional Sans also has a
more vertical feeling, and it has good harmony.
| | 01:31 | In addition, I usually think Nimbus
Sans is a little too loosely spaced.
| | 01:36 | But here because the pattern of black
and white created in Limelight, the
| | 01:41 | extra spacing in Nimbus Sans
looks like it could be a good fit.
| | 01:44 | Though I am concerned that Nimbus Sans
might be a bit too dark and inky.
| | 01:49 | Looking at Arial which is our other Transitional
Sans and lighter, I think it's a toss-up.
| | 01:56 | Arial does recede and helps the heading
pop out more, but Arial doesn't have the
| | 02:00 | generous letter spacing and
I enjoyed Nimbus Sans' texture.
| | 02:05 | We could absolutely go either way with this.
| | 02:07 | There are positives and minuses to both.
| | 02:09 | The only other font I wanted
to look at is PT Sans.
| | 02:14 | It's Humanist but also narrow and I thought
it could work, but I think it's just
| | 02:19 | too Humanist to pair with the graphic Limelight.
| | 02:21 | So I think we'll use Nimbus Sans.
| | 02:23 | It has contrast because it's a monoline
font, but it harmonizes with Limelight
| | 02:28 | because it has a slightly vertical
structure and an open texture created by
| | 02:33 | its generous letter spacing.
| | 02:34 | I think it will serve us well.
| | Collapse this transcript |
| Incorporating a second font with the Art Deco display font| 00:00 | We have our main heading set as Limelight
and we've picked Nimbus Sans as our text font.
| | 00:06 | Right now the text is still showing
up in Georgia, so we need to fix that.
| | 00:11 | Let's look at it in a text editor.
| | 00:13 | Mine is already open in TextWrangler.
| | 00:17 | I've added the Typekit code for Nimbus Sans.
| | 00:21 | You need to add Nimbus Sans Regular
and Bold to your kit, publish it and
| | 00:26 | add your embed code to the document
for it to work on your system.
| | 00:30 | Again, since we're using both a Google
Web Font and the Typekit font, paste the
| | 00:35 | Typekit code after the Google code.
| | 00:38 | Now that the codes are both in place,
we need to add Nimbus Sans to our font
| | 00:42 | family here in the universal selector.
| | 00:45 | It's nimbus-sans, all lowercase and save
that and let's change our font weights as well.
| | 00:53 | The universal selector will change to
400 and the h2 we will change to 700.
| | 01:00 | Save that and since we're using a Typekit
font, we'll need to put it on our servers.
| | 01:06 | Let's take a look at it in the browser.
| | 01:08 | We have to go to our servers here,
mine is goodwebfonts.com.
| | 01:17 | Taking a look at the page with Nimbus
Sans the type looks good, except the
| | 01:22 | h2 might feel a little bit small to me.
| | 01:25 | So back in the CSS, let's pump the
h2 up just one pixel to 20, save that,
| | 01:32 | re-upload it to the server and back
in the browser we can refresh it, and
| | 01:38 | I think the hierarchy looks better.
| | 01:40 | Now the only problem that I'm having is
that the heading feels a little bit
| | 01:45 | too separate from the text underneath.
| | 01:47 | We haven't had this problem so far but
I wonder if it's because we have this
| | 01:51 | very strong element at the top.
| | 01:53 | The top of the page just feels sort of
separate from the bottom of the page.
| | 01:57 | So we're going to try and fix that, I'm
thinking may be we need to add a little
| | 02:02 | bit of space here so to pull our heading down.
| | 02:04 | So back in the CSS, let's go down to the
main container and we're going to add
| | 02:09 | a little bit of padding at the top,
it was at 30, let's make it 40.
| | 02:13 | Save that, re-upload it to the server,
back in the browser we can refresh it
| | 02:19 | and that looks a little bit better.
| | 02:21 | It's still not quite right, I'm wondering
if we need to take may be a little bit
| | 02:24 | of space out between the heading and the text.
| | 02:27 | So back in the CSS and go back to the
class for the author, the bottom margin
| | 02:33 | is currently 64, let's make that 54.
| | 02:37 | Reload it to the server, back in
the browser and I'll refresh it and
| | 02:42 | I think that looks better.
| | 02:44 | This version seems to have been all about space.
| | 02:47 | Both the generous letter spacing in
Nimbus Sans, and taking the time to adjust
| | 02:52 | the vertical space on the page, it
really helped us pull the page together.
| | Collapse this transcript |
| Setting fallback fonts| 00:00 | Our Art Deco version of the
Library Book Sale page is almost done.
| | 00:05 | But before we move on, we
need to check the fallback fonts.
| | 00:09 | We need to make sure the page looks
good even if the fonts don't load.
| | 00:13 | We're still working with
the file from the last lesson.
| | 00:15 | If you didn't save yours that is okay, I've
provided a new starting point for this lesson.
| | 00:21 | Just make sure you put your embed code
in the document so your Typekit fonts
| | 00:26 | will work on your system.
| | 00:27 | Let's open the HTML document,
mine is already open in TextWrangler.
| | 00:33 | And in the CSS portion of the document,
let's add an X for our font family
| | 00:39 | so that they'll break.
| | 00:41 | Now looking at our font stacks here, the
Nimbus Sans is using Georgia and Serif.
| | 00:46 | Let's change that to Arial and Sans Serif.
| | 00:50 | This will work better because Arial and
Nimbus Sans have a very similar structure.
| | 00:56 | I save that and let's look at the h1.
| | 00:58 | Right now we're using Georgia, I'm not
sure if that's going to work but let's
| | 01:04 | test it, it could be a
nice contrast to the Arial.
| | 01:07 | So we're going to upload this on our server,
I'm going to go to the right file here
| | 01:11 | and let's reload it.
| | 01:16 | And it's not bad, but the headline is a
little bit smaller here, so the Georgia
| | 01:21 | just feels a little bit smaller and
softer than I'd like it to, especially
| | 01:27 | with the Arial and with the
lines going across the top.
| | 01:30 | So let's go ahead and change our
font stack, back into the text editor and
| | 01:36 | let's change it to Arial Black and
then Arial, and then we'll do a Sans Serif
| | 01:42 | here, go ahead and save that re-upload
it to your server, and view it in our browser.
| | 01:51 | This looks much better.
| | 01:52 | I think the Arial Black has much more
presence than Georgia did on the page.
| | 01:57 | So I think we can go with this.
| | 01:59 | This is a really good solution.
| | 02:01 | Now let's just go back and get our fonts.
| | 02:03 | So if they're working again on our servers,
we don't want to leave them up there broken.
| | 02:07 | We'll go ahead and take out our Xs and
save this file, upload it to our server
| | 02:14 | one last time and reload it again.
| | 02:17 | Excellent, that's what we're looking for.
| | 02:19 | Now Arial Black is very
different from Limelight.
| | 02:23 | While they're both Sans Serif, Limelight
has extreme contrast between thick
| | 02:27 | and thins and it's also quite geometric.
| | 02:31 | Arial Black is neither of these things.
| | 02:33 | But when picking a Fallback font,
it's more about creating a feeling
| | 02:37 | than exactly matching the font.
| | 02:39 | And Arial Black will give us
the impact we need in our h1.
| | 02:43 | And now that we have our fonts stack set,
our Art Deco version is done.
| | Collapse this transcript |
|
|
16. Futuristic FontsChoosing a Futuristic font for display use| 00:00 | In 1967, inspired by the cathode ray
tube and the increased use of electronic
| | 00:06 | communication devices such as televisions,
Wim Crouwel designed a new alphabet.
| | 00:12 | He proposed a rule-based system for
rendering letters based on horizontal
| | 00:17 | lines instead of curves.
| | 00:18 | While it was highly experimental,
it was not particularly readable.
| | 00:24 | Fortunately, there are futuristic fonts
based on grids and geometric forms
| | 00:29 | which are more readable.
| | 00:31 | Unfortunately, they lose much of
the experimental quality found in
| | 00:34 | Crouwel's alphabet.
| | 00:35 | For this last version of the Library
Used Book Sale page, we're going to be
| | 00:41 | inspired by the fact that some of the
books available are science fiction books.
| | 00:46 | So we're looking for a font
that says future and technology.
| | 00:50 | Aldrich is a fine font, it's
systematic and based on a grid, but
| | 00:54 | it's not as futuristic as I'd like.
| | 00:56 | Ethnocentric, while not grid
based feels very futuristic.
| | 01:01 | The angled ends of the horizontal strokes
make the letters feel slightly three dimensional.
| | 01:06 | The B and P have unexpected open-counter
forms which suggests speed and forward motion.
| | 01:13 | I'm interested in this one.
| | 01:14 | It's not available in Typekit's Trial
Plan, but I Googled the font and this
| | 01:19 | weight of Ethnocentric is available
for free download from myfonts.com.
| | 01:24 | It's also clearly approved
for use as a Web font.
| | 01:27 | We could download it, make it a
@font-face kit at fontsquirrel.com
| | 01:32 | and incorporate it using @font-face.
| | 01:33 | We'll keep this one in mind.
| | 01:37 | Changeling Neo isn't bad.
| | 01:38 | I like the wide letters
and the grid-like structure.
| | 01:41 | But this one is not available for free
so I don't want to use it in this course,
| | 01:46 | so we'll keep looking.
| | 01:47 | Domyouji is beautiful but
not what I'm looking for.
| | 01:51 | I don't think Geo will have the impact
I want, it's narrow and spaced out.
| | 01:57 | It feels lighter than the other fonts.
| | 01:59 | I'm also not crazy about the S in the word is.
| | 02:03 | It feels a little complex compared to the
other letters which have been simplified.
| | 02:08 | Iceland is okay.
| | 02:10 | It has some of the 3D effect going
on with the angled cuts on the ends
| | 02:14 | of some of the strokes.
| | 02:15 | At the same time the effect here
makes the font look more complex,
| | 02:20 | probably because this font isn't in all caps
and it isn't as bold as Ethnocentric.
| | 02:26 | Nova Square isn't right for this project.
| | 02:28 | The angled cuts are in all the wrong places.
| | 02:31 | They're top to bottom and it
makes the font feel a little uneven.
| | 02:35 | Orbitron is a possibility.
| | 02:37 | It feels like it might be a
little light to me though.
| | 02:40 | Now, Simply Mono does not feel light at all.
| | 02:44 | The heaviness of this font combined
with the similarity of all the letters and
| | 02:48 | the really wide word spacing makes this font
sort of hard to read, but not in a bad way.
| | 02:54 | It reminds me a bit of the new alphabet
I showed at the beginning of the lesson.
| | 02:58 | It's not available on Google Web Font
or via Typekit's Trial Plan, but it is
| | 03:04 | available for free download via dafont.com.
| | 03:07 | I've downloaded the license and it's not
clear if it's approved for use with @font-face.
| | 03:12 | So I'd have to do some more research
on this one before I could use it.
| | 03:16 | Tachyon reminds me a little of Orbitron because
it's so wide but I think it's a bit too heavy.
| | 03:23 | The counter forms are getting too
thin in the E and the A for my taste.
| | 03:28 | It makes me feel too complex compared to the
other more open and simple letter forms,
| | 03:32 | so it's not quite what I'm looking for.
| | 03:35 | Tenby Eight could work.
| | 03:37 | It's bolder than Orbitron
but lighter than Tachyon.
| | 03:41 | It is definitely influenced by the grid,
but it's a little softer than something
| | 03:45 | completely grid-based like Simply Mono.
| | 03:48 | And I have to say I'm sort of
partial to the wider letter forms,
| | 03:52 | so this could be an option.
| | 03:53 | Tenby Seven is another font by the
same design studio out of Australia.
| | 03:58 | It's not as wide so I don't
think it feels quite as futuristic.
| | 04:02 | And Zekton, while lovely is a bit too
curvy for what I want for this project.
| | 04:08 | We've looked at a lot of fonts.
| | 04:09 | My favorites were Ethnocentric, which is
a great cliche futuristic font with a
| | 04:14 | heavy stroke, a 3D effect and a wide structure.
| | 04:19 | And Tenby Eight, which has a
heavy stroke and a light structure.
| | 04:23 | I'm tempted to go with this one
because it's actually a little less cliche,
| | 04:26 | though it feels too Humanist
with all the lowercase letters.
| | 04:31 | I like the uppercase structure
we saw in Ethnocentric.
| | 04:34 | So I tried Tenby Eight in all caps and
I know this is the font I want to use.
| | 04:40 | I love the word reading and how the D, N,
and G are all subtle variations of each other.
| | 04:46 | I also like it as a final
addition to our set of display fonts.
| | 04:50 | I know people won't actually see all of
these fonts in the same place probably,
| | 04:55 | but I'd like them to work as a set
to show a lot of variety, you know,
| | 05:00 | to represent the variety of
books available at the Book Sale.
| | 05:03 | With Ethnocentric I think this set
starts to feel a little too similar.
| | 05:07 | All four fonts have heavy elements,
and Ethnocentric and Limelight while
| | 05:12 | completely different, have a similar
black and white pattern thing going on.
| | 05:16 | Again another good typographer
could disagree and say they'd prefer
| | 05:20 | the similarity between the fonts
and that would be a fine decision.
| | 05:24 | But I'm going to go with Tenby Eight.
| | 05:27 | I looked at Typekit's browser
samples and it looks good.
| | 05:30 | I think it's going to be a great choice.
| | Collapse this transcript |
| Applying the Futuristic font and changing the styling as necessary to improve the form and placement of letters on the page| 00:01 | So now that we've picked our font,
Tenby Eight, let's make it work.
| | 00:05 | I've provided an Exercise File,
which we're looking at called
| | 00:09 | tenby_eight_tk_book_sale.html.
| | 00:16 | I've already added the Typekit Code for
Tenby Eight in the head of the document.
| | 00:22 | You need to add both Tenby Eight Light
and Regular to your kit, Publish it
| | 00:28 | and add your Embed Code to the document
so it will work on your system.
| | 00:33 | When you're done meet me back here.
| | 00:35 | Now that the Embed code is in place,
let's apply the font-family.
| | 00:42 | We'll add Tenby Eight to the h1.
| | 00:45 | Since we know from experience it
won't work in the text, I'll copy
| | 00:50 | the font-family up out of the universal
selector and we can add it here,
| | 00:56 | alllowercase, and we have our font stack.
| | 01:00 | We'll also need to add a font-weight
here, we'll use 700.
| | 01:07 | Tenby Eight comes in two
weights, Light and Regular.
| | 01:11 | And the Regular weight is
actually set at 700 on Typekit.
| | 01:16 | We're going to use that one because
it's the one we are looking at
| | 01:20 | whenwe decided to use this font.
| | 01:21 | Last thing we're going to do, we know
we want to use this as all caps, so let's
| | 01:26 | go ahead and add a text-transform,
| | 01:30 | uppercase, and this
should be a good start for us.
| | 01:34 | We'll Save this document and we need to
upload to it to our servers because
| | 01:39 | it does use a Typekit font, and
then preview it in our browser.
| | 01:44 | Mine is on goodwebfonts.com in my lynda
folder and that looks great,
| | 01:53 | except we are having a problem.
| | 01:55 | We can see here that it's too big for
the size of the page and both Book and
| | 02:00 | Chip are getting bumped down to the next line.
| | 02:04 | I don't think we should go
much smaller with this font.
| | 02:07 | There's something really nice about
the large square forms, so we're probably
| | 02:12 | not going to get Book back up on the first line.
| | 02:15 | And at the same time while I'm
looking at this, I don't think this
| | 02:18 | heading should be centered.
| | 02:20 | Centering type is very traditional and
it creates this sort of organic forms
| | 02:26 | on the sides of the heading.
| | 02:28 | And this is a square form, a Futuristic font.
| | 02:30 | I'm thinking the structure would
be better if it had a straight edge.
| | 02:35 | So I'm not exactly sure where we're
going with this headline, but I think
| | 02:39 | if we start by fixing the problems that
we already see, that is get rid of the
| | 02:43 | line breaks and the heading and left
align the type, we'll at least be
| | 02:48 | on our way to finding a solution.
| | 02:49 | So let's go back into the text editor
and we'll add a text-align: left
| | 02:53 | to the h1, get rid of the center
there, and then we'll go down and let's
| | 03:00 | get rid of all the extra breaks in
the heading, in the HTML, save that,
| | 03:07 | re-upload it to our server, and
let's review it in our browser.
| | 03:15 | That's looking pretty good.
| | 03:18 | I think though that we need to
obviously move it away from the edge here,
| | 03:23 | and I think we can make it
a little bigger in size.
| | 03:26 | So back into our text editor, go to our h1.
| | 03:30 | Let's just try making this 80 and 90,
and let's move it over a little bit.
| | 03:36 | We'll add a little padding-left, maybe
about 20 pixels, save that, re-upload it
| | 03:44 | to our server and refresh it.
| | 03:48 | That looks much better.
| | 03:50 | That looks really good.
| | 03:51 | I like the crisp top edge and the
crisp left edge on the display face.
| | 03:56 | It frames the heading and it really
emphasizes the square forms of the letters.
| | 04:00 | But there are two things
that I'm not crazy about.
| | 04:04 | I'm hoping we can fix them. I think we can.
| | 04:06 | First, I don't like how the E
repeats itself three times in a row here.
| | 04:11 | And second, I find the
font a little overwhelming.
| | 04:15 | It's hard for me to read the whole sentence
because it starts to become a series of shapes.
| | 04:21 | Now, one way we could fix this is
to just make the type smaller again.
| | 04:25 | The words would rearrange themselves,
so the repeating E would be fixed and
| | 04:30 | the letters would start feeling more
like letters and less like big shapes
| | 04:33 | sitting on the page.
| | 04:34 | But on the other hand, it's the big
futuristic shapes that also appeal to me.
| | 04:39 | So what we're going to try to do is
visually break the sentence up a bit by
| | 04:45 | incorporating another weight into the headline.
| | 04:47 | Back in our Text Editor, let's make a
class and call it lighter, .lighter.
| | 04:55 | I'm going to copy the first
four lines of my h1 up here.
| | 05:00 | Highlight and copy it.
| | 05:01 | I use the Cmd+C in the Mac, and
then Paste it, and I can close this up.
| | 05:07 | I'm going to change the font-weight to 300.
| | 05:10 | Now, often with a class, you only change
the thing you want to change which here
| | 05:15 | was our weight, but the font-family,
font-size, and line-height are all set in
| | 05:21 | the universal selector.
| | 05:23 | So we need to set them here as well,
so they don't revert back to the
| | 05:27 | universal selector settings.
| | 05:28 | We'll go ahead and Save this, and we
need to apply this class down in the HTML.
| | 05:36 | So right in front of the word
is let's add a span.
| | 05:43 | We'll span the class lighter and
right at the end here, we will end it.
| | 05:55 | Go ahead and save this, reload it,
and refresh it, and that looks good.
| | 06:03 | Breaking the sentence up, chunked it,
so the heading is easier to read.
| | 06:07 | The darker type creates this strong shape.
| | 06:10 | It sort of pulls our eye up into the
left and that helps hide the repeating Es
| | 06:16 | at the ends of the lines.
| | 06:19 | It also helps us to break the sentence up
and it makes it a little bit easier to read.
| | 06:24 | It's not really easy to read
because of the font, but that's okay.
| | 06:27 | It's a little bit easier than it was.
| | 06:29 | When working with the heading we don't only
have size and alignment to work with,
| | 06:33 | we've got weights and styles too.
| | 06:36 | And sometimes, slightly breaking up
the heading can work to our advantage.
| | Collapse this transcript |
| Choosing a second font to pair with the Futuristic font| 00:00 | We have our main heading set
as Tenby Eight 700 and 300.
| | 00:05 | The page looks pretty good but
Georgia is not a good second font.
| | 00:10 | Georgia has serifs, thick and thin
strokes and a slightly vertical structure.
| | 00:15 | Tenby Eight, on the other hand, is Sans
Serif, monoline and has a square structure.
| | 00:21 | Let's pick a different font to use for the text.
| | 00:25 | Here we have a screenshot of Tenby Eight
and here I've added Georgia to use
| | 00:31 | as our starting point.
| | 00:33 | We already know it doesn't work.
| | 00:34 | There's too much contrast
and not enough concord.
| | 00:37 | They're not in harmony with each other.
| | 00:40 | Crimson Text is even worse,
because it feels too Humanist and inky.
| | 00:45 | It just doesn't work with the abstract
square letter forms in Tenby Eight.
| | 00:50 | Museo Slab doesn't work either.
| | 00:52 | Even though the strokes are monoline
like the strokes in Tenby Eight and the
| | 00:56 | Slab Serifs aren't as traditional as
either the Serifs and Crimson Text
| | 01:01 | or Georgia, Museo Slab is just too textural.
| | 01:05 | There's just too much going on in the
text and it competes with the heading.
| | 01:09 | Museo Sans works better.
| | 01:11 | It feels more clean and geometric
than Museo Slab but it feels a bit
| | 01:15 | Humanist and a bit bubbly.
| | 01:16 | It's not terrible but I think we can do better.
| | 01:20 | I expected Nimbus Sans to be a
better pair with Tenby Eight.
| | 01:25 | Even though the bowls in Tenby Eight are
based on squares, the font doesn't have
| | 01:30 | any diagonals and tends
to have strong verticals.
| | 01:33 | Nimbus Sans, as a Transitional Sans,
also feels more vertical.
| | 01:38 | But in reality, I think Nimbus Sans
is a bit too dark and inky.
| | 01:42 | The A and E feel a little too closed.
| | 01:45 | I think Museo Sans was actually a little better.
| | 01:48 | Looking at Arial, our other
Transitional Sans, it's lighter.
| | 01:53 | It works better than Nimbus
Sans but it feels a little tight.
| | 01:57 | I thought I'd love Arial
paired with Tenby Eight.
| | 02:00 | I thought it would work
but I'm not crazy about it.
| | 02:03 | Open Sans is Humanist and I didn't
expect it to pair well with Tenby Eight,
| | 02:09 | but Open Sans has lighter strokes
and the open aperture feels right.
| | 02:13 | This pair surprises me because Tenby
Eight feels like it represents technology
| | 02:19 | while Open Sans is Humanist, but
perhaps that is the contrast where there are
| | 02:24 | open, Sans Serif, monoline forms are the concord.
| | 02:28 | I think this might be the font.
| | 02:30 | I just want to look at Museo Sans one
more time but after seeing Open Sans,
| | 02:36 | Museo Sans feels too heavy and
round, so we'll use Open Sans.
| | 02:40 | And I'm reminded not to assume I know
it's going to work before I look at
| | 02:46 | all the possibilities.
| | Collapse this transcript |
| Incorporating a second font with the Futuristic display font| 00:00 | We have our main heading set as Tenby Eight
and we've picked Open Sans as our text font.
| | 00:06 | Right now, the text is still set
in Georgia so we need to fix that.
| | 00:11 | I have provided an exercise file which
we're looking at here in the text editor.
| | 00:16 | It's called
tenby_eight_open_sans_tk_book_sale.html.
| | 00:27 | I've already added Open Sans
regular and bold into my Typekit.
| | 00:32 | So the embed code now
links my page to both fonts.
| | 00:35 | You need to add Open Sans regular
and bold to your kit, publish it, and
| | 00:42 | put your embed code in this document
so it will work on your system.
| | 00:45 | When you're done, meet me back here.
| | 00:48 | Now that your Typekit and embed code
are all set, let's add Open Sans
| | 00:54 | to the universal selector.
| | 00:57 | With Typekit we use all lowercase with a hyphen,
and I've just added it to the font family.
| | 01:05 | Let's go ahead and change our font
weight to 400 and the h2 font weight,
| | 01:10 | we will change to 700.
| | 01:13 | Let's save that and we need
to upload it to our servers.
| | 01:18 | Let's view this new file in our browsers
and we can see that the Open Sans
| | 01:25 | is now in our file.
| | 01:27 | But I think that the Open Sans is a
little bit too big here in the text.
| | 01:31 | I like it at the bigger size in the h2,
but the text looks a little bit big.
| | 01:37 | So back in the Text Editor, let's set
our universal selector to 17 and 27.
| | 01:44 | We'll bring it down just a hair.
| | 01:45 | Re-upload it to the server
and refresh it in the browser.
| | 01:51 | It's a subtle change, but I think
it helps the h2 pop-out a bit more.
| | 01:56 | Now the only problem I'm having is
there's too much space between the
| | 02:00 | author and the main heading.
| | 02:02 | We haven't had this problem before.
| | 02:04 | I don't know if it's because our main
heading is in all caps so there's no
| | 02:09 | descenders, or it could be because
Tenby Eight light is very light
| | 02:14 | so the author's name stands out more.
| | 02:16 | It might just be that Tenby Eight has a
little bit more built-in space around it,
| | 02:20 | but we need to get rid of that space.
| | 02:23 | So back in the text editor,
we have the author class here.
| | 02:27 | Let's make the margin top 0, save that,
re-upload it to the server, and refresh it,
| | 02:35 | and that looks better.
| | 02:36 | But I still don't know if it's quite right.
| | 02:39 | There's something about the strong left
line here on the main heading and then
| | 02:44 | how everything else is centered.
| | 02:45 | I'm not sure if that's the
best choice for this page.
| | 02:49 | So I went ahead and tested it so I could
just show you some of our options.
| | 02:55 | I took some screenshots.
| | 02:56 | Here is one where the author's name is
just left-aligned but that leaves a big
| | 03:01 | gap of space here, and I don't care for that.
| | 03:04 | I tried moving everything to the left
which, it's not bad, but again, we're
| | 03:09 | having a problem with the sort of
awkward space shape here on the right.
| | 03:13 | So then I tried one where I left- aligned
the author and then also the tagline
| | 03:20 | about the kind of books and then I moved
the information about the book sale
| | 03:25 | into that space a bit and it gives
us some nice tension and some good
| | 03:29 | movement around the page.
| | 03:31 | If this page were the only one of its
kind, if it wasn't part of a system,
| | 03:36 | I'd probably use a layout more like this one.
| | 03:39 | It feels a little bit better, more
appropriate with the very square letter forms
| | 03:44 | and with the shape that the dark
bold type is creating up there.
| | 03:48 | It sort of gets mimicked down here,
but not exactly, so it's not boring.
| | 03:53 | But the truth is, is that this page is
part of a system and all of the other ads
| | 04:00 | or pages in the system in the series
are using the centered alignment.
| | 04:04 | So I think we're going to stick with
that even though it may be not the most
| | 04:08 | perfect alignment to use with this font.
| | 04:11 | It still looks fine centered and I think in
the end, we'll be happier with it in the system.
| | 04:18 | So we'll call this one done.
| | Collapse this transcript |
| Setting fallback fonts| 00:00 | Our Futuristic version of the Library
Book Sale page is almost done, but
| | 00:05 | before we move on, we need to
check the Fallback fonts.
| | 00:09 | We need to make sure the page looks
good, even if the fonts don't load.
| | 00:14 | We're still working with
the file from the last lesson.
| | 00:17 | If you didn't save yours, that is okay.
| | 00:20 | I've provided a new
starting point for this lesson.
| | 00:23 | Just make sure you put your embed code
in the document so your Typekit fonts
| | 00:28 | will work on your system.
| | 00:30 | In the CSS section of the HTML page,
let's type a capital X next to each of the
| | 00:37 | font families so that they will break.
| | 00:39 | And let's go ahead and save this and upload
it to our servers and view it in our browsers.
| | 00:49 | We can just refresh.
| | 00:50 | Georgia doesn't quite work for our headline.
| | 00:53 | I think that the difference between the
bold and the regular is just too subtle.
| | 00:59 | So let's go back and change that.
| | 01:01 | I think that a better font stack for
our universal selector would be Arial,
| | 01:07 | sans-serif, and for the h1, let's
also do an Arial black, then an Arial,
| | 01:18 | and then a Sans Serif.
| | 01:19 | And for the lighter version of our h1,
that lighter class, let's skip the
| | 01:26 | Arial Black and just do Arial Sans Serif.
| | 01:28 | Go ahead and save this, upload it
to our server, and review that in the
| | 01:36 | browser, refresh it. That looks better.
| | 01:39 | It's a little bit tight to the edge,
and I would say the author's name is
| | 01:43 | a little bit close to the headline
because we did change that so that it would
| | 01:47 | work better with the Tenby Eight.
| | 01:48 | But we're at least getting that
nice contrast between the bold and the
| | 01:52 | regular stroke and then down here,
we have the bold and regular fonts,
| | 01:57 | so that looks pretty good.
| | 01:58 | Let's go ahead and take those Xs out of
our font families so that our fonts will work.
| | 02:07 | Again, save that, re-upload it to
the server one last time, and refresh.
| | 02:13 | Now we know even if the Web fonts don't
work, the heading will still feel strong
| | 02:19 | and the text will work well with the heading.
| | Collapse this transcript |
| Looking at the set of four ads| 00:00 | All four versions of the
Library Used Book Sale page are done.
| | 00:05 | They each worked individually, but
let's take a look at them as a system.
| | 00:10 | First, I'd like to look through them
quickly and just enjoy the variety of fonts
| | 00:14 | we've used and the different approaches
we've taken to highlight each kind of font.
| | 00:19 | Now you won't be able to do this on your
end if you're using the Trial Plan in Typekit.
| | 00:25 | We used four Typekit fonts to make these
pages and the Trial Plan only allows us
| | 00:30 | to use two at a time.
| | 00:33 | I had to cheat and use my own
Portfolio Plan to get all of these pages
| | 00:38 | to work at the same time.
| | 00:39 | So you might want to just sit back and watch.
| | 00:41 | Here we have the Script, the Wood Type,
the Art Deco, and the Futuristic. Not bad.
| | 00:51 | But something caught my attention
and I want to spend some time
| | 00:56 | looking more closely at it.
| | 00:58 | Let's go back and look through
them again, but more slowly.
| | 01:01 | The Script is Lobster Two, centered,
which helps create a more traditional
| | 01:06 | Humanist layout and that
works well with the Script.
| | 01:10 | Lobster Two is paired with Open Sans.
| | 01:14 | The Wood Type is Holtwood One.
| | 01:16 | We created lines of varying size
type in order to mimic an old broadside.
| | 01:22 | This approach works well with the Wood Type
font and Holtwood is paired with Museo Slab.
| | 01:29 | The Art Deco font is Limelight.
| | 01:31 | It's centered and paired with the top
doubled border on the container to mimic
| | 01:36 | the architectural details of a 1930s building.
| | 01:40 | This works well with an Art Deco font
as it is both decorative and stylized.
| | 01:45 | Limelight is paired with Nimbus Sans.
| | 01:47 | The Futuristic font is Tenby Eight.
| | 01:51 | It's left-aligned creates a
less humanist and organic shape.
| | 01:55 | It creates a square black of texts.
| | 01:58 | This works with a Futuristic font.
| | 02:00 | We use two weights so we could break up
the sentence which was getting hard to
| | 02:04 | read and the Tenby Eight
is paired with Open Sans.
| | 02:08 | Each page works well on its own.
| | 02:11 | But when I look at them quickly in a
system, one of them stands out to me and it
| | 02:17 | felt a little bit like it didn't quite belong.
| | 02:23 | The Art Deco page feels smaller,
less important than the others.
| | 02:27 | The heading has less impact.
| | 02:29 | The single page looks great.
| | 02:32 | It looks like it's respectful to the
font and the period, but it doesn't
| | 02:36 | quite work as well in the system.
| | 02:38 | Now we could approach this one of
two ways and I think, quite honestly,
| | 02:42 | either one would be fine.
| | 02:44 | First, we could remind ourselves that no
one is going to see all of these ads at
| | 02:48 | the same time, they are series.
| | 02:50 | They will randomly pop-up on the main
library's website and maybe on the city
| | 02:55 | website for a week or two before the sale.
| | 02:59 | It's not like anyone is going to see
the Wood Type page next to the Art Deco
| | 03:03 | page and think, wow, that Art
Deco page looks kind of wimpy.
| | 03:07 | If we think of the situation that way,
the Art Deco page is fine just as it is
| | 03:11 | and this would probably be the approach
I would take, but not everyone would agree.
| | 03:16 | You yourself might be thinking, no, I
want the Art Deco page to have more impact.
| | 03:22 | I want it to feel more
like the others in the system.
| | 03:25 | So I took the liberty of creating
another version of the ad.
| | 03:29 | It's available with the
Exercise Files for the course.
| | 03:32 | I made some simple changes, but the
heading definitely has more impact.
| | 03:37 | The changes that I made
to the Art Deco file are;
| | 03:40 | I increased the size of the h1 to 70 pixels,
I kept the line height the same so
| | 03:46 | it set a little tighter, I removed
most of the line breaks in the heading
| | 03:52 | letting the text flow naturally in the space.
| | 03:55 | I did add a single line break after the
word reading, because I really wanted to
| | 04:00 | keep the words one book together.
| | 04:02 | When I made these changes the heading
looked similar to the others, but we had
| | 04:07 | made some vertical spacing changes as well,
and then this page looked a little
| | 04:12 | different from the others.
| | 04:13 | So I changed those back.
| | 04:15 | I changed the main container top padding
back to 30 and I changed the bottom
| | 04:21 | margin on the author class back to 64.
| | 04:24 | So now the vertical spacing on this page
matches the other pages in the system.
| | 04:30 | So let's take a look at our
pages in the system again.
| | 04:33 | We have Script, Wood Type,
Art Deco, and Futuristic.
| | 04:44 | The Art Deco page looks more like the others.
| | 04:48 | This would work very well.
| | 04:50 | It doesn't undermine the integrity
of the Art Deco page.
| | 04:53 | It's a good solution.
| | 04:55 | Now there's just one last thing
I want to point out about this system
| | 04:59 | and that's the text fonts.
| | 05:00 | We're using three different
text fonts in the system.
| | 05:04 | We're using Open Sans,
Museo Slab, and Nimbus Sans.
| | 05:08 | Some designers would say we can't do this.
| | 05:11 | This is a system and we should
pick a font for the text and use it
| | 05:15 | throughout the whole system.
| | 05:16 | In fact, I often follow that same rule.
| | 05:19 | But here it makes sense to me to break away
from such a systematic approach to the text.
| | 05:26 | We set our headings and fonts that
represent 200 years of typographic history.
| | 05:31 | The fonts have completely different forms
and each creates its own unique feeling.
| | 05:37 | I think choosing unique text fonts to
pair with these display fonts is fine.
| | 05:42 | In fact, I think it's good.
| | 05:44 | It allows each page to work together
as a whole connecting the different
| | 05:49 | kinds of fonts to the different kinds
of books listed across the bottom.
| | Collapse this transcript |
|
|
ConclusionExploring resources and goodbye| 00:00 | Now that we've covered some of the
basics of choosing and using Web fonts,
| | 00:05 | you probably have other questions
like, where can I get more fonts?
| | 00:08 | We've spent a lot of time working with
two of the top sources for Web fonts.
| | 00:14 | Let's look more closely at some others.
| | 00:17 | FontShop is the studio that created
some of the fonts we've been looking at
| | 00:22 | in this course such as FF Meta
Serif Web Pro and FF Meta Web Pro.
| | 00:27 | Many of FontShop's fonts are available
with the Personal Plan or Portfolio Plan
| | 00:32 | on Typekit, but if you have a client
who expects to use one of FontShop's fonts
| | 00:37 | as part of their identity, it's
probably in their best interests to purchase
| | 00:41 | a license for a FontShop
font directly from the source.
| | 00:45 | FontShop's licenses are for 500,000, 5 million
or a 50 million page views per month.
| | 00:53 | The original license is perpetual.
| | 00:55 | So you or your client would only pay
once to license the font unless monthly
| | 01:01 | page views were to increase dramatically.
| | 01:03 | Now I'm not crazy about FontShop's gallery.
| | 01:08 | We can click over here and view some
of the galleries of their Web fonts.
| | 01:18 | The gallery uses all screenshots instead
of live HTML and I think it's important
| | 01:22 | to see how fonts really work in context.
| | 01:25 | But on the other hand, I have to say
every FontShop font I've ever tested
| | 01:30 | has performed beautifully.
| | 01:31 | So this may not be an issue.
| | 01:34 | They also aren't clear about how to
use their fonts, though I expect it
| | 01:38 | works similarly to Typekit system
since they seemed to be keeping track
| | 01:43 | of monthly page views.
| | 01:44 | Fontdeck offers free access to
up to 20 unique IP addresses.
| | 01:53 | So you can test fonts for free
as long as the site isn't live.
| | 01:57 | The 20 unique visitors will allow you
to share the testing stage with others
| | 02:02 | such as your design team, your client, et cetera.
| | 02:05 | Once you want to license the font,
licenses are yearly and per font.
| | 02:10 | So this is different
from what we've seen before.
| | 02:13 | In this case, per font
means per weight and style.
| | 02:17 | So if you want to use multiple weights
and styles you'll need to license each,
| | 02:22 | but fees are reasonable.
| | 02:24 | Fonts start at $2.50 a year, though some
I've looked at are as high as $17 a year.
| | 02:30 | I love the idea of Fontdeck.
| | 02:33 | It hosts the fonts for you and it
allows you to add fonts to your repertoire
| | 02:38 | without breaking the bank.
| | 02:41 | It's also an affordable and convenient
way for a client to subscribe to just
| | 02:46 | the fonts they want on their site.
| | 02:48 | Your client may not need more than a
handful of fonts and might find it makes
| | 02:52 | good financial sense to license with
the provider like Fontdeck rather than
| | 02:57 | to use a subscription like Typekit.
| | 02:59 | There are extra monthly fees if you have
a really busy site, but if you're under
| | 03:04 | a million page views a month,
there's no extra monthly fees at all.
| | 03:08 | Once you found fonts to use, the process
to use them is very similar to Typekit's.
| | 03:13 | Now Fontdeck has a gallery I really enjoy.
| | 03:16 | They call it the Showcase and you can
go and see the fonts actually in use.
| | 03:21 | So this will link you to the
websites and you'll be able to see them.
| | 03:27 | Next, I'd like to talk about Fontspring.
| | 03:29 | Fontspring is unique in this group.
| | 03:32 | We looked at them briefly during the course.
| | 03:35 | You can license a font or a
font family with a one-time fee.
| | 03:39 | So this is more like
print designers are used to.
| | 03:42 | There are no page view
limits and no domain limits.
| | 03:46 | These fonts are self-hosted.
| | 03:47 | So for example we can look down at their
bestselling fonts here and one is Museo Slab
| | 03:52 | and you may remember Museo Slab
has multiple styles and weights.
| | 04:03 | If you wanted to have the right to use
Museo Slab on a whole bunch of sites,
| | 04:08 | you could purchase a single
license to use the font.
| | 04:11 | And your one-time payment would allow
you to use the font on as many sites
| | 04:15 | as you want to regardless of
the number of page views.
| | 04:19 | The only catch is they
don't host the fonts for you.
| | 04:21 | You'd need to use the @font-face rule
and self-host the fonts on your server.
| | 04:27 | You might also be wondering about something
else besides where to get more fonts.
| | 04:31 | You might be wondering where to learn
more about Web typography in general.
| | 04:35 | And I want to show a couple
of resources that I rely on.
| | 04:41 | One is Smashing Magazine.
| | 04:42 | They've recently started paying more
attention to Web typography and it may
| | 04:47 | sound simple, but I get
them in my Facebook feed.
| | 04:50 | They don't just promote their own
articles, they scour the Web and share
| | 04:54 | articles from other sources.
| | 04:56 | So it can help you keep up-to-date
on what people are writing about
| | 05:00 | Web typography, which in turn will keep
you up-to-date on what people are doing
| | 05:04 | with Web typography.
| | 05:05 | For example, they recently posted about
this site which is a great simple blog
| | 05:12 |
| | 05:14 | about pairing fonts.
| | 05:16 | It's a curated list by someone
who obviously has good type skills.
| | 05:22 | The blog is a great resource,
especially if you're just learning to
| | 05:27 | choose fonts to pair together.
| | 05:29 | I'll scroll down a couple of more so
you can see the different styles that can
| | 05:33 | be created with pairing or
just simply using a font.
| | 05:37 | This is a lovely resource.
| | 05:39 | Another resource that I visit, not as
frequently as I visit Smashing Magazine,
| | 05:44 | but probably every couple
of months, is Nice Web Type.
| | 05:49 | And he's got some great
resources for a Web typographer.
| | 05:52 | He is both a good typographer and he has his
finger on the pulse of Web type technology.
| | 05:57 | He has a resources section down here.
| | 06:01 | In fact, his site is where I found out about
my new favorite tool which is the WhatFont Tool.
| | 06:09 | And this quickly tells you what fonts
other people are using in their site.
| | 06:14 | So if you like somebody else's fonts,
you can see what they're using.
| | 06:19 | It works quite simply.
| | 06:20 | Let's turn on our Bookmarks toolbar
here and drag this to the Bookmark toolbar.
| | 06:30 | If you click on it and go over any type,
it will tell you what the font is.
| | 06:36 | In addition, if you click, it will also
tell you the font size, line height, and
| | 06:43 | even the color that's
being used. It's quite lovely.
| | 06:46 | It saves a lot of time.
| | 06:49 | These resources will change
overtime, probably in the next 12 months.
| | 06:54 | In the meantime, I'd like
to say congratulations.
| | 06:57 | You've reached the end of this course.
| | 07:00 | I've thoroughly enjoyed sharing my
love of fonts, their history,
| | 07:04 | their structure with you.
| | 07:06 | Regardless of what new fonts, subscription
services, and resources await us,
| | 07:11 | keep looking carefully at the fonts you use.
| | 07:14 | Notice their structure, their readability,
whether their letters work in
| | 07:18 | a system, their letter, and word
spacing, and if they work cross-browser.
| | 07:23 | Keeping an eye on these
characteristics will help you choose
| | 07:28 | and use Web fonts wisely.
| | Collapse this transcript |
|
|
