Text Formatting

Heading Margin

• Objects/Elements that are close to each other are perceived to be related.
• For headings, the top margin should be greater than the bottom margin.
• Use rem so the margin to be relative to the font size of the root element. . If the user changes the font size, to very large, the margins are still respected.

h1 {
	margin: 3rem 0 1rem;
}

Line Height

• Used to adjust the vertical space between lines
• If you change the font size, remember to change the line height as well
• Values can be specifed in keyword, unitless value (multiplier), length value (em), %
• Unitless value is multiplied by the elements font size. Preferred way
• A good benchmark is 1.5 em.

/* Keyword value */
line-height: normal;

/* Unitless values: use this number multiplied by the element's font size */
line-height: 3.5;

/* <length> values */
line-height: 3em;

/* <percentage> values */
line-height: 34%;

body {
    font-size: 2rem;
    line-height: 1.5;
}

Letter Spacing

• Used to specify the space between the characters in a text.
• Use pixel instead of rem
• Depending on the font you use, the characters in your font may be so close or far, so you can increase or decrease lettering spacing. You can reduce Letter spacing by supplying a negative value also.

body {
	letter-spacing: 1px;
}

Word Spacing

• Used to specify the space between the words in a text.

body {
	word-spacing: 1px;
}

Line Width

• The ideal line length is between 50 to 70 characters, so the user can easily read our text
• Ch is a unit in CSS, which is relative to the width of the zero character.
• If you have 50 zeros, it's roughly equivalent to 60 to 70 characters.

p {
    width: 50ch;
}