Scribd
Upload
36 views2 pages

Getting More Advanced With Design - Typography Cheatsheet - Codecademy

Typography

Uploaded by

kimato suyaka
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
36 views2 pages

Getting More Advanced With Design - Typography Cheatsheet - Codecademy

Typography

Uploaded by

kimato suyaka
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 / Getting More Advanced with Design

Typography
CSS font-weight Property
The CSS font-weight property declares how
thick or thin should be the characters of a text. /* Sets the text as bolder. */
Numerical values can be used with this property to set p {
the thickness of the text. The numeric scale range of font-weight: 700;
this 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 in which text will appear. .text {
It accepts italic as a value to set the font style to font-style: italic;
italic. }

The CSS line-height property


The CSS line-height property declares the
vertical spacing between lines of text. It accepts both p {
unitless numbers as a ratio (eg. 2 ) and numbers line-height: 10px;
speci ed 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 Fallback Fonts


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

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

CSS @font-face rule


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

You might also like