Scribd
Upload
40 views

Learn CSS - Typography Cheatsheet - Codecademy

The document discusses various CSS properties for controlling typography: - The font-weight property declares the thickness of text from 100-900, with 400 being normal and 700 being bolder. - The font-style property determines if text is italic or not. - The @font-face rule allows importing external font files into stylesheets by specifying the file location. - The font-family property supports fallback fonts that are used if the initial font fails to load. - The line-height property controls vertical spacing between lines of text using pixel values or unitless ratios. - Linking fonts via the <link> tag allows using web fonts imported from URLs.

Uploaded by

moonoliver412
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
40 views

Learn CSS - Typography Cheatsheet - Codecademy

The document discusses various CSS properties for controlling typography: - The font-weight property declares the thickness of text from 100-900, with 400 being normal and 700 being bolder. - The font-style property determines if text is italic or not. - The @font-face rule allows importing external font files into stylesheets by specifying the file location. - The font-family property supports fallback fonts that are used if the initial font fails to load. - The line-height property controls vertical spacing between lines of text using pixel values or unitless ratios. - Linking fonts via the <link> tag allows using web fonts imported from URLs.

Uploaded by

moonoliver412
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

1/5/24, 7:10 PM Learn CSS: Typography Cheatsheet | Codecademy

Cheatsheets / Learn CSS

Typography

CSS font-weight Property

The CSS font-weight property declares how thick or /* Sets the text as bolder. */
thin should be the characters of a text. Numerical values
p {
can be used with this property to set the thickness of the
text. The numeric scale range of this property is from 100 font-weight: 700;
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 style .text {


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
font-family: 'Glegoo';
the font file must be specified in the CSS rule so that the
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.
}

https://www.codecademy.com/learn/learn-css/modules/learn-css-typography/cheatsheet 1/2
1/5/24, 7:10 PM Learn CSS: Typography Cheatsheet | Codecademy

CSS Fallback Fonts

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

The CSS line-height property

The CSS line-height property declares the vertical p {


spacing between lines of text. It accepts both unitless
line-height: 10px;
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 used in href="https://fonts.googleapis.com/css?
CSS declaration. family=Droid%20Serif" rel="stylesheet">
</head>

Print Share

https://www.codecademy.com/learn/learn-css/modules/learn-css-typography/cheatsheet 2/2

You might also like