or...
how to fuck
with fonts
in CSS
what we can
control
family
examples
- Arial
- Verdana
- Times New Roman
more examples
- Serif
- Sans-serif
- Monospace
- Fantasy
- Script
font stacks
example
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
Breakdown
- Property:
- Preferred font first
- Comma-separated fallbacks
- General category last
Why do i have
to do this?
I just want the browser to use what I tell it to.
End of story.
browsers use what they find first
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
browser path breakdown
- Browser: I'm looking for Arial.
- User: I don't have that font.
- Browser: Ok, well... what about Helvetica Neue?
- User: Nope. Don't have that either.
- Browser: Gosh! What about just Helvetica?
- User: Nope. Try again.
- Browser: Fuck it. Just use a sans-serif font.
- User: Sounds good! Here's Verdana!
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
what's with the quotes?
rule of thumb
- Font name more than one word?
- Put it in quotes
exercise
- Add a Level-1 Heading to your page
-
Tell the browser to use Helvetica as it's font family
- If it can't find that, use Arial
- If it can't find that, use Verdana
- If it can't find that, use any sans-serif font
currently installed on the user's computer
size
How big or small a font is.
measurements
- Points
- Pixels
- Picas
- Inches
- Ems
- Relative Ems
- Percentages
all valid
-
font-size: 12px;
-
font-size: 12pt;
-
font-size: 12pc;
-
font-size: .75em;
-
font-size: .75rem;
-
font-size: .5in;
-
font-size: 75%;
This brings us to....
fixed vs. fluid
value types
We'll come back to this.
weight
To bold or not?
2 main options
- font-weight: bold;
- font-weight: normal;
range of options
- 100 - 900
- Lightest - Boldest
- 100-400 (normal)
- 500-700 (bold)
- 800,900 (super bold, black)
stick with bold
and normal
style
Just a bit.
2 main options
- font-style: italic;
- font-style: normal;
that's it.
exercise
- Add a paragraph to your page
-
Make it bold
- Make it italicized
- Make that paragraph twice as big as normal
(remember, normal is 100%) - Lastly, make it Georgia font
- If Georgia isn't available, make it Times New Roman
- If neither is available, just make sure it is a serif font