Introduction to CSS Text
Having great content on your webpage is just one of the many ways you can attract people to your webpage.
To keep readers intrigued, we need the right presentation skills, one of which has to do with Text.
Text should be easy on the eyes and the flow of words should be intuitive to the user.
In this section, we'll look at how to choose and apply fonts, and then learn about the attributes you can use to change how text appears.
Font Types serif, sans-serif, monospace
There are quite a few fonts out there, but they can all be broken down into three main categories: Serif, Sans-serif and Monospace.
1) Serif
Serif fonts contain a bit of extra detail at the ends of the main strokes. These fonts were considered easier to read back in the olden days. Some serif fonts that we still use today include: Georgia, Times New Roman, and Palatino.
2) Sans-serif
Sans-serif includes all fonts that have straight ends to letters. They are not only considered "modern" and "clean," but are also said to be easier to read, especially when the text is small. In fact, this font that you're right right now is a Sans-serif font. Some examples include: Arial, Comic Sans, and Tahoma.
3) Monospace
Monospace fonts are unique in that they have fixed-width, which makes great for displaying code. Examples include: Courier New, Lucida Console, and Monaco.
There are two other categories that are mainly used for headings, or for special designs. We advise that you do not use this as your body text, as it can be difficult to read.
Now that you know the different types of fonts, let's learn how to get them installed onto your viewers' browser.
Getting Fonts font-family, font-face
There are two ways you can get fonts loaded onto a reader's browser - either by using a browser's default, or importing your own.
1) Font-family
This group of fonts comes pre-loaded from the user's browser. Although they are limited in option, we have the assurance that they will readily be available. Additionally, we do not have to worry about licensing, which is a common issue for other fonts.
Examples include: Arial, Georgia, Times New Roman, Impact, Comic Sans, Courier New.
2) Font-face
If you want to use a font outside of the user's default font styles, we can use the @font-face
method.
With this, the font is downloaded from either a hosting website or from your own server.
This may take more bandwidth, so make sure the aesthetics are worth the extra loading time!
Here is how we use this:
@font-face {
font-family: 'SlimJimFont';
src: url('/public/fonts/slimjimfont.eot');
}
Here, the font "SlimJimFont" is to come from your public/fonts directory.
Notice that this format is .eot
.
There are several other font formats, and you should include them all in case your user's browser does not support a particular format. Thus you should place all the different formats in this order:
- eot
- Embedded Open Type.
- Created by Microsoft over 15 years ago.
- The only type supported by IE8 and below.
- woff
- Web Open Font Format.
- Developed by Mozilla.
- Loads faster than other formats because they use a compressed version structure.
- Most likely the next generation font format option.
- tff/otf
- TrueType Font and OpenType Font.
- These fonts can be illegally copied.
- svg
- Scalable Vector Graphics
- vector re-creation of the font.
- Small file size, making it ideal for mobile use.
One last note! Before you use @font-face
fonts - make sure you read through the license, as some may come with a fee!
Websites that offer fonts for downloads
There are a good amount of websites that allow you to choose and download fonts. Here are just a few:
FontSquirrel allows you to choose from high-quality free fonts for commercial use.
Google web fonts allows you to access over 600 font families! Google Fonts.
Type Depot has a number of free fonts for download, along with great commercial fonts to buy.
1001 Free Fonts doesn't actually have 1001 free fonts. It has even more! Choose from a large selection from 64 categories.
Applying Fonts font-family, font-size
After we have chosen which font to use, and loaded them up using the @font-face
property, we can now apply them to our webpage.
Applying fonts to text
To specify the text, we use the font-family
property.
In case the user does not have a certain font, we list multiple, each separated by a comma. This list is called the font stack.
The user's browser then goes through each font, from left to right, searching for a font that works until it finds one.
p {
font-family: Consolas, Arial, Helvetica, Serif, "Times New Roman";
}
Notice how we have to use quotation marks ("") when specifying a font that is longer than one word.
There are a few "safe" fonts such as Arial, Verdana and Times New Roman that are guaranteed to work.
Applying Styles to your Font bolding, italicizing
Now we can begin to style and decorate our fonts!
Bolding Text
For bolding, we use the font-weight
property.
The values range from 100 to 900 in increments of 100. You may also place predefined values such as lighter, normal (same as 400), bold (700) and bolder.
p {
font-style: bolder;
}
Italicizing Text
For italics, we use the font-style
property.
Values include normal, italic and oblique.
Oblique is different from italic, in that it distorts the glyphs.
a {
font-style: italic;
}
What about em/strong?
Wait a second...But I learned that em/strong is used for italicizing and bolding! Yes...and no.
The emphasis and strong tags indeed have a italics/bold default set on browsers, but should only be used for semantics. This means that you should only use them to actually emphasize a word or text, not just to bold or italice it for style.
Decorating Text text-decoration, text-shadow
Let's now discuss the two ways in which we can decorate our text.
Lines under, over, and through our text
We can apply decorations to our text with the text-decoration
property.
The values include: none, underline, overline, and line-through.
We can take this a step further and add color the line with the text-decoration-color
property.
p {
text-decoration: underline;
text-decoration-color: pink;
}
Hello Venus!
Adding a Drop Shadow
To add a drop shadow behind your text, we can use the text-shadow
property.
p {
text-shadow: 3px 3px 1px blue;
}
The property takes three lengths and a color:
- The first length tells how far to the left/right the shadow should fall.
- The second length is the distance to the top or bottom that the shadow should fall.
- The third length is optional, and specifies the amount of blur that should be applied.
- Lastly, you may choose the color of the drop shadow with the fourth value.
Hello World!
Text Effects text-transform
Transforming Text
To transform the entire text, we use the text-transform
property.
Values include UPPERCASE, lowercase, capitalize, and none.
A value of capitalize
will capitalize only the first letter of each word.
A value of none
is useful if you want to take off the default underlining used in anchor texts (links).
Congratulations!
Congratulations! You just finished the text section of CSS. We'll return to more styles when we cover Typography. Now let's move onto CSS Boxes!