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.
These little scrolls sort of offsetting the corners to give it an almost the illusion that it's been rotated right now, but it's not. I would love to physically rotate that just to give it some really nice stylistic dynamic tension between the Alice and the Web Fonts, but that would have been really, really hard to do prior to CSS 3. With CSS 3 it's pretty darn simple, and let me show you. So, here I am in the main.css file. You can find this in 0406_CSS directory and what I'm looking for is on about line 123, if I scroll down a little bit, I can find the selector that's driving this, the h1 span#inHead.
So the first thing I want to do down here in the bottom is start doing my transform. Now this is using the CSS 2-D transform module, which you can find on the W3C site and it allows us to scale, offset, or rotate page elements. So in doing this it's still kind of an experimental. A lot of the browsers are still playing around the implementations of it. So we're going to use vendor prefixes. Now if you're interested in learning more about the transform module or the use of vendor prefixes, check out my CSS 3 First Look title in which I talk about those things a great deal.
So what we're to do is dash -webkit-transform: rotate and I'm going to rotate this -10deg for degrees. So let's break this down. The transform property is what we're looking for here. Transform allows us to rotate, scale, things like that. The -webkit is a vendor prefix that allows WebKit to sort of play around this implementation and then when they fell like to have it solidified just remove the vendor prefix.
So it's not experimental anymore. Now obviously that's only going to apply to webkit browsers like Safari and Chrome. We want to rotate it. We just want to rotate it and I will move it around. I can do that by using degrees, deg. Positive degrees are going to move me in a clockwise fashion. Negative is going to move me counterclockwise. So I'm just going to move it 10 degree counterclockwise. Now, obviously, this line of text would only affect one browser. I want to affect more. So I'm going to copy this, paste it, and I'm going to change the -webkit prefix to moz for Mozilla.
I'll go down to the next line and change that to o. So once again the browsers are actually really doing us a favor here. they're sort of letting us play around with these implementations and all we have to do is put a vendor prefix on the front end to that. Of course, I'm also going to paste one in and just remove that. That way if those browsers or vendor prefixes aren't used anymore or there is a device out there that supports it natively, then we have that value as well. We don't need to change anything else. Just the vendor prefixes. So I'm going to go ahead and save this, upload this to my server. Now the word in is rotating.
That's a nice sublet effect, but if you really wanted to say okay, is it really rotating, feel free to come in and crank that value up. If I cranked it to say 60 degrees, for example, rather than 10, that's going to be a lot more obvious. Now obviously we're going for is a little more subtle than that. The 10 degree rotation is what we want. So I'm going to preview that in the browser and there we go. Nice subtle effect. Obviously, using these transforms, they're not right for every single design. So don't feel like you have to throw them into your projects, but having the ability to now transform elements on the page just using pure CSS means it's not a lot easier to get complex type design from our initial designs to the finished site.
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.