Coding for Beginners: The Font-Size Property
Coding for Beginners: The Font-Size Property
Now that we understand the different ways to bring in fonts to your website, we now need to review how to adjust those fonts. There are several properties that affect the typography for web. These properties can be divided into two main categories: font styles and text layout styles. Font styles are those properties that affect the font itself such as the selection of the font (i.e. font-family), size, weight, style (ex. italic), and color. Text layout styles are properties that affect the spacing either between characters, words, and letters and text alignment.
The first property we will review is font-size. In previous videos, we reviewed different ways that you can express units of length and size. Font-size can take values measured in pixels (px), ems, rems and percentages.
Pixels (px) is the number of pixels high the text should be. It is an absolute unit.
When using ems, 1 em is equal to the font size set on the parent element of the current element that you are styling. Ems are named because they were equivalent to the width of the capital letter "M." For example, if the parent element is set to a font-size of 16 px then the child element having a font-size equal to 0.75 em means that the font-size is 12 px (0.75 * 16 = 12). This method can get complicated if you have many elements nested in one another so it becomes difficult to keep track of the "parent" element.
Using rems is similar to using ems except that 1 rem is equal to the font size set on the root element of the document rather than the parent element. This method is simpler because it becomes easier to work out the different relative font sizes. So if the font size on the root element, html, is 16 px then any element set to 0.75 rem will display as 12 px. Rem is not supported by Internet Explore (IE) 8 or older.
When using percentages, if your parent element is set to 16 px and the child element is set to 75% then the result is the font displayed at 12px. You may want a heading to be at 150% or 24 px.
If not specified, understand that the font-size of an element is inherited from the parent element starting from the root element.The standard font-size is set to 16px across browsers.
However, sometimes it is easier to set the root element, html, to 10px so that the math is easier to compute. So if the html has a font-size of 10 px, an h1 with a font-size of 3rem is 30 px, and paragraph text with a font-size of 1.6 rem is 16 px.
Jumpstart Your Learning of HTML and CSS is now LIVE! If you’ve been enjoying The Daily Code Snippet and want to accelerate your learning of HTML and CSS, be sure to check out this workshop: http://get.designerslearncode.com/jum...
In this coding bootcamp, you will not only learn about code but also have hand’s on practical and by the end of the course, you will have coded your first web page. This course is suitable for beginners as we go over the basics. The course does touch upon topics that may be more familiar to those who are designers. This may be helpful to those who want to learn how to create websites with design in mind.