Embed Size (px)
Citation preview
Web Development 101 by Institute of Code
Let’s talk about textSection 4: Styling Typography
Web Development 101 by Institute of Code
Font Size
Generally it’s best practice to use rems for most typography.
NO. 60
h2 { font-size: 1.5rem; }
h3 { font-size: 30px; }
Web Development 101 by Institute of Code
Font Family
There are only a limited number of 'Web Safe’ fonts including Arial, Helvetica, Times New Roman, Times, Courier New.
NO. 61
h1 { font-family: 'Arial'; }
h2 { font-family: 'Helvetica'; }
p { font-family: 'Times New Roman'; }
Web Development Bootcamp by Institute of Code
WEB
SA
FE F
ON
TSNO. 62
This font is ArialThis font is ImpactThis font is HelveticaThis font is Times New RomanThis font is Courier NewThis font is Comic SansThis font is VerdanaThis font is Georgia
Web Development 101 by Institute of Code
Only problem is all of these are all pretty generic.
NO. 63
Web Development 101 by Institute of Code
Say hello to Google FontsNO. 64
915 free fonts ready for use.
Web Development 101 by Institute of Code
Google Fonts
First add the link to the <head> of your html. In Codepen you access this via Settings > HTML > Stuff for <head>
NO. 65
h1 { font-family: "Roboto"; }
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Then in the css, specify which elements you want to use which fonts.
Web Development 101 by Institute of Code
NO. 66
if you can’t remember how, there are instructions right in Google Fonts.
Web Development 101 by Institute of Code
Font Weight
This determines the thickness or weight of a font.
NO. 67
h1 { font-weight: normal; }
h2 { font-weight: bold; }
p { font-weight: 400; }
Web Development 101 by Institute of Code
Check which font-weights are available
Each font-family has different options for the font-weight.
Make sure you check which font-weights are available and select in Google Fonts > Customize which ones you want to be able to use.
Here, we’re making only 400 and 600 available.
NO. 68
Web Development 101 by Institute of Code
Text Align
The alignment can be left, right, center or justify.
NO. 69
body { text-align: center; }
h2 { text-align: right; }
p { text-align: justify; }
Web Development 101 by Institute of Code
Underlines (text-decoration)
Controlling the default underline on links
NO. 70
a { text-decoration: underline; }
a { text-decoration: none; }
Click Me
Click Me
Web Development 101 by Institute of Code
Text-Transform
This allows you to transform the capitalisation of the text.
NO. 71
h1 { text-transform: none; }
h1 { text-transform: uppercase;}
Hello World
HELLO WORLD
Web Development 101 by Institute of Code
Letter spacing
This determines the space between each letter, the default is 'normal’
NO. 72
h1 { letter-spacing: normal; }
h1 { letter-spacing: 4px; }
HELLO WORLD
H E L L O W O R L D
Web Development 101 by Institute of Code
Line Height
This determines the height of each line of text.
NO. 73
p { line-height: 1; } p { line-height: 1.5; }
This is a short paragraph,
that spreads over two lines.
This is a short paragraph, that spreads over two lines.
Web Development 101 by Institute of Code
Space between paragraphs
If you want to create space not between every line of text but between each separate paragraph you use margin bottom.
NO. 74
p { margin-bottom: 0; } p { margin-bottom: 1rem; }
This is a short paragraph, that spreads over two lines.This is a second paragraph.
This is a short paragraph, that spreads over two lines.
This is a second paragraph.
Web Development 101 by Institute of Code
Default styles
Targeting the body targets all elements on the page. Targeting multiple selectors at once (separated with a comma) allows us to style all the headings at the same time and keep our CSS more efficient.
NO. 75
body { font-family: "Lato"; color: rgb(60,60,65); }
h1, h2, h3 { font-weight: 600; color: orange; letter-spacing: 2px; text-transform: uppercase;}
Web Development 101 by Institute of Code
CodePen ChallengeView Codepen
NO. 76
