Join Ray Villalobos for an in-depth discussion in this video Typography basics, part of iOS 4 Web Applications with HTML5 and CSS3.
Typography has come a long way since the early days of HTML. CSS is responsible for bringing amazing control over font styles, and a lot of that goodness is available on iOS devices. In this chapter, we'll learn how to implement typographic controls over our page elements. So we've got a basic document here with some HTML. It looks very plain. All HTML looks normally very plain like this, so we're going to create some style to spice it up, and we'll add stuff to the style tag here. And as you can see, I'm using a div class article to define how the entire page text is styled.
So the first thing I'll do is I'll style that, so I'll add a .article style here, and start with a little bit of padding, 20 pixels. You can see when I apply right here, it just adds a little bit of room around the entire article. And we'll set up a background-image, and instead of using an actual image, we're going to use a gradient. So -webkit-gradient. We'll use a linear gradient going from the left-top to the left-bottom, and it will go from, that's white, to that will be like a gray.
So you can see this gray gradient applies to the background. We'll go ahead and add a border to the whole article, and we'll just make it a solid border with just the colors. You can see a little bit of a gray border around the entire article. It gets applied right now. And then we will change the font. The font is an element that has a lot of different attributes. You can see there is font-family, font- size, and a font-weight are usually the styles that people use. There is a shortcut for all those. If you just use the font parameter here, you can specify a bunch of things at once.
So you could say I want it to be 16 pixels in size by--and use a line height of 20 pixels, and you can change the font to be something else. Now with fonts, you're really applying a font that you think is on the user's system. So whichever user is viewing this file needs to have this font, or they're not going to able to see the document that you have. Later on, we will deal with using custom fonts, so we can totally take care of fixing some of those issues that you have right now that I know that I had with just using really ugly fonts.
Well, Georgia is not that bad. Okay, let's re-style the links, because all the links are blue right now. So we'll change the links in the article. We'll do that through the anchor tag, redefining the anchor tag. So we'll change the color of those to something a little bit nicer, a medium blue, and then we will make them bold, and change the font-weight. So here we're using just the keyword for the weight, since that's the only thing we want to mess around with. All right, then we'll go into re-styling the heading tags. So article h1, and that will get rid of the margins. That's really typical. A lot of heading tags have a lot of margins at the beginning and at the end of it.
So just by reassigning it, we can control them later on if we need to. And then we'll apply different font here. We'll use bold 60 pixels over 43 pixels. Change the font to Eurostile, and if the user doesn't have Eurostile, we'll use Arial. Eurostile. So Eurostile is a Mac font. If somebody is on a PC, they will be able to see the font Arial. So you could specify different a font from whatever you choose at the beginning by just typing in a comma right here and putting in a different font.
And notice that if I add the word bold at the beginning, that also makes the text bold. So the font tag can be simple, just having these three elements here; it can be more complicated by adding additional elements. Now, let's see what else we can do with this. We'll add some custom padding underneath. So padding, a padding is another one of those that has text for each side or a tag for the entire thing. So in this case we'll do just a padding to the bottom of 10 pixels, just adding a little bit of room right here underneath the heading. Now, I like that font, but it's spread out, the tracking is a little bit too loose.
So we will use letter- spacing and set it to -1 pixels. So letter-spacing will be what you're used to using as tracking, and then we will change the font color to again be that medium blue. You can see you have a lot of typographic control. You can do letter-spacing, which is really cool for doing tracking, and change other things about your fonts, or other font elements. Let's do something with the paragraphs. So the paragraph tags are going to be restyled to have a text-indent of 15 pixels.
So this is something you might do to bring attention to the beginning of a paragraph, add a little bit of an indentation at the beginning of each paragraph. We do that through text-indent. Now we're going to change this quote right here. This quote is defined inside a blockquote element, so we're going to redefine the way that works. And we'll just change the margins a little bit. Now whenever you want to do margins, you can do the margins as a single number and that will do the margins all around in the same way, or you can specify each side and a series of numbers like this.
So this will be the top-left, top- right, bottom-right, and bottom-left. Okay, we'll change the color of this to a sort of a gray, and we'll change the background-color. I still want to set this background-color to a lighter gray, and I will give this thing a little -border-radius of 10 pixels. That just makes these edges round right here. We'll change the width of this element.
This is a blockquote, so I want to kind of pull it to this side, so a width of 160 pixels. That makes it a little bit shorter. And I want to float this to the right- hand side, so it moves over to the right. And I'm going to put some padding inside this, of 13 pixels, so now there is a little bit more room inside this element. And I am going to change the font here to something that looks a little more interesting.
You may have noticed--and this is something that you would do in typography-- when you're applying this quotation, the quotation moves this text over. So if I want to hang this quotation, I might do something like text-indent and set in a negative value, so this quotation is hanging out a little bit. Okay, I may want to adjust the letter- spacing and set it to -1 pixel, just to bring it in a little bit tighter. So we have quite a few things with this little blockquote. It's looking a little more interesting, and these are just the type of things that you would do if you were styling something for typography.
We've done a lot of different things here with CSS that we would do on a program like InDesign to control how the fonts and the style of the text looks on this page. We're going to continue to explore this in this chapter and see how CSS can help us make our documents look great.
- Building a basic HTML page structure
- Making HTML5 backwards compatible
- Working with opacity
- Building transitions with CSS
- Triggering transitions with gestures
- Animating with keyframes
- Using custom fonts
- Targeting devices and orientations
- Displaying images
- Playing and controlling audio
- Playing video
- Generating dynamic content
- Using geolocation