Scribd
Upload
31 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 sets the font style to italic. - The @font-face rule imports external font files and allows locally hosted fonts. - font-family allows specifying fallback fonts if the initial font fails to load. - line-height declares vertical spacing between lines as a ratio or unit value like pixels. - External web fonts can be imported using the <link> tag and used via CSS.

Uploaded by

manojschavan6
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
31 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 sets the font style to italic. - The @font-face rule imports external font files and allows locally hosted fonts. - font-family allows specifying fallback fonts if the initial font fails to load. - line-height declares vertical spacing between lines as a ratio or unit value like pixels. - External web fonts can be imported using the <link> tag and used via CSS.

Uploaded by

manojschavan6
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

12/26/23, 11:01 AM 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
p {
values can be used with this property to set the
thickness of the text. The numeric scale range of this font-weight: 700;
property is 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 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 @font-face {


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

https://www.codecademy.com/learn/learn-css/modules/learn-css-typography/cheatsheet 1/2
12/26/23, 11:01 AM 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 <head>


document. They can be imported in an HTML
<link
document by using the <link> tag. Once the web font
URL is placed within the href attribute, the imported href="https://fonts.googleapis.com/css?
font can then be used in 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