abc-notepedia

# Typography

# font-family:

  • The default typeface for many browsers is Times New Roman.
  • It’s a good practice to limit the number of typefaces used on a web page to 2 or 3
  • When the name of a typeface consists of more than one word, it must be enclosed in double quotes. font-family: "Courier New"

# font-weight:

# font-style:

# text-transform:

# text-align:

To move, or align text, we can use the text-align property.

  • left - aligns text to the left hand side of the browser

  • center - centers text

  • right edges of the line box, except for the last line

  • right - aligns text to the right hand side of the browser

  • Text Align - MDN (opens new window)

# line-height:

The vertical spacing between lines of text can be modified with the line-height property. Line heights can take one of several values:

  • * A unitless number, such as 1.2. This number is an absolute value that will compute the line height as a ratio of the font size. (prefered method)
  • * A number specified by unit, such as 12px. This number can be any valid CSS unit, such as pixels, percents, ems, or rems.
css line height

# word-spacing:

  • increase the spacing between words in a body of text, technically known as word spacing.

  • the preferred unit is ems.

  • default amount of space between words is usually 0.25em

  • Word Spacing - MDN (opens new window)

# letter-spacing:

increase the spacing between letters, technically known as tracking. Can be adjusted with the letter-spacing property in CSS

# Fallback Fonts

when a stylesheet requires a font that is not installed on a user’s computer the following syntax is required:

h1 {
  font-family: "Garamond", "Times", serif;
}

The CSS rule above says:

# Linking Fonts

Google Fonts provides free fonts that can be used in an HTML file with the <link> tag or the @font-face property.

in HTML:

To load Google fonts with the @font-face property:

  • Instead of using the font’s link in the HTML document, enter the link into the URL bar in the browser.
  • The browser will load the CSS rules. You will need to focus on the rules that are directly labeled as /* latin
  • Some of the latin rules are on separate lines. You will need each of these.
  • Copy each of the CSS rules labeled latin, and paste the rules from the browser to the top of style.css.

# @font-face

The @font-face rule specifies a custom font (incl. Fallback-Fonts). the font can be loaded from either a remote server or a locally-installed font

in CSS: (on the top of the CSS)

@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}
@font-face {
  font-family: "Roboto";
  src: url(fonts/Roboto.woff2) format('woff2'),
        url(fonts/Roboto.woff) format('woff'),
        url(fonts/Roboto.tff) format('truetype');
}

Add a format for each file to specify which font to use.

# text-decoration:

underline, overline, line-through etc.

← Specifity →