These are some of the more commonly used properties for typography and creating typographic hierarchy.<\/p>\n\n\n\n
This controls the font that is used. Also see the information on fonts in the CSS section of the Web Design Resources. <\/p>\n\n\n\n
CSS Property<\/strong>: font-family<\/p>\n\n\n\n https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-family<\/a><\/p>\n\n\n\n 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.<\/p>\n\n\n\n CSS Property<\/strong>: font-weight<\/p>\n\n\n\n https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-weight<\/a><\/p>\n\n\n\n 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.<\/p>\n\n\n\n CSS Property<\/strong>: font-size<\/p>\n\n\n\n https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-size<\/a><\/p>\n\n\n\n This allows you to make text italic.<\/p>\n\n\n\n CSS Property:<\/strong> font-style<\/p>\n\n\n\n https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-style<\/a><\/p>\n\n\n\n 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.<\/p>\n\n\n\n CSS Property<\/strong>: line-height<\/p>\n\n\n\n https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/line-height<\/a><\/p>\n\n\n\n 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)<\/p>\n\n\n\n CSS Property:<\/strong>\u00a0color<\/p>\n\n\n\n https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/color<\/a><\/p>\n\n\n\n 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.<\/p>\n\n\n\n CSS Property<\/strong>: background-color<\/p>\n\n\n\n https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/background-color<\/a><\/p>\n\n\n\n Here you control if the text is aligned left, right, centered or justified.<\/p>\n\n\n\n CSS Property<\/strong>: text-align<\/p>\n\n\n\nExample:<\/strong> font-family: \"pt sans\", sans-serif;<\/pre>\n\n\n\n
Font Weight<\/strong><\/h4>\n\n\n\n
Example<\/strong>: font-weight: 700;<\/pre>\n\n\n\n
Font Size<\/strong><\/h4>\n\n\n\n
Example<\/strong>:\u00a0font-size: 2em;<\/pre>\n\n\n\n
Font Style<\/strong><\/h4>\n\n\n\n
Example<\/strong>:\u00a0font-style: italic;<\/pre>\n\n\n\n
Line Height<\/strong><\/h4>\n\n\n\n
Example<\/strong>:\u00a0line-height: 1.5;<\/pre>\n\n\n\n
Color<\/strong><\/h4>\n\n\n\n
Example<\/strong>: color: #ff4400;<\/pre>\n\n\n\n
Background Color<\/h4>\n\n\n\n
Example<\/strong>: background-color: #ffffff;<\/pre>\n\n\n\n
Alignment<\/strong><\/h4>\n\n\n\n
Example<\/strong>: text-align: justify;<\/pre>\n\n\n\n