Scribd
Upload
30 views

Learn CSS - Typography Cheatsheet - Codecademy

The document discusses various CSS properties for controlling typography: font-weight sets thickness, font-style sets italic, @font-face imports external fonts, font-family declares fallback fonts, line-height sets line spacing between lines of text, and <link> imports web fonts.

Uploaded by

ahmedahmedlaidi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
30 views

Learn CSS - Typography Cheatsheet - Codecademy

The document discusses various CSS properties for controlling typography: font-weight sets thickness, font-style sets italic, @font-face imports external fonts, font-family declares fallback fonts, line-height sets line spacing between lines of text, and <link> imports web fonts.

Uploaded by

ahmedahmedlaidi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

15/11/2023 18:32 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 .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 @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
15/11/2023 18:32 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