Working with pixels
Video: Working with pixelsWorking with pixels provides you with in-depth training on Web. Taught by Joseph Lowery as part of the Typography with CSS in Dreamweaver
- Next steps
Viewers: in countries Watching now:
Working with pixels provides you with in-depth training on Web. Taught by Joseph Lowery as part of the Typography with CSS in Dreamweaver
Dive deep into key typographic concepts and learn how to manipulate type in Dreamweaver. Author Joseph Lowery introduces Dreamweaver type tools and shows how to perform basic text modifications, establish the appropriate type unit, integrate custom web fonts, and apply drop shadows, gradients, and other effects. The course also provides in-depth tutorials on structuring text with headings, paragraphs, columns, and lists, and offers a preview of Adobe's proposed CSS Regions.
- Modifying type in the CSS Styles panel
- Understanding the different type measurement unit options
- Allowing users to set page type size
- Employing web-safe fonts
- Exploring CSS 3 typeface options
- Setting up @font-face
- Applying color and transparency to type
- Styling the font weight, case, and letter spacing
- Inserting drop caps
- Rotating text with CSS transform
- Laying out text in multiple columns
- Incorporating ordered and unordered lists
- Targeting lists items with the nth-child selector
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.
There are currently no FAQs about Typography with CSS in Dreamweaver.