Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
10. Formatting Text with Styles > Using Small Caps
Using Small Caps
Many fonts have a corresponding small caps variant that includes uppercase versions of the letters proportionately reduced to small caps size. You can invoke the small caps variant with the font-variant property .
I’ve changed h2 to small-caps and have also taken the opportunity to bump up the font size a bit so it’s in better proportion to the h1
. Don’t forget the hyphen in both font-variant and small-caps.
body {
background: #eef;
color: #909;
font: 100% "Palatino Linotype", Palatino, serif;
}
h1,
h2 {
color: navy;
font: 1.375em "Arial Black", Arial, sans-serif;
letter-spacing: .4em;
text-align: center;
}
h1 {
text-transform: uppercase;
}
h2 {
font-size: 1.15em;
font-variant: small-caps;
}
... [rest of CSS] ...