I advise you to start with a line of 1.4em and adjust it as necessary.One of the first and the most basic concept we explored while learning how to use the computer was Microsoft Word. This paragraph is a little tough to read: Tough to readĪn increased line height can help. This can particularly help with the readability of long paragraphs. In CSS, you control the vertical space between lines of text using the line-height property. In school, you may have been asked to submit essays that were single-spaced or double-spaced (or even 1.5-spaced)! Let's quickly check out three more CSS properties that both involve sizing: line-height, letter-spacing, and word-spacing. As you work on your own projects, you'll get a feel for each. It will take time to comfortably set sizes using pixels, ems, rems, and percentages. Only the above units of measurement are different. The 3 different sets of CSS below all result in the same new font sizes: /* pixels */ You can see the smaller size on the left, and the new, bigger size on the right. Say you want to make an h1 element larger than its default size, which is 32px, and you want to increase the paragraph text size to 18px.
We mentioned above that the default text size for body (paragraph) text is 16px. For example, if you define one font size using ems, define all font sizes using ems. Once you choose a unit, just be consistent. Use the font-size property in CSS to adjust the size of text using any of the units above.
Percent value = em = desired element pixel value / parent element pixel value * 100 Font-size The following math will help you set font sizes in percentages: Sizes are defined as relative to one another, not as absolute values. Setting sizes via percentages is similar to setting them using ems. When using rems, it will still be shown at 2rem. When using ems, if you have an element at a size of 2em inside another element of 2em, the inner element will be shown at 4em. The following math will help you set a font sizes in ems:Įm = desired element pixel value / parent element pixel valueĪ rem is similar to an em, except that it doesn't compound. To set a font size of 32 px, you would use 2em. When setting fonts, 1em is equal to the default body (paragraph) text size of 16px. ems and remsĪn "em" or "rem" (pronounced as one syllable) are very commonly used units of sizing in CSS because they let you define sizes relative to other elements. This is the most fundamental text on any website, and 16px is an important number to keep in mind as you start working with the other units described in this chapter. By "body text", we mean the height of paragraph text. The default body text size in CSS is 16px. This can cause strange behavior sometimes on certain screen sizes or if a user uses custom size settings in their browser. The one downside with defining size by via pixel values is that your elements' sizes are defined absolutely and are not relative to one another. You'll use a similar value of measurement called pixels. A screen is composed of many pixels, and by setting a font size of 12 pixels, you are saying that you want your text to have a height of 12 pixels. On web pages, however, you won't use points. It's a good unit for setting font sizes in print documents. This number is defined in a unit called "points" or "pt" for short. When working in Word or Google Documents, you choose a font size from a dropdown list. Pixelsĭefining a font size using pixels most closely resembles the way you set font sizes in most other contexts. Let's start defining sizes with pixels (an absolute way to define sizes). If the base size of 34 is redefined, the other sizes will change as well. You might say that you want to produce another size that's 2 inches wider than that base value, a size that's 4 inches wider than that base value, a size that's 6 inches wider than that base value, and so on. All sizes will be defined relative to the size 34. Setting relative sizes means that you define all values relative to a base value, like saying that you want to create a t-shirt line with a base size of 34. Setting absolute sizes means that you define exact size values, like saying you want to make t-shirts that are sizes 34, 36, 38, 40, and 42. There are two options: setting absolute sizes and relative sizes. The primary differences between them is how sizing is calculated relative to the overall web page. Several units of measurement are available to control font size in CSS: In this chapter, we'll see how to set a font's size and control the spacing between different letters, words, and lines.įirst, let's cover the different ways to control text sizing in CSS. Now that you know how to set fonts, you're likely interested in being able to control their sizes and spacing.
0 kommentar(er)
