CODEWITHSUNDEEP
csstypographyopentype
R Reveley
R Reveley

Reputation: 1584

Disabling ligatures and text figures in Open Type Font

I am using Raleway Webfont by Google for headings on our site but the Boss noticed the ligatures formed by 2 ffs and fi etc and also the text figures (numbers with ascenders and descenders) and thinks our biggest vendor might take issue with their name being written out with ligatures and text figures. I have tried turniong these off with the following CSS but with no luck.

http://codepen.io/rachelreveley/pen/WxQPYQ

CSS I have tried

h1 {font-family: Raleway; font-size: 4rem;

  text-rendering: optimizeSpeed;
  font-feature-settings: unset;
  font-variant: normal;
}

Upvotes: 0

Views: 589

Answers (1)

Nitesh
Nitesh

Reputation: 15769

You need to use letter-spacing to 1px to achieve what you are looking for.

For instance, as per your code,

h1 {font-family: Raleway; font-size: 4rem;
    letter-spacing: 1px;
    text-rendering: optimizeSpeed;
    font-feature-settings: unset;
    font-variant: normal;
    }

Live demo

You can also check the Comparative demo here

For numeric figures, as mentioned by the OP, you can use font-feature-settings with the value lnum along with font-variant-numeric with the value normal.

For instance,

h1 {font-family: Raleway; font-size: 4rem; letter-spacing: 1px;

  text-rendering: optimizeSpeed;
  font-feature-settings: unset;
  font-variant: normal;
  font-variant-numeric: normal;
  font-feature-settings: 'lnum';

}

Comparative Live demo - For numeric figures

You can read more about the same on the below W3 guidelines.

W3 guidelines on font-variant-numeric

Upvotes: 1

Related Questions