Scribd
Upload
17 views2 pages

Learn CSS - Typography Cheatsheet - Codecademy

The document provides a cheatsheet for CSS typography, covering properties such as font-weight, font-style, and line-height. It explains how to use the @font-face rule to import external fonts, as well as the concept of fallback fonts in the font-family property. Additionally, it describes how to link web fonts in an HTML document using the <link> tag.

Uploaded by

Gibril sonko
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views2 pages

Learn CSS - Typography Cheatsheet - Codecademy

The document provides a cheatsheet for CSS typography, covering properties such as font-weight, font-style, and line-height. It explains how to use the @font-face rule to import external fonts, as well as the concept of fallback fonts in the font-family property. Additionally, it describes how to link web fonts in an HTML document using the <link> tag.

Uploaded by

Gibril sonko
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Cheatsheets / Learn CSS

Typography

CSS font-weight Property

The CSS font-weight property declares how thick /* Sets the text as bolder. */
or thin should be the characters of a text. Numerical
p {
values can be used with this property to set the thickness
of the text. The numeric scale range of this property is font-weight: 700;
from 100 to 900 and accepts only multiples of 100. The }
default value is normal while the default numerical
value is 400 . Any value less than 400 will have text
appear lighter than the default while any numerical value
greater than the 400 will appear bolder.
In the given example, all the <p> elements will appear
in a bolder font.

CSS font-style property

The CSS font-style property determines the font .text {


style in which text will appear.
font-style: italic;
It accepts italic as a value to set the font style to
italic. }

CSS @font-face rule

The CSS @font-face rule allows external fonts or font files @font-face {
to be imported directly into stylesheets.The location of
the font file must be specified in the CSS rule so that the
font-family: 'Glegoo';
files can be loaded from that location. This rule also src: url('../fonts/Glegoo-Regular.ttf')
allows locally hosted fonts to be added using a relative file format('truetype');
path instead of a web URL.
}
CSS Fallback Fonts

The CSS font-family property can have multiple /* Here `Arial` is the fallback font for
fonts declared in order of preference. In this case the
<p> tags */
fonts following the initial font are known as the fallback
fonts. p {
If the initial value of the property font-family fails font-family: "Helvetica", "Arial";
to load to the webpage, the fallback fonts will be used.
}

The CSS line-height property

The CSS line-height property declares the p {


vertical spacing between lines of text. It accepts both
line-height: 10px;
unitless numbers as a ratio (eg. 2 ) and numbers
specified by unit as values (eg. 12px ) but it does not }
accept negative numbers. A unitless number is an
absolute value that will compute the line height as a ratio
to the font size and a unit number can be any valid CSS
unit (eg. pixels, percents, ems, rems, etc.). To set the
line-height of the <p> elements to 10px ,
the given CSS declaration can be used.

CSS Linking fonts

Linking fonts allow user to use web fonts in the document. <head>
They can be imported in an HTML document by using the
<link
<link> tag. Once the web font URL is placed within
the href attribute, the imported font can then be href="https://fonts.googleapis.com/css?
used in CSS declaration. family=Droid%20Serif" rel="stylesheet">
</head>

Print Share

You might also like