Watching:

Working with pixels


show more Working with pixels provides you with in-depth training on Web. Taught by Joseph Lowery as part of the Typography with CSS in Dreamweaver show less
please wait ...

Working with pixels

The interest in using Pixels for Font Size Measurement has increased at exactly the pace as the use of Internet Explorer6 has decreased. The inability to scale pixels with IE6 was a showstopper for many designers who switched to using Ems. Now the relative dearth of IE6 users has prompted web designers to take a second look at Pixels. Most notably for their ease-of-use and faithful reproduction across browsers. Let's do some work with Text and Pixels, starting with the index.html file, from Chapter 2 > 02_02 folder.

I'm here in live view, though we're going to be working primarily with the CSS Styles panel, and I have that set in Current mode. I'm going to go ahead and, first try and set the overall Text size. So to do that, I'm going to go the body tag, and choose that from the tag selector here. So over in the CSS Styles panel, you can see what properties are already defined, and I'll go ahead and choose the pencil icon so I can open up the CSS Rule Definition dialog box, and make some edits.

Let's change the Font-Size here to 14 pixels, and notice that pixels is the first option that we have here on the Measurement Unit list, and as for the Line-height, I'm going to double by 14, 28, and then click OK, and that gave us a more spaced out look for both of the main content on the left and the sidebar on the right. Let's differentiate the sidebar a little bit, by changing its Line-height and keeping the the same size.

So I'll put my cursor into the sidebar, and then over on the CSS Styles panel, choose the right side ID, because I'm just changing the Line-height, I'm going to go ahead and add that in as a property, line-height, and we'll make that 21; now you want to make sure that you press tab, and choose px, because the default for Line-height is to do a multiple.

So now I have a slightly different look for my sidebar. Naturally if you're following a previously designed comp, you'd pick up the pixel measurements right from there, but I find that when Designing on the fly, following a simple multiple for the Line -height value, like twice or one and a half times the font size, yields a clean and highly readable look.

Working with pixels
Video duration: 2m 34s 2h 30m Intermediate

Viewers:

Working with pixels provides you with in-depth training on Web. Taught by Joseph Lowery as part of the Typography with CSS in Dreamweaver

Subject:
Web
Software:
Dreamweaver
Author:
please wait ...