Normalize-Opentype.css - Adds OpenType features—ligatures, kerning, and more—to Normalize.css.
A CSS extension that adds OpenType typographic features—ligatures, kerning, numerals, and small capitals—to Normalize.css.
What is Normalize-Opentype.css - Adds OpenType features—ligatures, kerning, and more—to Normalize.css.?
Normalize-OpenType.css is a CSS extension that builds on Normalize.css to add cross-browser support for advanced OpenType typographic features. It solves the problem of inconsistent and complex implementation of ligatures, kerning, numeral styles, and small capitals across different browsers, providing sensible defaults that work automatically.
Frontend developers and designers who want to implement sophisticated typography on the web without manually managing CSS font-feature-settings for each element.
Developers choose it because it integrates seamlessly with Normalize.css, offers carefully researched defaults that handle edge cases (like preserving monospaced fonts), and reduces the need for custom CSS to achieve professional typography.
Overview
Adds OpenType features—ligatures, kerning, and more—to Normalize.css.
Use Cases
Best For
- Improving typographic consistency across browsers
- Adding advanced ligatures and kerning to headings and body text
- Implementing context-appropriate numeral styles automatically
- Using small capitals for abbreviations without custom CSS
- Preserving monospaced fonts in code blocks while enabling kerning elsewhere
- Extending Normalize.css with typographic enhancements
Not Ideal For
- Projects using fonts that lack OpenType feature support
- Developers needing granular, per-element control over all typographic settings
- Applications targeting Internet Explorer 10 or 11 with specific fonts like Open Sans
- Teams already using a comprehensive CSS framework with built-in typography rules
Pros & Cons
Pros
Normalizes ligatures, kerning, and numeral styles across browsers, as evidenced by examples showing discretionary ligatures on headings and proper kerning defaults.
Works effortlessly with Normalize.css and can be installed via npm or included directly, making it easy to add to existing projects.
Applies context-aware settings, such as small capitals for <abbr> elements and appropriate numeral styles, reducing the need for manual CSS configuration.
Preserves monospaced fonts in code blocks by disabling kerning there, ensuring code readability isn't compromised, as mentioned in the kerning section.
Cons
The stylesheet only works if the underlying font supports OpenType features; otherwise, it has no effect, limiting its utility with basic web fonts.
There's a known bug with Open Sans on Windows 7 in IE10 and 11 caused by font-feature-settings, which can break typography, as noted in the caveats.
As a default stylesheet, it may not suit all design needs, requiring developers to override styles for specific typographic preferences.
Frequently Asked Questions
Related Projects
NormalizeA modern alternative to CSS resets
Sanitize.cssA best-practices CSS foundation
BrickOpen-source webfont service
MiniReset.cssA tiny modern CSS reset
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.