All language subtitles for 050 Font Styling in Our Personal Site.en_US

Now one of the most important decisions that you will have to make when you are designing your web site

is what are the fonts that you're going to choose. And a lot of web designers will start off by figuring

out a color palette as well as a font scheme.

So in this lesson we're going to learn about how we can change the fonts for all of our text in our

web site.

Now there are two major font families and that is the Serif and the Sans-serif fonts.

So you can tell Serif and Sans-serif fonts

apart from each other by looking for these little feet at the edges of all of the letters and these

little feet are called serifs.

Now we can broadly define whether we want a Sans-serif or a Serif typeface for any text on our website.

So let's go ahead and do that.

If we go into our stylesheet and we change the font-family property for our body, then we actually affect

all the text on our web page, and you can see that there's five major families listed here, now only three

of which are you actually going to use.

So we've seen Serif and Sans-serif.

Now monospace is when each of the characters inside the text take up the same amount of width and that's

usually a typeface that we use for coding because it makes everything super easy to read.

For example if this word 'align' was styled in a Serif or Sans-serif typeface, then the i would be squished

right next to the l and the g.

But because our code is represented in a monospaced font, then you can more easily read each of the letters.

So you use these two for your normal web site styling.

And when you do have code on your web page sometimes people like to style it using monospace.

Now cursive and fantasy are two families that you're never really going to use, firstly because they have

low readability, and secondly because they generally don't look that great when used in the body of a

web site.

So cursive is meant to be handwritten style of fonts.

And fantasy is meant to remind you of Avatar,

basically. So let's take a look at what each of these families look like.

So let's first define a font family of Serif. And let's head back over to our web site and we hit refresh.

You'll notice that nothing happens. By default

we already have a Serif family.

You can see that at the end of the I's

we've already got these little feet.

Now if we change that to Sans-serif, however, we will get a noticeable change.

And those little feet or those little serifs now disappear, and we have a different style.

Now for most browsers the default Serif is the Times font and the default Sans-serif is Arial, and this

is the Arial font.

Now if we changed this to fantasy then it will still work,

it just now looks like I'm producing the next Avatar.

So let's head back to a Sans-serif typeface, and I'm not really satisfied with just an Arial

font.

What if I want a different Sans-serif font?

Let's say that, instead of Arial, I would rather have Verdana as the font for my website.

Now what I can do is instead of specifying just the Sans-serif broad stroke family, I can add a specific

font or typeface in front.

For example, if I wanted the Verdana font, then I can simply type verdana, and then have a comma, and then

separate that from the sans-serif family.

And now if we head back over here and refresh you can see I'm now using the Verdana font.

And what this line of code does is that it sets the font family for all the text inside the body but

it first asks the browser to try and render all the text in the Verdana font.

Now if for some reason the browser or the operating system that the user is using doesn't have this

font installed, then it will default to whatever is the Sans-serif font that is installed on their system.

Now that's a little bit scary because that kind of means that I might think that I've designed my web

site to look like this,

and I think it looks perfect just like this, but on somebody else's system or browser they might be getting

a completely different style with different font heights and just a different look and feel.

So there is such a thing called web safe fonts.

Now what this means is that there is a set of font families where most operating systems will be able

to render it correctly.

And for the Serifs that includes Georgia, Times New Roman, for the Sans-serif that includes Arial, Comic

Sans, Impact, etc..

Although these are called web safe fonts and it's basically saying that if you choose these sets of

fonts then you have the maximum chance of getting it rendered correctly as you're seeing yourself when

you're designing it,

but actually no font is actually 100 percent web safe.

And if you had ever to see cssfontstack.com, then somebody has actually painstakingly listed all

of the fonts that are in common usage and what is the percentage of users who have it installed, separated

by their operating system.

So as you can see the font that most people have is Arial.

So 99.8 percent installation of Windows, 98.7 percent on the Mac.

Now that is really really high.

But for some other fonts you'll see a difference between the Mac and the Windows operating systems and

we're not even including Linux users here.

So for example if you look at something like Helvetica which is a Apple specific thing, then on Windows

installation rate is really really low.

And on Mac it's 100 percent because it comes pre-installed with all Mac OS.

So what can you do if you want to use a font but you're not sure if everyone has it installed, right?

For example if I want to use Helvetica then there's only 7 percent of users on Windows who are going

to see it rendered in that font.

Well then you would need fallbacks.

So if we click on this little icon here on Font Stack, then we actually copy a set of fallbacks for this

Helvetica font.

And if I go ahead and paste that and replace our font family, then you can see that we have a stack of

fallbacks.

So I'm basically saying that I want the font family to be Helvetica Neue if they have it, and if they

have an Apple system then it's very likely that they will have this font installed. If they don't have

it, then default to the next best thing which is Helvetica.

And if they don't have that then default to Arial.

And finally just go with whatever Sans-serif they've got installed

if they don't even have Arial, which is very unlikely, but you can see how we're going from specific

to less specific and all the while ensuring that we're getting roughly a similar sort of typeface and

similar sort of feel no matter which fonts the users have installed or not installed.

So if we hit save and we go back to our web site, then you can see that on the Mac I do indeed have Helvetica

Neue installed.

And that's what's currently being rendered on screen.

But if I was on Windows then I might be seeing Arial

in this case.

And you can go ahead and give it a go and have a look at these font stacks and copy them over to your

web page and see what you're able to get.

Now what if we were even more picky as designers?

What if I really want everybody who looks at my web site to see exactly the same thing as I designed

it?

I want them to see the design that I intended instead of whatever font it is that they happened to have

installed.

And for example if I was using Helvetica then pretty much like 93 percent of Windows users are just

going to see Arial.

What if I really hate Arial?

What can I do to ensure that everybody has the same viewing experience with regards to the fonts on

my web site?

Well, you could use something called font embedding.

So if we head over to fonts.google.com, then you can see that they've got a whole bunch of font

families that you can choose from.

And these are all fonts that are free for commercial use that you can simply embed into your website.

And there's a large choice of font families that you can pick through so you can choose whether you

want just Serif fonts to look through, or Sans-serif, they have these cool articles about which fonts

go well with which and a whole bunch of really really useful stuff actually.

But in my case I already know what it is that I want. I want a font called Merriweather for my body.

So I'm just going to add this plus sign, and this is a pretty kind of Serif font. If you click on it, it actually

shows you what the characters look like,

who designed it,

what is it about,

what is the usage currently,

what are the different styles, different weights,

what do they all look like?

It's even got things like loading speed and popular pairings, for example.

So this is one of the fonts that I want and that's going to be for the body text.

So I'm just going to go ahead and click add. Now I'm going to go ahead and add a few more different fonts

before I show you how we're going to incorporate this.

So the other one that I'm going to pick up is a handwriting font actually.

It's called Sacramento and this I'm going to use as the font for my h1,

so a very stylish sort of font where we don't really need people to read it that clearly.

So it's not like a body font, where it would be quite painful to try and read through, you know, 300 words all styled

like this.

So let's go ahead and add that to.

So we've got now two selected, and the last thing that I want is my main heading font, and that is going

to be a Sans-serif, and one that I'm quite partial to is the Montserrat,

so I'm going to go ahead and add that as well.

So now I've got three font families selected.

And I can embedd it into my website as easily as copying this link and pasting that at the top of my

index.html. I'm just going to paste that link in there.

And this specifies a location where, if users don't have these fonts already installed or cached on their

system, then the browser will take them to this location and grab those fonts for them.

And then if we go into the styles.css, then I can specify a font family that I want to use.

So the one that I want for my body is the Merriweather font, and I'm going to paste that in here and it

will default to Serif

if something terrible happens, say the Internet connection went down in the middle of downloading the

font etc., but you can see it's not a large font stack because in pretty much 99.9999

percent of the time this is the font that everybody is going to see because we are embedding

it instead of presuming that people already have it.

Now for my h1 I'm going to use the Sacramento and for my h2 and also h3s

I'm going to use the Montserrat.

So let's go ahead and put those in there.

And let's just hit beautify to rearrange everything.

Let's hit save, take ourselves back over to our web site,

hit refresh and voila.

Our text is now beautifully styled using the fonts that we chose from Google Fonts.

So feel free to have a mess around with the different fonts that you might like or you might want to

incorporate to your web site and then simply add them to your selection,

include the link in your index.html, and start using them in your CSS like so. Now in the next

lesson,

I want to go and do a deep dive on different fonts and different typefaces, what are the different families

and how they came about.

So just a lesson on one of the most crucial parts of digital design and that's of course typography.

So if you're interested then that is what you will get on the next lesson.

If you're not interested then you can feel free and go ahead and skip ahead to the next lesson where

we explore some of the other font and text properties that we can use to style our text on our web site.

So I'll see you on the next lesson.