CSS-Font-Weight

A utility to convert font weight names into number values

Acceptable values include:
    EXTRABOLD, Extra Bold, extra bold, extra-bold, extra_bold

Installation

Local

npm install @ibnlanre/css-weight

API

Script tags

<script src="./node_modules/@ibnlanre/weight.js" type="module"></script>

ES6

import cssWeight from "./node_modules/@ibnlanre/weight.js"
import { openType } from cssWeight
import { weights } from cssWeight

CommonJS

const cssWeight = require("@ibnlanre/css-weight");
const openType = cssWeight.openType;

Reference

openType[300] //-> [ 'Light' ]
cssWeight.weights[350] //-> [ 'Book', 'Demi' ]

Single Arguments

cssWeight(""); //-> "missing query"
cssWeight({ MDN: true }); //-> "query must be a string"
cssWeight("--=HAIR9876LINE Condensed");
//-> { style: 'normal', weight: 200, stretch: 'condensed' }
cssWeight("Italic Book", { MDN: true });
//-> { style: 'italic', weight: 'normal', stretch: 'normal' }

Multiple Arguments

cssWeight("Oblique Poster, Semi_Expanded Demi");
// returns
// [
//   { style: 'oblique', weight: 999, stretch: 'normal' },
//   { style: 'normal', weight: 350, stretch: 'semi-expanded' }
// ]

Default Weights

Value	Description
100	UltraThin
150	ExtraThin
200	Thin, Hairline, UltraLight
250	ExtraLite, ExtraLight
300	Lite, Light
350	Book, Demi
375	Text
400	Normal, Regular
425	Thick
450	Extra Thick
500	Dark, Medium
550	ExtraDark, Semibold, Demibold
600	Bold
650	ExtraBold
700	UltraBold
800	Black
900	ExtraBlack, Heavy
999	UltraBlack, Fat, Poster

OpenType Weights

To use the font weight definition in the OpenType specification, which is the same shown on MDN, use the option { MDN: true }

Value	Description
100	Thin
200	ExtraLight, UltraLight
300	Light
400	Normal, Regular
500	Dark, Medium
600	DemiBold, SemiBold
700	Bold
800	ExtraBold, UltraBold
900	Black, Heavy
950	ExtraBlack, UltraBlack

References

• MDN
• Microsoft
• HTMLDog
• Lukasz Grolik

Acknowledgements

CSS-Font-Weight was inspired by dan-gamble/postcss-font-weight-names