Adds OpenType features—ligatures, kerning, and more—to Normalize.css.

Related tags

CSS css typography
Overview

Note You might also like my more recent take on this project, Utility OpenType: CSS utility classes for advanced typographic features.


Normalize-OpenType.css wordmark


Normalize-OpenType.css

Adds OpenType features—ligatures, kerning, and more—to Normalize.css.

Read the blog post: Introducing Normalize-OpenType.css

Get the latest version of the CSS file

Or use

npm install normalize-opentype.css

Ligatures

First, normalize basic ligatures across browsers, and then get fancier, discretionary ligatures on <h1>, <h2>, and <h3>s.

An example of basic and discretionary ligatures.

Numerals

Different situations require different numerals, depending on the context. Normalize-OpenType.css takes care of this for you, so you don’t need to know what combination of Proportional, Lining, Tabular, and Old-Style numerals you need to use.

An example of old-style, proportional numerals.

An example of tabular, lining numerals.

Small Capitals

Regular capitals draw a lot of attention in body copy. With Normalize-OpenType.css, anything wrapped in <abbr> will use small capitals instead. This works especially well with Typogr.js and equivalents.

An example of small capitals.

Kerning

Kerning is turned on by default everywhere, and carefully turned off where it isn’t appropriate. A monospaced typeface’s application is ruined when automatic kerning is turned on. This is not the case with Normalize-OpenType.css; your code blocks have been preserved.

A kerning example.

…and more

There’s more optimisations included, so you don’t have to think about them: Lining, tabular numerals in code blocks, uppercase fallbacks for small capitals, and proper subscript and superscripts.

Getting started

Normalize-OpenType.css aims to be as easy to use as its namesake, Normalize.css. If it’s not that easy, please open an issue. Get the latest version of the CSS file here:

Get the latest version of the CSS file

Alternatively, use the package manager and build tool of your choice:

With npm

npm install normalize-opentype.css

With Component

component install kennethormandy/normalize-opentype.css

With bower

bower install normalize-opentype.css

Include

Though technically Normalize-OpenType.css is not dependent on Normalize.css, the intent expectation is that the former would not be used without the latter. If you’re dropping in stylesheets:

<link src="css/normalize.css" rel="stylesheet" />
<link src="css/normalize-opentype.css" rel="stylesheet" />

If you’re using a preprocessor through something like Harp, you can import the files instead.

@import "normalize";
@import "normalize-opentype";

Caveats

This library does the best it can with what it has. In order to use any of these optimisations, they must also be available in the font you are using.

I’m working on some blog posts and documentation about this, and will be sending them out via email if you’re interested.

There’s also a bug in Open Sans on Windows 7, with IE10 and 11, that’s caused by font-feature-settings, which this stylesheet uses heavily. We’re keeping an eye on it.

Running locally

If you’d like to see the test suite, or just want to view things locally, use the following:

git clone https://github.com/kennethormandy/normalize-opentype.css
cd normalize-opentype.css
npm install

To view the tests:

npm test

To compile any changes:

npm build

Contributing

Thanks for considering contributing! There’s information about how to get started with normalize-opentype here.

If you’re new to all this GitHub, Open Source, JavaScript, Node.js, testing, wow all this stuff seems really difficult I just want to make my sites better stuff, I get it. I’m still there, too. Feel free to send me an email or open an issue here and I’ll do my best to share some resources that have helped me out.

Colophon

Normalize-OpenType.css’ wordmark, examples, and some tests set in the Klinic Slab, designed by Joe Prince. The manicules were designed by Cade Cran for Dan Gneiding’s Dude Hank Pro. Both are available through the wonderful Lost Type Co-op.

Additional tests use Fira from Mozilla, and Source Code Pro from Adobe.

License

The MIT License (MIT)

Copyright © 2014–2015 Kenneth Ormandy

Comments
  • @extend body; in table produces undesired results

    @extend body; in table produces undesired results

    In the code there is:

    /**
     * 1. Resets tables to the same settings as the body.
     * 2. Turns on tabular, lining numerals and slashed zero
     */
    
    table {
      @extend body; /* 1.*/
    }
    

    However, this can have unfortunate results depending on the styles you have applied to body. For example, the site I'm currently working on has a dark background colour applied to body, which is subsequently being applied to all tables.

    It took me ages to figure out why my tables were 'inheriting' the dark background colour - it was only by disabling some of my imports that I was able to narrow it down to normalize-opentype, and then to this specific line of code.

    I can, of course, get round this by overriding the background colour on tables, but I wondered what your thoughts are on this? Isn't this @extend a bit 'far reaching'?

    bug 
    opened by matt-bailey 4
  • Property not being applied in FF, Chrome and Chrome Canary

    Property not being applied in FF, Chrome and Chrome Canary

    I am using the normalize-opentype.scss file, importing it into my main sheet.

    We are using TypeKit and the Scala Sans font.

    In current versions of FF and Chrome (Mac) as well as current Chrome Canary (Mac), the font-feature-settings property are labelled as Unknown Property Name (in Chrome Canary) in Chrome Dev Tools and is just not listed at all in FireBug in FF (elements are listed - h1, h2 etc, but the rule is empty).

    I cannot post a link at this time. If it is necessary, I can make a demo page.

    opened by tomliv 4
  • Typo

    Typo "numer" for "number"

    In normalize-opentype.css, on line 94 input[type="numer"] should be input[type="number"]. I was going to do a pull request, but wasn't sure if it was worth figuring out SUIT CSS for a one-character change. :)

    bug 
    opened by briankoser 3
  • might be problem: font-feature-settings with Open Sans webfont in Win7 IE 10/11 no text problem

    might be problem: font-feature-settings with Open Sans webfont in Win7 IE 10/11 no text problem

    Sorry I did not check yet if your "lib" will trigger this problem too but I guess it does.

    Original ticket at Microsoft is here: https://connect.microsoft.com/IE/feedback/details/831964/font-feature-settings-with-open-sans-webfont-in-win7-ie-10-11-no-text-problem

    It only occured for "Open Sans" for me but there may be other font that trigger this which basically destroys the page completely, somehow in IE10/Win7 only.

    So this may not be a problem your code should prevent but maybe a note on the front page to look out for this possible problem would make sense.

    opened by cthedot 3
  • text-rendering: optimizeLegibility is broken on Android 2.3

    text-rendering: optimizeLegibility is broken on Android 2.3

    Not that this is necessarily the biggest concern but this property actively breaks text rendering on Android 2.3 and lower. You end up with what looks like a lot of broken Unicode characters on screen or just missing text.

    Some links:

    • https://code.google.com/p/android/issues/detail?id=15067
    • http://stackoverflow.com/search?q=%5Bandroid%5D+optimizelegibility
    • https://twitter.com/jasonsantamaria/status/453589484765212672
    opened by kpeatt 3
  • Any plans to get this upstream to 'necolas/normalize.css' ?

    Any plans to get this upstream to 'necolas/normalize.css' ?

    Hello,

    Great work, Do you have any plans (or discussions) to get some (or all) of your changes as part of the upstream 'normalize' project ? It makes sense doesn't it ?

    Thanks for the nice defaults.

    question 
    opened by iemejia 2
  • npm package

    npm package

    Please register an actual npm-package (npm publish). normalize-opentype name is free to register. It’s far more convenient in npm to use npm repo that github.

    enhancement 
    opened by dy 2
  • Improve visibility to actual CSS file

    Improve visibility to actual CSS file

    The Normalize.css website simply has a big download button, and the package manager install lines. This project should have those things presented that simply as well, either in the repo or elsewhere.

    enhancement 
    opened by kennethormandy 2
  • Fixes a typo in the Suit test style block

    Fixes a typo in the Suit test style block

    Fix feautre typo in test style block

    Status: Opened for visibility Reviewers: @kennethormandy

    Changes

    • Change all instances of feautre with feature in the test style block. Seems like this was a typo generated through some copy-pasting when creating the -webkit- prefix. (Great argument for Autoprefixer)
    opened by kpeatt 2
  • Stop using tracking for ligature tests

    Stop using tracking for ligature tests

    Chrome now does the correcting thing for tracked out text with ligatures turned on, which is great, but that’s how I was making ligatures obvious in the test suite. This will have to be changed.

    Example test case

    bug 
    opened by kennethormandy 0
  • Muddles text selection in Chrome on OS X

    Muddles text selection in Chrome on OS X

    font-feature-settings breaks text selection in any capacity but normal in Chrome on OS X. The fix is to inherit text-shadow or color within ::selection

    http://robsterlini.co.uk/journal/opentype-and-selection-dont-mix

    bug enhancement 
    opened by kennethormandy 0
  • Is `text-rendering: optimizeLegibility` still seen as problematic?

    Is `text-rendering: optimizeLegibility` still seen as problematic?

    After #2 has been fixed more than 2.5 years ago and Android 2.3 shouldn't be of any concern any more, I wonder if text-rendering: optimizeLegibility shouldn't be the included for Gecko/Blink/Webkit browsers and the font-feature properties for ~5% market share of Microsoft browsers?

    opened by Volker-E 0
  • Add `main` and `style` properties to `package.json`

    Add `main` and `style` properties to `package.json`

    This is helpful if you want to import npm packages (like this one) in CSS/SASS/Less without having to specify the full path to the node_modules folder (http://stackoverflow.com/questions/32037150/style-field-in-package-json).

    The sass-module-importer and many other modules are also checking the package.json file for a main or style property.

    opened by mrksbnch 1
  • font-variant

    font-variant

    Hi!

    I found your project today and I'm reading it.It looks really cool! And useful! Congratulations. While studying it, I found this:

    Whenever possible, Web authors should use the font-variant shorthand property or an associated longhand property, font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.

    For now, the values accept by browsrs other than Firefox are:

    • normal
    • small-caps
    • inherit

    I think you can leave this issue opened until the right moment comes.

    Thanks!

    opened by robsonsobral 2
  • Are you planning to write more code?

    Are you planning to write more code?

    If you can find some time to get rid of all TODOs in the stylesheet, that will be so awesome :shipit: :blush: Let me know if you need any help.

    Thanks a lot for this cool project :+1:

    question 
    opened by iamskok 3
  • Poor performance when there are a large number of text nodes (in Chrome OS X)

    Poor performance when there are a large number of text nodes (in Chrome OS X)

    This is more of an FYI for your reference rather than a bug because I believe the issue is with Chrome itself (OS X only - Windows and Linux seem fine, as are FireFox, Safari and IE).

    I've noticed if you have a very long page with a lot of text nodes there is a definite lag before users are able to interact with the page, i.e. before they're able to scroll, or click. You can see the page and the contents, and it's styled, but you can't do anything.

    This site uses normalize-opentype and all but one of the pages are fine - we had to remove it from this page due to the performance issue mentioned above. I don't have a working example of the problem unfortunately (as I said before, I removed normalize-opentype from the page we were having problems with).

    Let me know if you've come across this before and if you have any thoughts on it. Maybe if I have some spare time I'll set up a test page to see if I can replicate the problem. Of course it's very likely that new versions of Chrome on OS X will fix it...

    opened by matt-bailey 0
Releases(v0.2.1)
  • v0.2.1(Nov 11, 2014)

    This release improves the default OpenType feature settings for tables. To learn more about the Normalize-OpenType.css, read about the project’s default OpenType features.

    normalize-opentype-css-v0-2-1

    • Reduces redundant CSS for styling tables (Thanks @rastus-vernon, closes #20)
    • Restores kerning to tbody, this won’t negatively impact tabular numerals like originally though
    Source code(tar.gz)
    Source code(zip)
  • v0.2.0(Sep 18, 2014)

    This release adds support for Contextual Alternates.

    The OpenType specification requires them to be on by default, but (like with other features Normalize-OpenType.css covers) not every browser respects this.

    normalize-opentype-css-calt

    Now, Contextual Alternates will be on by default. This can be especially important for script faces, like Lavanderia.

    Source code(tar.gz)
    Source code(zip)
  • v0.1.4(Sep 18, 2014)

    This release contains the following bug fixes:

    • Prevents a custom text selection and OpenType features bug in Chrome #12
    • Stops using letter-spacing for tests #17
    Source code(tar.gz)
    Source code(zip)
  • v0.1.3(Sep 18, 2014)

Owner
Kenneth Ormandy
Typographic developer & type designer
Kenneth Ormandy
Reseter.css - A Futuristic CSS Reset / CSS Normalizer

Reseter.css A CSS Reset/Normalizer Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all

Krish Dev DB 1.1k Jan 2, 2023
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023
micro-library for CSS Flexbox and CSS Grid

SpeedGrid micro-library for CSS Flexbox and CSS Grid Overview SpeedGrid dynamically generates inline CSS by specifying the class name. Easy maintenanc

Toshihide Miyake 7 Mar 26, 2022
Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

null 96 Dec 10, 2022
Low-level CSS Toolkit – the original Functional/Utility/Atomic CSS library

Basscss Low-level CSS toolkit – the original Functional CSS library https://basscss.com Lightning-Fast Modular CSS with No Side Effects Basscss is a l

Basscss 5.8k Dec 31, 2022
CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors

Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo

FrontAid CMS 104 Dec 8, 2022
Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

null 210 Dec 13, 2022
Easily create css variables without the need for a css file!

Tailwind CSS Variables This plugin allows you to configure CSS variables in the tailwind.config.js Similar to the tailwindcss configurations you are u

Mert Aşan 111 Dec 22, 2022
Cooltipz.css - A highly customisable, minimal, pure CSS tooltip library

Cooltipz.css - Cool tooltips Cool customisable tooltips made from pure CSS Lightweight • Accessible • Customisable • Simple Cooltipz.css is a pure CSS

Jack Domleo 110 Dec 24, 2022
Data-tip.css - Wow, such tooltip, with pure css!

Notice: hint.css has been much better since I complained about it months ago, so try out its new features instead of this one! data-tip.css Wow, such

EGOIST 117 May 26, 2021
Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.

This is the main branch of the repo, which contains the latest stable release. For the ongoing development, see the develop branch. Halfmoon Front-end

Tahmid (Halfmoon UI) 2.8k Dec 26, 2022
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Bootstrap 161k Jan 1, 2023
Easily create and maintain style guides using CSS comments

mdcss lets you easily create and maintain style guides with CSS comments using Markdown. /*--- title: Buttons section: Base CSS --- Button styles c

Jonathan Neal 679 Oct 4, 2022
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ?? Looking for v5? The master branch is un

styled-components 38k Dec 31, 2022
RxHtmlButtonLibrary - Html Button Styling Library by roxunlimited.com using CSS and jQuery.

rxHTMLButton Library v0.3 rxHTMLButton Library will work on almost every HTML tag. It will smoothly work on 'a href link', 'button type button', 'inpu

roxunlimited 0 Sep 16, 2022
A pure html and css library for dark mode in your website.

Dark Mode A pure html and css library for dark mode in your website. Features It has a smooth setting and also it changes via system settings aswell.

null 1 Jan 6, 2022
A CSS button library built using Sass and Compass

Buttons 2.0 Buttons 2.0 Buttons is a highly customizable production ready mobile web and desktop css button library. Buttons is a free open source pro

Alex Wolfe 5.1k Jan 4, 2023