Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
For this installment of the First Look series, James Williamson reviews the current implementation and future direction of web fonts: downloadable font resources that can be retrieved with the CSS @font-face declaration. The course begins with the evolution of online typography and current CSS font capabilities, and then dives into the W3C CSS Fonts Module specification, showing how to utilize web fonts, ensure cross-browser consistency, and how to use CSS3 to enhance the styling of web fonts. Font hosting services and tools such as TypeKit and the Google Fonts API are demonstrated. Exercise files accompany the course.
One of the standard layout devices for type that has been conspicuously missing from most web layouts is the use of multicolumn text. Now let's just due in large part to differences in how people read on the screen versus the printed page and of course in part to complicated workarounds required in earlier versions of CSS to achieve multiple columns. CSS3 contains the multicolumn layout module and that makes it incredibly easy to create multiple columns as well as giving options for controlling the columns themselves. To make Alice in Web Fonts chapter a little easier to read, we're going to add multiple columns to the chapter sections. I'm going to show you what I mean by that.
If I scroll down through here you can see each one of these little individual sections inside the chapter, they are not hard to read the way it is right now. It would just look better if I could get sort of the two column view here. Now as we do this we're going to discuss some limitations of using multiple columns and the screen-based environment, because there are some things that you'll need to consider when deciding whether to use these or not. So I'm going to switch back into my index.htm and this is open from 04_07 folder in our exercise files and the thing that I want to point out to you, if I scroll down through the code here, I want to show you some of these sections.
Here we have a section with a class of subsection on it and then you'll notice that all the paragraph text is wrapped in a div. Now that div is not really semantic markup. It's there for the express purpose of creating multiple columns. In CSS3, when you are using multiple columns, you use the column count property, but the problem is I would really love to use this section tag instead, because each one this little subsection. But I can't do that because inside each of the section we have a headline. You know here is an h1 tag. If I left it this way then the headings themselves would also be part of the columns and if the heading was long enough it might even get split up or broken instead of just continuing on one line the way I want them to.
So I had to consider the fact that, hey I just want my body copy to be encased in multiple columns and so because of that I have to add the extra div tags. So it's a little bit extra markup and it's something that you could consider when you're taking a look at your code that you want to create column out of, but its really not that bad in terms of adding extra markup. I've seen far-far worse. All right so I'm switch over to my main.CSS. Again you can find this in the 0407_CSS folder. I'm going to scroll down to about line 242 or so. Right around in there.
And you're going to find this empty selectors section, subsection div and that's targeting that div tag specifically. And we're just going to go ahead and do our column count. So I'm going to type in column-count and I'm going do a column count of two. So column-count is a property you're going to use and you just specify how many columns you want inside that container. Now this is still an experimental properties so I'm going to copy this and I'm actually going to paste it two more times and the reason I'm doing this, because I need to put some vender prefixes on the front of this, so I'm going to do webkit for my first one, dash, and then -moz for my second one.
I don't need to doing for Opera because Opera as if yet does not support column-count. WebKit and Mozilla do so I'm going to put both of those there and we can also control the amount of gutter we have between the two columns. Now for those you that aren't graphic designers that gutter is just basically referring to the gap between the columns themselves. Now again here we have to use some vender prefixes so I'm going to type in -webkit-column-gap and for the gap I'm going to put in 1.6em. Now if you're wondering where to get that value from, if you remember our movie earlier where we talked about sizing options, that is coming straight from our modular scale that we're using for this site. So I'm trying to make sure that the size of columns relates to this as well.
Next thing I'm going to do is go down and do moz-column-gap as well and that's going to be 1.6em and finally we'll just do the default implementation, column-gap1.6em. So we're just going to go ahead and save that. I want to upload this to my server and then I am going to go back to my browser and refresh and well it was just that easy. There are my multiple columns. How cool is that? Now there aren't any mechanisms as of yet allows to make one column a little bit wider than the other, but as it is, I mean that's really neat feature. Now I want a couple of things out to you here that are really-really important in dealing with multiple columns and reading them on the screen.
You're going to introduce sections is pretty small. So because of that when somebody is reading one of this sections, they're not going to read down the column and really have to scroll back up. You know that might happen in like just this instance where they roll down and then they've got to scroll back up and the scroll back down. Your users aren't going to want to do to a lot, so you want to make sure that the sections that the sections that you're creating multiple columns in are pretty small in size. You also do notice that I have a divider, like a visual divider, between these sections. The reason for that is not just aesthetic. So if I am reading this and I'm going down the column, even though there is this headline here there would be a temptation for people to continue reading as if it were one big section and then come back up.
The dividers tells them quite visually that oh no, no, stop here and go back up and read, so it really helps sort of defined those sections as individual units and it does that visually. All right so this is a fantastic technique. It may be a little limited, but it does give us another really-really powerful tool when we want to control typography within our sites. As I mentioned earlier this capability is not supported in Opera and it's also not supported in Internet Explorer, so you need to make sure that your layouts work well with or without it, at least for the time being.
Find answers to the most frequently asked questions about Web Fonts First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.