CSS Basics: Part 2


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

Fonts

font-family

Those most basic place to start. To choose our font we use font-family.

See the Pen CSS: font-family by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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.

See the Pen CSS: font-family, backup fonts by Nicholas Coughlin (@nicholascoughlin) on CodePen.

MDN: CSS font-family 

font-size

The most basic way to set a font size is defining a pixel height, which is a static setting.

See the Pen CSS: font-family, backup fonts by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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 could be 1 em. There is an awesome tool for visualizing what these different sizes look like with preselected ratios at Type Scale.

See the Pen CSS: font-size_em by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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.

MDN: CSS font-size

font-weight

Font weight refers to how thick the lines of the font are. For example how bold they are.

MDN: CSS font-weight

See the Pen CSS: font-weight by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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).

line-height

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.

MDN: CSS line-height

This property can be set with the keyword ‘normal’, a length in pixels, a percentage in em, or a number like a text editor.

See the Pen CSS: line-height by Nicholas Coughlin (@nicholascoughlin) on CodePen.

text-align

Also similar to a word processor, text align can be set to left, right, center or justify.

MDN: CSS text-align

See the Pen CSS: text-align by Nicholas Coughlin (@nicholascoughlin) on CodePen.

text-decoration

Gives underline, strike-through and overline. You can also style the lines with wavy, dotted, colors etc!

MDN: CSS text-decoration

See the Pen CSS: text-decoration by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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.

See the Pen CSS – Webfonts by Nicholas Coughlin (@nicholascoughlin) on CodePen.

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.

 

+ There are no comments

Add yours