Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
I am going to go ahead and admit to some mixed feelings about using text shadows. Now I don't know of any design tool that has been as overused and as misused as drop shadows have been over the years. However, when used correctly, text shadows can enhance a design and it can help a designer to get their point of view across. In the Alice in Web Fonts design I wanted to invoke a sort of classic vintage look that is updated with just a couple of modern twists. Now rather than just using text shadows to create drop shadows I wanted to use them to help recreate the look of sort of an older a hand-painted sign.
And that's exactly what I want to do with these headers here, Alice in Web Fonts. So I'm going to use a text shadow on the word Alice and another text shadow on the word Web Fonts. Now they're going to be very different so we get some variety to it, but the syntax is actually extremely similar. And Alice I'm just sort of going to make it pop off just a little bit by having a very, very, very subtle shadow. In the word Web Fonts I want to create special effect to give it sort of that offset printed look. So that maybe it was struck a couple of different times or painted that way with this sort of really hard edge shadow to it by using multiple text shadows.
So let's go ahead and take a look at that. Okay so I have my main.css open from the 04_08 folder. You can find it in the _CSS directory in the same directory. I'm going to scroll down to about line 116. That's where I can find these headlines and I want to first focus on the AliceHead right there. So I want to create a line in my CSS. The syntax is really simple if you've never done it before. It's just text-shadow. That's it. We don't need any vendor prefixes. It's been supported for a while so it's really easy to do. And I want to type in 2 pixels space 2 pixel space 1 pixel.
Now what is up with that? Well the 2 pixels and the 2 pixels are offsets. So this is the X offset this is the Y offset. It's basically saying move the shadow over 2 pixels and down 2 pixels and then this is the blur, how fuzzy do I want it. It actually gets really fuzzy really quickly, so I just did 1 pixel to add just a little bit of blur to it, but not much. Now after that I followed that with a color. I'm just going to do a #333, which is a dark gray, not quite black, and then I'll just save this. Notice that we have spaces between those values instead of commas. Don't put commas there. Don't want comma separated.
I want to upload that to my server and then I want to refresh my page. So you can see it's moving over 2 pixels and going down 2 pixels. It's got slight blur to it, but really when you look at this for the first time it makes the text look a little bit bolder, almost like a bevel to it, but it's really subtle. It's not hitting you over the head with "hey, look at this drop shadow." All right, let's turn our attention to web fonts and see how we can create this sort of special effect that I was talking about. All right, so I want to go back into my code and go down to the webHead section and right under this text-transform property here I want to type in text-shadow 3 pixels space 3 pixels space 0.
All right, so that's over 3 pixels down, 3 pixels, and then I want to do a color value of rgb. Okay so, here we're going to pick up a color from our color palette. We're going to do 242, 233, 215. Now that's exact same color as the background. So you're probably sitting here wondering how in the world is a text-shadow that's exact same color of the background going to help us out? Well we're going to use multiple text shadows. One of the really neat things that you can do is you can supply a text-shadows as a comma separated list.
So you can have as many of these things as you want. You can create neon glow effects and outlines. I mean all sorts of things with this. What I'm going to do here for the second one is I am going to create a much further offset and change the color of this. So this one is going to have an X offset of 8 pixels, and Y offset of 8 pixels, a blur of 0, and then finally the rgb value for this one is going to be 155, 155, 155. That's a gray color, a lighter gray. And so with the way that this works is the last item in the list is the one this on the bottom.
The first drop shadow, which is this one, is actually going to lying on top of this drop shadow. So again let's save this. I am going to upload that to my server and then refresh my page and there we go. That's exactly the effect I was looking for. The lighter offset of the same background color makes it look like we have a little bit of knock out and there is the darker shadow that gives me a sort of hand-painted signage look or old handbill printed-press type look and which is exactly what I was going for. Whether you use text shadows to create drop shadows, offset your text, create outlines, or even inner shadows, because you can use negative offsets and create inner shadows inside letters, it's really up to you.
It should be based on your design and your individual point of view. For me, one thing that I'm amazed about is how simple this technique is and how it's still allows you to create all these really creative and compelling typographic effects if it's used properly. And keep in mind that Internet Explorer does not support text shadows and you should always focus on the legibility of your text first and foremost. So if you have a lot of shadows going on sometimes this text can be a little hard to read. Now if you wanted a more technical look at using text-shadows, the syntax involve within, and then possible workarounds for Internet Explorer, check out my CSS3 First Look course in the lynda.com Online Training Library.
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.