New Perspectives On Web Design

By Marko Dugonjić CHAPTER 9

On smaller screens there are only a few elements on the screen at the same
time and the signal-to-noise ratio is far better. A 36px subhead that looks
good on a desktop monitor, might be slightly over the top on a smartphone.
So, meet style variations.
Instead of progressively in-
creasing the font size for each
heading level, we can use ital-
ics, small caps and all caps at
the same letter size to establish
text hierarchy. Add bolds into
the mix, and we have a palette of at least six styles.
While all caps and italics are styled easily with CSS, small caps are rela-
tively new in Web design. Web fonts contain small caps subsets less often
than not. In essence, there are three alternatives to applying small caps:

1. Apply the CSS3 OpenType feature rule.


2. Load a separate small caps font file.


3. Create faux small caps.

.subhead-1 {
-moz-font-feature-settings: "smcp";
-ms-font-feature-settings: "smcp";
-webkit-font-feature-settings: "smcp";
-o-font-feature-settings: "smcp";
font-feature-settings: "smcp";
text-transform: lowercase;
}

(^) .subhead-2 {
font-family: small-caps-typeface;
text-transform: lowercase;
}
.subhead-3 {
font-weight: 500;
font-size: 80%;
text-transform: uppercase;
letter-spacing: .125em;
}
Six distinctive styles with font style variations