[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.21,0:00:05.22,Default,,0000,0000,0000,,You've seen how to change the color and\Nbackground color of text on the page.
Dialogue: 0,0:00:05.30,0:00:08.68,Default,,0000,0000,0000,,But there's so much more that you can do\Nwith text and CSS.
Dialogue: 0,0:00:09.51,0:00:11.63,Default,,0000,0000,0000,,To start off, let's change the font.
Dialogue: 0,0:00:12.58,0:00:15.92,Default,,0000,0000,0000,,What's a font? You probably already know\Nwhat one is, but you may
Dialogue: 0,0:00:15.92,0:00:17.03,Default,,0000,0000,0000,,not know the word for it.
Dialogue: 0,0:00:17.24,0:00:19.51,Default,,0000,0000,0000,,It's the style of the letters that make up the words.
Dialogue: 0,0:00:19.80,0:00:22.100,Default,,0000,0000,0000,,It is whether the letters have flourishes\Non them, or how thick they are,\N
Dialogue: 0,0:00:23.18,0:00:25.08,Default,,0000,0000,0000,,or if they look like they're written\Nwith an ink pen.
Dialogue: 0,0:00:25.88,0:00:30.27,Default,,0000,0000,0000,,It'll be easier if I go ahead and \Nchange the font on this webpage.
Dialogue: 0,0:00:30.66,0:00:35.44,Default,,0000,0000,0000,,I'll go to the  CSS rule that selects\Nall the paragraphs,
Dialogue: 0,0:00:35.73,0:00:37.96,Default,,0000,0000,0000,,and add a `font-family` property here.
Dialogue: 0,0:00:41.74,0:00:43.83,Default,,0000,0000,0000,,Do you see how the letters changed\N[once we did that]?
Dialogue: 0,0:00:44.12,0:00:45.80,Default,,0000,0000,0000,,They look a little bit simpler now.
Dialogue: 0,0:00:47.29,0:00:52.18,Default,,0000,0000,0000,,Now, let me change the `font-family` \Nback by specifying `serif` instead.
Dialogue: 0,0:00:52.28,0:00:55.90,Default,,0000,0000,0000,,Do you notice that the letters\Nlook a little more complex?
Dialogue: 0,0:00:55.90,0:00:59.86,Default,,0000,0000,0000,,A 'serif' font is any font that has what\Nlooks like little 'feet' on the letters.
Dialogue: 0,0:00:59.98,0:01:04.27,Default,,0000,0000,0000,,When we tell the browser to use a 'serif'\N`font-family`, it will use the default
Dialogue: 0,0:01:04.27,0:01:07.71,Default,,0000,0000,0000,,serif font for the computer. Which is\Nusually the 'Times New Roman' font.
Dialogue: 0,0:01:10.55,0:01:13.11,Default,,0000,0000,0000,,I'm going to change it back again, to `sans-serif` [now].
Dialogue: 0,0:01:14.25,0:01:17.81,Default,,0000,0000,0000,,The 'sans' comes from Latin and means\N'without.'
Dialogue: 0,0:01:17.100,0:01:21.81,Default,,0000,0000,0000,,So a sans-serif font is one that doesn't\Nhave the little 'feet' on the letters.
Dialogue: 0,0:01:22.10,0:01:23.72,Default,,0000,0000,0000,,That is why the letters look simpler.
Dialogue: 0,0:01:24.18,0:01:27.94,Default,,0000,0000,0000,,When we tell the browser to use a \Nsans-serif `font-family', it uses
Dialogue: 0,0:01:27.94,0:01:33.14,Default,,0000,0000,0000,,the default sans-serif for that computer,\Nwhich is usually 'Arial' or 'Helvetica'.
Dialogue: 0,0:01:33.14,0:01:37.71,Default,,0000,0000,0000,,But, here is an important point: It'll \Npick the default font of whatever
Dialogue: 0,0:01:37.71,0:01:41.22,Default,,0000,0000,0000,,computer the viewer is on, not the author.
Dialogue: 0,0:01:41.55,0:01:45.26,Default,,0000,0000,0000,,So we may very well be seeing two\Ndifferent sans-serif fonts right now,
Dialogue: 0,0:01:45.32,0:01:47.60,Default,,0000,0000,0000,,if your computer has a different default than mine.
Dialogue: 0,0:01:47.60,0:01:54.33,Default,,0000,0000,0000,,Sometimes, that's okay, but other times\NI want the viewer of the webpage to see
Dialogue: 0,0:01:54.33,0:01:56.26,Default,,0000,0000,0000,,it in exactly the same fonts as me.
Dialogue: 0,0:01:56.70,0:02:01.98,Default,,0000,0000,0000,,In that case, I can specify the precise\Nfont name. For example, Helvetica.
Dialogue: 0,0:02:03.15,0:02:07.94,Default,,0000,0000,0000,,This will work, as long as both you and\Nme have Helvetica on our computers.
Dialogue: 0,0:02:08.44,0:02:12.64,Default,,0000,0000,0000,,But not all computers have all the same\Nfonts, and in that case the computer will
Dialogue: 0,0:02:12.71,0:02:14.04,Default,,0000,0000,0000,,ignore the property entirely.
Dialogue: 0,0:02:14.75,0:02:20.03,Default,,0000,0000,0000,,Luckily, CSS lets us specify a 'fallback'\Nfont-family, for backup, in case
Dialogue: 0,0:02:20.06,0:02:22.30,Default,,0000,0000,0000,,a particular font doesn't exist on a\Ncomputer.
Dialogue: 0,0:02:22.98,0:02:28.00,Default,,0000,0000,0000,,You just add a comma after 'Helvetica',\Nand then bring back `sans-serif` there.
Dialogue: 0,0:02:28.44,0:02:32.74,Default,,0000,0000,0000,,Now, the computer will look for Helvetica,\Nand if it can't find it, just use its
Dialogue: 0,0:02:32.74,0:02:34.44,Default,,0000,0000,0000,,default `sans-serif` font.
Dialogue: 0,0:02:35.07,0:02:39.30,Default,,0000,0000,0000,,Generally, whenever you specify a specific\Nfont name, like Helvetica, you should
Dialogue: 0,0:02:39.32,0:02:42.74,Default,,0000,0000,0000,,always specify a backup family name as\Nwell.
Dialogue: 0,0:02:44.45,0:02:48.35,Default,,0000,0000,0000,,Besides 'serif' and 'sans-serif' there are\Na couple other generic font-family
Dialogue: 0,0:02:48.35,0:02:49.50,Default,,0000,0000,0000,,names we can use.
Dialogue: 0,0:02:50.10,0:02:56.60,Default,,0000,0000,0000,,If we wanted our lyrics to look handwritten,\Nwe could specify `font-family: cursive`.
Dialogue: 0,0:02:58.27,0:03:03.87,Default,,0000,0000,0000,,If we wanted the lyrics to be fancier, we \Ncould try the `fantasy` font family.
Dialogue: 0,0:03:04.94,0:03:08.30,Default,,0000,0000,0000,,Or, what if we wanted them to look like\Nthey were written on a type writer?
Dialogue: 0,0:03:08.30,0:03:11.12,Default,,0000,0000,0000,,We could specify the `monospace` font family.
Dialogue: 0,0:03:11.20,0:03:15.18,Default,,0000,0000,0000,,The `monospace` font is fixed width,\Nmeaning that all of the letters take up
Dialogue: 0,0:03:15.20,0:03:16.31,Default,,0000,0000,0000,,the exact same width.
Dialogue: 0,0:03:16.48,0:03:20.05,Default,,0000,0000,0000,,And, in fact, you've seen a lot of monospace\Nfonts here on Khanacademy,
Dialogue: 0,0:03:20.26,0:03:23.33,Default,,0000,0000,0000,,because we always use monospace fonts\Nfor code editors.
Dialogue: 0,0:03:23.100,0:03:27.08,Default,,0000,0000,0000,,That's because we want all of our code to\Nline up, regardless of the letters in
Dialogue: 0,0:03:27.22,0:03:27.78,Default,,0000,0000,0000,,the words.
Dialogue: 0,0:03:29.48,0:03:33.31,Default,,0000,0000,0000,,Now that you know how to change the \Nfont family, use your power wisely.
Dialogue: 0,0:03:33.45,0:03:37.79,Default,,0000,0000,0000,,If you want your page to look good, limit\Nyourself to a few different families,
Dialogue: 0,0:03:37.79,0:03:40.23,Default,,0000,0000,0000,,and come up with pairs of fonts that look\Ngood together.