Next up
Setting Font Size
Continuing in
Introduction to HTML and CSS
This is a preview of subscription content
Your browser needs to be JavaScript capable to view this video
Try reloading this page, or reviewing your browser settings
A variety of units of measurement can be used by web designers, but only a few should be used. We will look at the options and explain why some are better than others.
Keywords
- css
- units of measurement
- pixels
- points
- percentages
- ems
About this video
- Author(s)
- Rob Huddleston
- First online
- 04 October 2018
- DOI
- https://doi.org/10.1007/978-1-4842-3979-7_19
- Online ISBN
- 978-1-4842-3979-7
- Publisher
- Apress
- Copyright information
- © Rob Huddleston 2019
Video Transcript
[Audio Begins] [00:00]
Before we can continue on, we need to discuss units of measurement that are available to us when sizing elements on our web page. There are a variety of measurement units available on the Web, including inches, centimeters and millimeters; typographers units such as points, picas, ems, and exes, pixels, percentages – and this is actually only a partial list.
However, only a small number of these units are really good choices for measuring things. The best units to use for type are pixels, percents, and ems. A pixel is the unit of measurement for your computer monitor. Your monitor is literally made up of pixels. When we talk about screen resolution, such as 1280x720, we’re talking about pixels. The exact size of a pixel varies depending on the physical dimensions of the monitor and the screen resolution.
Setting a font as a percentage means making its size relative to another element on the page, either a parent element or a grandparent element. As an example, if I had a body, inside that body was a section, and inside that section was a paragraph . . . if I set the <p> to 90%, I’m saying I want the size of the paragraph text to be 90% of the size of the section. If I did not specify a font size on the section, then I’m saying I want the paragraph size to be 90% of the font size of the body. If I haven’t specified a font size for the body, it’s going to be 90% of the browser’s default font size.
Typographers define an “em” as the width of an upper case letter “M” in the current font. Browsers aren’t that complicated. They simply define it as 100%. So an em is nothing more than a different way to express percentages.
Fonts are not the only thing you can measure on the Web. As we’ll see in upcoming lessons, we can measure width and heighth, margins, padding, borders, image sizes, and a large variety of other things. The best units to use for these are either pixels or percents.
So in this lesson we’ve explored various options for setting sizes of elements in our CSS.
[Audio Ends] [02:40]