MMP 240 Web Design
MMP 240 Web Design
CSS Resource Typography

CSS Properties for Typography

by |Published |3 comments

These are some of the more commonly used properties for typography and creating typographic hierarchy.

Font (Typeface): 

This controls the font that is used. Also see the information on fonts in the CSS section of the Web Design Resources. 

CSS Property: font-family

Example: font-family: "pt sans", sans-serif;

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

Font Weight

This controls the weight (boldness and lightness) of the font. The possible values are 100, 200, 300, 400, 500, 600, 700, 800, 900. You can also specify bold, normal, light but it is better to be specific and use the numbers. 100 is extra light,  and 400 is normal, and 900 is extra bold.

CSS Property: font-weight

Example: font-weight: 700;

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

Font Size

This is how big the font is. When designing responsive sites generally it’s better to specify fonts in em or rem units. More on that in another section.

CSS Property: font-size

Example: font-size: 2em;

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

Font Style

This allows you to make text italic.

CSS Property: font-style

Example: font-style: italic;

https://developer.mozilla.org/en-US/docs/Web/CSS/font-style

Line Height

This controls the space between lines of text. This is one of the few properties where you can give a unitless value. If you just write a number it will multiply that by the font-size that has been set.

CSS Property: line-height

Example: line-height: 1.5;

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

Color

Changes the color of the text. The color can be specified in a number of ways from named colors (red, green, blue) to hexadecimal numbers #FF8800 to rgba values rgba( 34, 12, 64, 0.3)

CSS Property: color

Example: color: #ff4400;

https://developer.mozilla.org/en-US/docs/Web/CSS/color

Background Color

This changes the color of the background. This combined with color defines the contrast of the color of the text and the background color. It can take the same values as color.

CSS Property: background-color

Example: background-color: #ffffff;

https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

Alignment

Here you control if the text is aligned left, right, centered or justified.

CSS Property: text-align

Example: text-align: justify;

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

Case

This allows you to force your text to be uppercase or lower case or capitalize (like a title or name)

CSS Property: text-transform

Example: text-transform: uppercase;

https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform

You may also like