Font Feature Settings

Explain layout features, etc. that are useful for subsetting.
☐ #todo --- Are “Berkeley Mono” font-feature-settings accurate???
☐ #todo --- Monarcha (Monarcha-Book) font-feature-settings
Almanac of OpenType Features: https://sparanoid.com/lab/opentype-features/
Check what Opentype Font Features a typeface supports: https://wakamaifondue.com/
- Beta: https://wakamaifondue.com/beta

CSS Template

--appleFontStack: system-ui, -apple-system, BlinkMacSystemFont,"Helvetica Neue", "Apple Color Emoji";

--userMonoFont: "Berkeley Mono", "MonoLisa", "MonoLisa Nerd Font Mono", ui-monospace, Menlo, monospace, var(--appleFontStack);

--monoFFS: "zero", "calt", "liga", "ccmp", "locl", "mark", "mkmk", "kern";

--userTextFont: "Universal Sans", ui-sans-serif, sans-serif, var(--appleFontStack);

--textFFS: "ss09", "ss11", "ss14", "cv10", "cv13", "pnum", "zero", "calt", "kern", "locl";

--userHeading: "Universal Sans Display", "SF Pro Rounded", ui-sans-serif, sans-serif, var(--appleFontStack);

--headingFFS: "ss09", "ss11", "ss14", "cv10", "cv13", "pnum", "zero", "calt", "kern", "locl";

--userSerifFont: "Monarcha", ui-serif, serif, var(--appleFontStack);

--serifFFS: "liga", "kern";

Individual Fonts

Monospace

Cartograph CF

font-feature-settings: 'ss01', 'ss03', 'ss05', 'ss06', 'liga', 'kern';

aalt
calt
case
ccmp
dnom
frac
liga
locl
numr
ordn
salt
ss01
ss02
ss03
ss04
ss05
ss06
sups
vert
vrt2
cpsp
kern
mark
mkmk

Ellograph CF

font-feature-settings: 'ss01', 'ss02', 'liga', 'kern';

Opentype font feature settings for monospace (ellograph-cf)
- ss01
  - with ss01 turned on: y
  - with ss01 turned off: y
- ss02 --- alternate C, G, O, W:
  - with ss02 turned on: C G O W
  - with ss02 turned off: C G O W
- cpsp : capital spacing
- liga: ligatures
- Screenshot:
aalt
ccmp
dnom
frac
liga
locl
numr
ordn
ss01
ss02
ss03
ss04
sups
cpsp
kern
mark
mkmk

Geist Mono

[!info]- Geist Mono --- Wakamaifondue *

ccmp
locl
mark
aalt
frac
fwid → Full-width for CJK
liga
ordn
sinf
ss01 : a without serif (better)
ss02: single storied a
ss03: l with bottom right serif
ss04: Straight lined R
ss06: minimal capital G
ss07: smaller arrowhead for ↑ ↗ → ↘ ↓ ↙ ← ↖
ss08: diacritics spacing
ss09: zero
subs
sups

font-feature-settings: "'ss01' on, 'ss03' on, 'ss04' on, 'ss09' on, 'liga' on";

Input Mono

font-feature-settings: 'ss01', 'ss02', 'ss09', 'ss10', 'ss11', 'ss12', 'zero';

ss01: alternate (single-story) a
ss02: g (single story)
ss03: i (without the bottom line)
ss04: l (without the bottom line)
ss05: only right bottom line --- i
ss06: only right bottom line --- l
ss09: alternate i (curved bottom right line)
ss10: alternate l (curved bottom right line)
ss11: middle *
ss12: alternate {}
ss13: no dot in 0
ss20: *, /, ≤, ≤ symbols
frac
zero
numr
dnom
sinf
sups

`Monaspace` by GitHub

font-feature-settings: 'calt', 'ss06', 'ss07', 'ss08';

Neon, Xenon and Radon are great for use in daily.
Stylistically useful: Krypton
calt: texture healing and a few positional changes (none that could obfuscate the understanding of characters)
ss06: ## and ### will be merged (but each # still distinct)
ss07 --- same thing ***, /*, */ /*/ (*, *), (*)) some characters are positionally corrected
ss08 --- .=, .-, ..< positions are corrected. (in the middle)

JetBrains Mono

font-feature-settings: 'cv03', 'cv07', 'cv08', 'cv11', 'cv12', 'cv17', 'cv18', 'cv20', 'cv99', 'calt';

MonoLisa

font-feature-settings: "ss03", "zero", "calt", "liga", "ccmp", "locl", "mark",
  "mkmk", "kern";
font-kerning: normal;

aalt
calt
case
ccmp
dnom
frac
liga
locl
numr
onum
ordn
salt
sinf
ss01
ss03
ss04
ss05
ss06
subs
sups
zero
mark
mkmk
Required: ccmp, locl, mark, mkmk
Turned on by default: calt, liga
ss03:
zero
calt
liga

IntelOne Mono

Required: ccmp, locl, mark

FiraCode / FiraMono

font-feature-settings: "ccmp" on, "locl" on, "mark" on, "mkmk" on, "calt" on, "liga"
    on, "dlig" on, "ss03" on, "cv31" on, "onum" on, "kern" on;

Explanation

Defaults: "ccmp" on,"locl" on,"mark" on,"mkmk" on, "kern" on

ccmp: Glyph Composition
locl: Localized Forms
mark: Mark Positioning
mkmk: Mark to Mark Positioning
kern: Kerning

User Enabled: "calt" on, "ss03" on, "cv31" on, "onum" on

calt: contextual alternates
liga: ligatures
dlig: discretionary ligatures
ss03: variation of ampersand (&)
cv31: rounded parenthesis
onum: oldstyle figures

Notes: not needed --- cv11(slashed zero) Zero is already slashed in calt (contextual alternates)

Martian Mono

::TODO::

☐ Add all the available font-features of this font in a list

font-feature-settings: "rlig" on, "ccmp" on, "mark" on, "cv01" on, "cv02" on, "calt"
    on;

Source Code Pro

font-feature-settings: "size", "cv17", "zero", "ccmp", "locl", "mark", "mkmk";

Twilio Sans Mono

ss05 is for zero character variant

font-feature-settings: "ss05", "calt", "locl";

Serif

Loretta

font-feature-settings: 'liga', 'kern';

aalt
case
ccmp
dnom
frac
liga
lnum
locl
numr
onum
ordn
sinf
subs
sups
kern
mark
mkmk

VC Garamond Condensed

css VC Garamond Condensed font-feature-settings: 'ss01', 'ss02', 'ss04', 'lnum', 'onum', 'liga', 'case', 'kern';

ss01: alternate f
ss02: alternate k
ss04: alternate pound sign £
lnum: lining figures
onum: OldStyle Figures
liga: Standard Ligatures
case: Case-sensitive forms
kern: Kerning

Exchange MP

/* this typeface has small capitals smcp 🫨; ss02 may be replaced with ss01 */
font-feature-settings: 'liga', 'ss02', 'tnum', 'ccmp', 'locl', 'mark';

ccmp
locl
mark
aalt
c2sc
case
dnom
frac
liga
numr
salt
sinf
smcp
ss01
ss02
ss03
subs
sups
tnum
kern

[!info]- PDF Specimen

Parclo Serif

Body Text:

font-feature-settings: "onum", "zero", "calt", "liga", "dlig", "kern", "ccmp",
  "locl", "mark", "mkmk";

Headings:

font-feature-settings: "ss01", "case", "onum", "zero", "calt", "liga", "dlig",
  "kern", "ccmp", "locl", "mark", "mkmk";

Quotes / Blockquotes:

font-feature-settings: "ss03", "onum", "zero", "calt", "liga", "dlig", "kern",
  "ccmp", "locl", "mark", "mkmk";

ss01 --- filled circle figures
ss02 --- circled figures (hollow / un-filled)
ss03 --- decorative quotes
frac
lnum
onum
ordn
pnum
tnum
zero
numr
calt
dlig
liga
case
dnom
sinf
subs
sups
kern

Sans-Serif

Elza Text

font-feature-settings: 'liga','zero','ccmp', 'locl', 'mark', 'mkmk', 'kern';

Layout features

aalt
c2sc
case
ccmp
dnom
frac
liga
lnum
locl
numr
onum
ordn
pnum
salt
sinf
smcp
ss01
ss02
ss03
subs
sups
tnum
zero
cpsp
kern
mark
mkmk

Whirly Birdie

font-feature-settings: 'aalt', 'liga', 'pnum', 'salt', 'ss01', 'ss02', 'ss03', 'ss04', 'tnum', 'kern', 'mark', 'mkmk';

Variations:

wght
wdth
ital

Stylistic sets:

salt: alternate R
ss01: alternate R
ss02: alternate H (the middle bar in the H is at the bottom)
ss03: alternate M
ss04: alternate S
kern: Kerning on

Instrument Sans

font-feature-settings: 'ss03' on, 'ss04' on,'ss05' on, 'ss07' on, 'ss11' on, 'liga' on, 'kern' on;

Stylistic Sets:

Example	Set Name	Description
	`SS01`	Round punctuation, tittles, and diacritics
	`SS02`	Alternate “a” with single-story constructions
	`SS03`	Alternate “y” with a rounded descender
	`SS04`	Alternate “K” with a crossed arm and leg
	`SS05`	Alternate “R” with a straight leg
	`SS06`	Alternate “M” with angled strokes
	`SS07`	Alternate “G” without the spur
	`SS08`	Alternate “J” with extended terminal
	`SS09`	Alternate “Q” with alternate tail
	`SS10`	Alternate “2” with alternate spine
	`SS11`	Alternate ”&” (‘Et’ style ampersand)
	`SS12`	Alternate ”$” and ”¢” with solid vertical stroke

Other features:

aalt - Access all alternatives
case - Case-sensitive punctuation
liga - Standard ligatures
pnum - Proportional Figures
tnum - Tabular Figures

Public Sans

font-feature-settings: 'lnum' on, 'onum' on, 'pnum' on, 'tnum' on, 'calt' on, 'liga' on, 'kern' on;

Schibsted Grotesk

Variation Settings:
- wght: 400:900
Feature Settings:
- aalt
- calt
- case
- ccmp
- dlig
- dnom
- frac
- liga
- locl
- numr
- ordn
- pnum
- sups
- tnum
- zero
- kern
- mark
- mkmk

font-feature-settings: 'pnum', 'tnum', 'zero', 'calt', 'dlig', 'liga', 'kern';

@font-face {
font-family: "Schibsted Grotesk";
src: local('Schibsted Grotesk');
font-weight: 420 900;
}

Adapter PE Text / Adapter PE Display Font Features

--textFFS: "zero" on, "calt" on, "liga" on, "kern" on, "pnum" on !important;
--headingFFS: "zero" on, "calt" on, "liga" on, "kern" on, "pnum" on !important;

zero: slashed zero
calt: contextual alternates
liga: ligatures
kern: kerning
pnum: proportional

Inter

--textFFS: "calt", "ccmp", "dlig", "ss02", "ss03", "cpsp", "ordn", "kern";

calt
tnum
frac
case
ccmp
numr
dnom
sups
subs
ss01 --- alternate 3, 4, 6 and 9
ss02 --- slashed zero, I, l, and ß
ss03 --- r into the next neighbor
zero
cv01 --- alt 1
cv02 --- alt 4
cv03 --- alt 6
cv04 --- alt 9
cv05 --- alt l ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽ
cv06 --- alt r ɽ ɍ ɼ ŕ ŗ ř ȑ ȓ ṙ ṛ ṝ ṟ
cv07 --- alt ß
cv08 --- alt I Ï Ḯ Ɨ Ḭ Ì Í Î Ĩ Ī Ĭ Į İ Ǐ Ȉ Ȋ Ỉ Ị Ι Ί Ϊ Ἰ Ἱ Ἲ
cv09 --- alt 3
cv10 --- alt G Ǥ Ɠ Ĝ Ğ Ġ Ģ Ǧ Ǵ Ḡ
cv11 --- alt a á ă ắ ặ ằ ẳ ẵ ǎ â ấ ậ ầ ẩ ẫ ȁ ä ǟ ȧ ạ ǡ à ả ȃ ā ą ẚ å ǻ ḁ ã
locl
salt
aalt
cpsp --- Capital Spacing
ordn
kern

Screenshot of features: Inter Font Features

SF Pro Rounded

font-feature-settings: "ccmp", "locl", "cv06", "cv08", "pnum", "calt", "liga",
  "kern";

c2sc
calt
case
ccmp
cv01
cv02
cv03
cv04
cv05
cv06
cv07
cv08
cv09
cv10
dnom
frac
liga
locl
numr
pnum
smcp
ss01
ss02
ss03
ss06
ss07
ss12
ss13
ss14
ss15
ss16
ss17
subs
sups
tnum
kern

Screenshots:

SF Pro Rounded

Graphik

font-feature-settings: "pnum", "ss05", "kern", "mkmk", "liga";

Tenon

font-feature-settings: "ss01", "pnum", "liga", "kern";

Uncut Sans

aalt, case, dnom, frac, liga, locl, numr, ordn, pnum, sinf, ss01, ss02, ss03, ss04, ss05, ss06, ss07, ss08, subs, sups, tnum, zero, kern
ss01 --- normal ‘R’
ss02 --- normal ‘Y’
ss03 --- long tail ‘Q’ and ‘ø’
ss04 --- small ‘a’
ss05 --- normal 1, and 4
ss06 --- normal !, ?
ss07 --- rounded punctuation ("")
ss08 --- normal arrows
liga --- ff, rf, rt, and tt
kern

font-feature-settings: "ss01", "ss02", "ss03", "ss05", "ss06", "ss07", "ss08", "liga", "kern", "locl", "pnum", "zero";

Universal Sans

calt, case, cv06, cv08, cv09, cv10, cv11, cv12, cv13, cv14, cv15, cv16, cv17, cv18, cv19, dnom, frac, locl, nalt, numr, ordn, pnum, sinf, ss01, ss03, ss04, ss05, ss06, ss07, ss08, ss09, ss10, ss11, ss12, ss14, ss15, ss17, ss19, ss20, subs, sups, tnum, zero, kern
variable font
- wght
- trml
- skew
- Roundness
- X-height
- prop
  
  ss09 --- alternate g
  
  ss11 --- ‘l’ that looks like an l
  
  ss14 --- altenate G
  
  cv10 --- alternate y
  
  cv13 --- alternate Q
  
  pnum --- proportional numbers
  
  zero --- slashed zero
  
  calt --- smiley (:))
  
  kern --- kerning
```
font-variation-settings: "wght" 400, "trml" 0, "skew" 0, "rnds" 50.22, "xhgt" 0, "prop" 100;
font-feature-settings: "ss09", "ss11", "ss14", "cv10", "cv13", "pnum", "zero", "calt", "kern", "locl";
```
font-feature-settings: for OpenType features.
font-variation-settings: for Variable Font settings.
- More information (toggle this accordion)
  - Both font-feature-settings and font-variation-settings are CSS properties that allow you to control the typography of text, but they apply to different types of font features.
    - font-feature-settings is used to control OpenType font features, which are advanced typographic features that are built into some fonts. OpenType features include things like ligatures, stylistic alternates, and small caps. The font-feature-settings property allows you to enable or disable these features for a specific piece of text.
    - Here is an example of how to use font-feature-settings to enable discretionary ligatures:
  - font-feature-settings: "dlig" 1;
    - In this code, the dlig feature is enabled with a value of 1, which means that discretionary ligatures will be used where available.
    - font-variation-settings, on the other hand, is used to control variable fonts, which are fonts that have adjustable weight, width, and other attributes. Variable fonts allow you to adjust the font size and other properties without having to load multiple font files. The font-variation-settings property allows you to adjust these properties for a specific piece of text.
  - Here is an example of how to use font-variation-settings to adjust the weight and width of a variable font:
    - font-variation-settings: "wght" 700, "wdth" 120;
      - In this code, the wght (weight) and wdth (width) axes are adjusted to values of 700 and 120, respectively, which will make the text heavier and wider.
  - ==In summary, font-feature-settings is used to control OpenType font features, while font-variation-settings is used to control variable font properties.==

Really Sans

font-feature-settings: "ss04", "ss05", "zero", "calt", "kern", "ccmp", "locl",
  "mark", "mkmk";

==Special characters in Really Sans:==
- ①
- ②
- ③
- ④
- ⑤
- ⑥
- ⑦
- ⑧
- ⑨
- ⓪
- ⓿
- ❛
- ❜
- ❝
- ❞
- ❶
- ❷
- ❸
- ❹
- ❺
- ❻
- ❼
- ❽
- ❾
- ⸘
- 
- 
- 
- 🡠
- 🡡
- 🡢
- 🡣
- 🡤
- 🡥
- 🡦
- 🡧
- 🡨
- 🡩
- 🡪
- 🡫
- 🡬
- 🡭
- 🡮
- 🡯

Font Feature Settings

CSS Template

Individual Fonts

Monospace

Cartograph CF

Ellograph CF

Geist Mono

Input Mono

Monaspace by GitHub

JetBrains Mono

MonoLisa

IntelOne Mono

FiraCode / FiraMono

Explanation

Martian Mono

Source Code Pro

Twilio Sans Mono

Serif

Loretta

VC Garamond Condensed

Exchange MP

Parclo Serif

Sans-Serif

Elza Text

Whirly Birdie

Instrument Sans

Public Sans

Schibsted Grotesk

Adapter PE Text / Adapter PE Display Font Features

Inter

SF Pro Rounded

Graphik

Tenon

Uncut Sans

Universal Sans

Really Sans

`Monaspace` by GitHub