In part 2 we are going to cover fonts, webfonts and the box model.
If you missed the first article that covered the basics of styling, selectors and specificity you can find it here: CSS Basics: Part 1
Those most basic place to start. To choose our font we use font-family.
However, only fonts that are already on the users system can be selected like this. There is a big difference between the font families that are available natively on Macs and PC’s however. For example Helvetica is on 100% of Macs, but less than 10% of PC’s. So if we want to use a font that looks like Helvetica. It is smart to pick several backup fonts that are similar to Helvetica. After we select 1 or 2 backups, we can then pick a generic family name like serif or sans-serif as a final backup.
The most basic way to set a font size is defining a pixel height, which is a static setting.
One of the things to note about this however, is that this doesn’t take the users screen size into account. So while this huge 100px font might look great on a big 2k monitor, it may make it difficult to read on a cell phone. This is where scalable fonts come in handy.
By using em to set the size of your font, you base all the font sizes as a ratio of 1 base font that you set in the body. For example you could pick 16px for the base font, and then h1‘s could be 2em, which would be double the size of the base font, h2 could be 1.5em, and p could be 1 em. There is an awesome tool for visualizing what these different sizes look like with preselected ratios at Type Scale.
This is really great, because once you have decided on your ratio between font sizes, you can simply adjust the base font size in the body and all the other font sizes will adjust and be scaled to each other with the same ratio.
Font weight refers to how thick the lines of the font are. For example how bold they are.
Font weight can also be selected on a scale of 100-900 in increments of 100, if the font allows this (many web fonts operate this way).
Sets the vertical spacing between lines of text, but does not change the height of the text itself. Similar to changing the line spacing in Microsoft word.
This property can be set with the keyword ‘normal’, a length in pixels, a percentage in em, or a number like a text editor.
Also similar to a word processor, text align can be set to left, right, center or justify.
Gives underline, strike-through and overline. You can also style the lines with wavy, dotted, colors etc!
Custom Fonts/Web Fonts
This will cover custom fonts that can be loaded from google or other services like TypeKit. However the general concept is that you link to the font you want in the <head> and that will make an offsite request that will load the font for the user when they load the page.
In this case we have put the following link in the header:
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
While Google Fonts is awesome and free, there are some other interesting options. Primarily Adobe Typekit, which usually costs money, and Font Awesome is great for loading icons.
The Box Model
The box model is one of the most fundamental and important principles of CSS so we will spend a decent amount of time on this and create several examples.
- Content – The text, image, input or whatever the actual content is inside the box
- Padding – The space between the content and the border on all four sides
- Border – Just what it sounds like. This is where the styling for the box ends.
- Margin – The space between the box and the other objects around it.
Every element on the page is confined to one of these boxes and the size and behavior of the box can be adjusted with these tools. Let’s make a couple of samples where we adjust the behavior of a <div> and then a couple of <p>‘s.