Fonts in CSS

A ‘font’ or ‘typeface’ is, well, how the characters on your screen look. There are ‘serif’ and ‘sans-serif’ fonts.

If you don’t tell it otherwise, your browser will show text in the Times New Roman font. But, please, tell it otherwise.

Specifying font family

Use the font-family property in CSS to change the font, for example putting your entire site in the much prettier Arial font by adding this rule:

body {
font-family:Arial;
}

… Yeah that should about do it.

Font size in CSS

Another interesting and often-used one is font-size. Often specified in pixel (px), unless you want to be all fancy and use the ’em’ measure. But you don’t want to be all fancy, so for your first year as a web designer you can just go like this example:

<div class=”quote”>”This is shown bigger than usual”</div>
<style>
.quote {
font-size:20px;
font-family:Helvetica;
}
</style>

Conclusions

For some reason, I hate thinking too much about fonts. I am hoping one of my fellow writers on this site will cover this topic for realsies.

Advertisements

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s