Join Joseph Lowery for an in-depth discussion in this video Exploring font variants, part of Typography with CSS in Dreamweaver.
- View Offline
- Exercise Files
When you'd like your heading to really stand out, one nice option is to use a…small-caps font like Copperplate.…As you can see, with a small-caps font, all the lowercase letters are smaller…versions of the uppercase ones.…Copperplate and other small-caps fonts are great for print, but are not common…enough across computer platforms to be considered web-safe.…So unless you use a licensed web font, there is no way to get small-caps on your…web site, unless you use the CSS property Font-variant.…
Let's put it to work.…So back in Dreamweaver, I have the tours.htm file from the Chapter 5 > 05_03 folder open.…I'm in Design View.…Let's go down to the Tour Descriptions and select the h2 tag that we see here.…You'll see it display in the CSS Styles, because I have the Current mode on.…Now, let's choose Edit Rule, and make sure that you're in the Type category.…
Then take a look at the Font-variant property.…If you bring down the list, you'll see that besides normal, the other option is small-caps.…So if we choose that, now I just want to show you something.…
- 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
Skill Level Intermediate
Creative Inspirations: Doyald Young, Logotype Designerwith Doyald Young1h 41m Appropriate for all
1. Modifying Type in Dreamweaver
2. Establishing the Proper Type Unit
Working with pixels2m 34s
3. Choosing Site Typefaces
4. Integrating Color
Applying color to type4m 52s
5. Selecting Type Styles
6. Using Advanced CSS Text Effects
7. Structuring CSS Text
8. Defining Lists with HTML and CSS
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.