Using fonts is another design element that can really enhance your website and speak to the character of the site. In this tutorial I am going to show you how to style your website fonts with CSS.
Styling Your Fonts With CSS
Learning CSS and how to style your fonts can really add a lot to your website. Choosing the fonts you will use on your site is a very important part of your web design. And you want to make sure you style these fonts with CSS.
You can do some styling of your fonts in your post editor if you want. By this I mean you can put text in bold, you can italicize it, or highlight certain fonts in your posts text for effects, but I highly recommend that the majority of your font styling should be done with the CSS.
This goes to the overall look of your site. Your want to style your fonts with CSS so that they will look consistant across all of the pages and posts of your website. This helps with the readability and flow of your site.
For example, here are some of the areas of your website that you want to use CSS to style the fonts with.
- Post titles
- Sidebar titles
- Main body text
- Menu bar text
- Other heading
- And more!
Each of these areas can be styled differently. There are 7 different styling methods that I use for fonts. They are:
- font-family
- font-size
- font-weight
- color
- text-align
- text-transform
- text-decoration
Styling One–Font-Family
The first styling we will talk about is font-family: This controls which font will be used on your site.
Here is just an example, this would go in your CSS file.
font-family: lato;
Just do font-family and then the colon and whatever font you want to use, and then end it with the semi-colon. I am using lato. Lato is a good body text font to use, as it is easy to read.
Note: I HIGHLY recommend using Google fonts for all your website fonts.
Google Fonts are free to use. They show up on every single website, every single computer, as long as you insert them correctly. And there are literally tons of them to choose from. In fact I have talked about this before in one of my previous articles, Choosing Good Fonts for Websites.
And it makes it really easy to use this font-family as you can just pick the Google font you want and just insert it into the CSS of your site.
Styling Two–Font-Size
Our next styling is font–size and this controls what size the font of that element is.
So here is how we would write this:
font-size: 14px;
We would do font-size, colon and then whatever size you want to use. Here we are using 14px. Then you end it with the semi-colon.
You can set your font sizes in either em or px. It just depends on what you want to use as the unit of measurement.
I have another tutorial on sizing, Learning CSS Code Part 3-Coding Size With CSS, which talks about ems or px when sizing elements. So you can review that if you like to understand which one you would want to use. I like to use px in most of my designs, but its entirely up to you.
Styling Three—Color
This controls what color the font of that element is. For this one you just put color: see below.
color: #c6aebd;
You don’t need to actually put font-color, as it knows that you are doing the color of the font. So, you put color, then the colon, they you use the pound sign (#) and the the color code you want to use ended by the semi-colon.
I recommend you set all of your font colors with color codes. Using the codes just makes the colors more precise and uniform in your CSS.
Styling Four—Font Weight
This controls how thick the font of that element is. So heres an example:
font-weight: bold;
So here we have the font-weight, followed by a colon, then the weight is set to bold and then we close it with a semi-colon. Now you can wright these two different ways:
- lighter, normal, bold, bolder
- 100, 200, 300, 400, 500, 600, 700, 800
The first way is with the words lighter, normal, bold, bolder. So, you just pick the word that matches the font-weight you want.
If you don’t write anything, if you don’t include font-weight in your CSS styling, then it just assumes normal weight. So if you just want normal then you don’t have to put a font-weight in.
The second way is to wright the font-weight in numbers. You can use 100, 200, 300, 400 up to 800. 400 is normal and bold would be about 700. So writing in hundreds is a second way you can write the font-weight if you want.
So again, if you don’t put anything here, the CSS will assume 400 as normal, and then 700 is bold.
Styling Five—Text Transform
The next CSS styling is text–transform: and it controls the capitalization of the text. So here’s an example:
text-transform: uppercase;
We are doing text-transform, colon, then uppercase and closing with semi-colon. This is going to make all of our letters in the element uppercase.
The options here are none, uppercase, lowercase or capitalize. The default is none, so if you don’t use this styling in your CSS, it will default to none. It will take whatever way you type you letters into your text.
I want to point out here about what capitalize does. If you select this styling, it will start every word with a capital letter. If you want all of the letters to be capitalized, then you would use uppercase.
Styling Six—Text Align
This controls the alignment of the text. Heres an example below:
text-align: center;
So here we are going to center all the text within the element. The options are left, center, or right. The default is left, so if you don’t put anything in, it will be left-aligned.
Styling Seven—Text Declaration
The last sytling I want to talk about is text-declaration: this controls the declaration added to the text. Here’s an example:
text-decoration: underline;
So, now we are going to underline whatever text is in the element that we are controlling. The options here are none, underline, overlain, line-through. The default is none.
There are a few other things that you can do with you text. But this is about as far as I want to go in this tutorial.
Another one that I use sometimes is shadow. But for now, just stick with these seven main stylings. These will really help you control alot of things within your fonts.
Let’s Put All This Together
Here is one big example using all seven font stylings:
You see we are starting with an h1 (header) tag. We use an opening bracket, followed on the next lines by our font-family being rochester. The next line is our font-size of 24 pixels. The next line is our color. On the next line is font-weight of bold. The next line is text-transform, and we are choosing capitalize. The next line is our text-align with a property of center. This is followed finally, on the next line, by our text-decoration of underline. The last line is our closing bracket.
So now this a complete tag to show you how we styled the h1 tag with the selected font of rochester.
Font stylings are something you can definately use to set the mood and appreance of the fonts in your website. So go ahead and play around with these, practise them and I am sure you will make the fonts in your website look great!
Which fonts will you use and how will you style them??
In my next tutorial, Learning CSS Code Part 8-Coding Spacing with CSS, we will conclude the series by learning how to code spacing, or margin and padding, in CSS.
Robin McDonald
Latest posts by Robin McDonald (see all)
- Optimize Your WordPress Images With ShortPixel - January 15, 2018
- How To Increase Your SEO By Adding Keywords And Meta Descriptions In WordPress Posts And Pages - November 20, 2017
- Uninstalling a WordPress Plugin And Why Its Important - October 30, 2017
Leave a Reply