For truly refined UI typography, don't overlook CSS font-feature-settings. It empowers you to tap into advanced OpenType features like standard ligatures ('liga', 'clig'), stylistic sets ('ss01'), small caps ('smcp'), and old-style figures ('onum') directly in your web fonts, dramatically improving readability and visual appeal for a superior user experience. Always test cross-browser, as feature support depends on both the font and the browser.
h1 {
font-family: "Playfair Display", serif; /* Example font supporting OpenType features */
font-size: 2.8em;
/* Enable discretionary ligatures ('dlig') and old-style numerals ('onum') */
font-feature-settings: "dlig" 1, "onum" 1;
}
p {
font-family: "Merriweather", serif;
line-height: 1.6;
/* Enable common ligatures ('liga') and small caps ('smcp') */
font-feature-settings: "liga" 1, "smcp" 1;
}
/* Important: Ensure your chosen web fonts actually include these OpenType features. */