Scribd
Upload
41 views4 pages

Typography Typography: Cheatsheets / Learn CSS

The document summarizes several CSS properties for controlling typography: - The font-weight property sets the thickness of text from 100-900, with 400 being normal and 700 being bold. - font-style can set text to italic. - @font-face imports external fonts into stylesheets by specifying the font file location. - font-family allows multiple fallback fonts in order of preference if the initial font fails to load. - line-height sets vertical spacing between lines as a ratio or using units like px. - External fonts can be linked using the <link> tag and used in CSS.

Uploaded by

Cristina Iordache
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
41 views4 pages

Typography Typography: Cheatsheets / Learn CSS

The document summarizes several CSS properties for controlling typography: - The font-weight property sets the thickness of text from 100-900, with 400 being normal and 700 being bold. - font-style can set text to italic. - @font-face imports external fonts into stylesheets by specifying the font file location. - font-family allows multiple fallback fonts in order of preference if the initial font fails to load. - line-height sets vertical spacing between lines as a ratio or using units like px. - External fonts can be linked using the <link> tag and used in CSS.

Uploaded by

Cristina Iordache
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/ 4

28/04/2020, 13*56

Cheatsheets / Learn CSS

Typography

about:blank Page 1 of 4
28/04/2020, 13*56

The CSS font-weight property


The CSS font-weight property declares how thick or thin should be the characters
of a text. Numerical values can be used with this property to set the thickness of
the text. The numeric scale range of 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.

/* Sets the text as bolder. */


p {
font-weight: 700;
}

CSS font-style property


The CSS font-style property determines the font style in which text will appear.
It accepts italic as a value to set the font style to italic.

.text {
font-style: italic;
}

CSS @font-face rule


The CSS @font-face rule allows external fonts or font files to be imported directly
into stylesheets.The location of the font file must be specified in the CSS rule so
that the files can be loaded from that location. This rule also allows locally hosted
fonts to be added using a relative file path instead of a web URL.

@font-face {
font-family: 'Glegoo';
src: url('../fonts/Glegoo-Regular.ttf') format('truetype');
}

about:blank Page 2 of 4
28/04/2020, 13*56

CSS Fallback Fonts


The CSS font-family property can have multiple fonts declared in order of
preference. In this case the fonts following the initial font are known as the fallback
fonts.
If the initial value of the property font-family fails to load to the webpage, the
fallback fonts will be used.

/* Here `Arial` is the fallback font for <p> tags */


p {
font-family: "Helvetica", "Arial";
}

The CSS line-height property


The CSS line-height property declares the vertical spacing between lines of text.
It accepts both 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.

p {
line-height: 10px;
}

CSS Linking fonts


Linking fonts allow user to use web fonts in the document. They can be imported
in an HTML document by using the <link> tag. Once the web font URL is placed
within the href attribute, the imported font can then be used in CSS declaration.

<head>
<link href="https://fonts.googleapis.com/css?family=Droid+Serif"
rel="stylesheet">

about:blank Page 3 of 4
28/04/2020, 13*56

</head>

about:blank Page 4 of 4

You might also like