Join us and get access to thousands of tutorials and a community of expert Pythonistas.
This lesson is for members only. Join us and get access to thousands of tutorials and a community of expert Pythonistas.
Adding Some Fonts
00:00
You can change the text size of your font with the font-size property. Go ahead and change the font size for your body. So inside the body declaration block, drop down to a new line so that you’re below background-color and type `font-size: and then 1.3em;`
00:19
The unit em tells the browser to display the text 1.3 times bigger than the font size of the parent element. The parent element of body is HTML, so the text will be displayed 1.3 times larger than the default font size in a browser.
00:36
Next, you can define a font stack. This is when you list more than one font for the font family property. So drop down to a new line and type font-family:, and then in quotes type “Helvetica”, “Arial”, also in quotes, and then comma sans-serif; and sans-serif will not be in quotes.
01:00 Your browser will try to load the fonts from left to right. If the browser cannot load the Helvetica typeface, it’ll move on to Arial, the next fallback font.
01:10
If neither load the browser will load any sans-serif font. Open index.html in your browser, and have a look at your new font styles.
01:20 You can now clearly see your new font size and font family, but how can you be sure which font was loaded? Use your browser’s developer tools to investigate which font was loaded for you.
01:30 So right-click, Inspect. On Chrome and Edge it’ll be under the tab called Computed, right next to Styles.
01:39 You should now see a section labeled rendered fonts. You can see the font family rendered on my page is Arial and Arial Bold. With the CSS that you’ve added to your HTML, you’re only scratching the surface of designing your website.
01:54 It’s now a great time to learn about separation of concerns.
01:58
Before moving on to separation of concerns, you can recap what you just learned. 1.3em tells the browser display the text 1.3 times bigger than the font size of the parent element.
02:11 The parent element of <body> is <html>, so the font size was displayed 1.3 times bigger than the default font size for your browser. Typically, the font size for a browser is sixteen pixels.
02:25
Why use em? Using em or percentages is common for text sizes. The em unit is used to measure horizontal widths and allows for creating scalable designs.
02:37
The font stack is when you list more than one font for font-family. The browser tries to load the fonts from left to right. If the browser can’t find a font in the font stack, it continues to the next fallback font.
02:51 With a better understanding of text styles under your belt, you can now dive into separation of concerns.
Become a Member to join the conversation.