Marias Type Sytem

Technical guide

how to use marias typography

|1
Marias Type System’s Technical Guide

03 Marias Type System How to enable Discretionary Ligatures

Marias Type Family How to enable Contextual Alternates
05 Character Set How to switch Figure Styles
Marias Text How to switch Figure Position
Marias Display How to display Ordinals
13 Correct Spacing How to type Fractions
How to ensure correct Spacing 31 Case Sensitive
15 Variable Font How to display Small Caps Figures
How to use a Variable Font How to display Case Sensitive Symbols
17 Special Characters 34 Web Implementation
How to activate Small Caps Marias typeface for web
Where to find Character Alternates How to install Marias Type for web
20 OpenType Features Font linking in css
Where to find OpenType Features Variable Font linking in css
How to enable Standard Ligatures How to access OpenType Features for web

This technical guide has the objective of presenting Marias special technical features and how to use them in Adobe design software: I­llustrator,
­Photoshop and InDesign. If it is your intention to use the typeface in a different software, please refer to its own special features guidelines.
To know more about Marias’ brand guidlines and the correcrt use of the fonts, we recommend that you also refer to Marias Brand Book.

|2
 1.
Marias Type
System

|3
Marias Type Family
Marias’ custom type system is divided into two main subfamilies: Marias Text and
Marias ­Display. Marias Text includes eight static fonts: four different weights, each
available in both roman and italic. Marias Display is a single variable font, that also
exists as five static fonts of different weight, inclination and style. static fonts

Marias Text Thin

Marias Text Thin Italic
Marias Text Light
Marias Text Light Italic
Marias Text Regular
styles variable font Marias Text Regular Italic
Marias Text Bold
Marias Text -- Marias Text Bold Italic

Marias Display 900

Marias Display 700
family Marias Display 500
Marias Display Marias Display 300
Marias Marias Display Variable (100-900) Marias Display 100
 2.
Character
Set

|5
Marias Text
Marias Text character set fulfills editorial needs for both English and Spanish.

uppercase &
uppercase alternates AAÁÁBBCCDDEEÉÉFF
GGH� H II ÍÍJ JKK LLMM
NN ÑÑOOÓÓP PQQR�R
SSTTUUÚÚÜÜVVWW
XXYYZ �Z
marias text character set

small caps aábcdeéfghiíjklmn

ñoópqrstuúüvwxyz

lowercase &
lowercase alternates aa a ááábcc dd ee é�fggg hh
iíjj jkk k llmmm nn n ñññoo
óópqrr sttuúüvwxyyyzz
marias text character set

standard ligatures &

discretionary ligatures ff ffl fi ar as ár ár ch ct er
es ér és fl fr ga gi gr gu gú gü
ir ír is ís ol ól or ór sp st ta
tá to tó
marias text character set

basic punctuation . , : ; … ¡! ¿? ·• * # /\ () {} [] @ & ® ° |

-­–—_ “” ‘’ «» ‹› $ +×÷=><± %
case sensitive punctuation
for small caps ¡! ¿? ·• * # /\ () {} [] & ® °
-­–—_ “” ‘’ «» ‹› $ +×÷= >< ± %
case sensitive punctuation
for all caps ¡! ¿? ·• * # /\ () {} [] & ® °
-­–—_ “” ‘’ «» ‹› $ +×÷= >< ± %
marias text character set

proportional lining figures

0123456789
proportional oldstyle figures 0123456789
small caps figures 0123456789
superscripts/subscripts 0123456789H0123456789
numerators/denominators 0123456789H0123456789
ordinals 1ªº�
Marias Display
Marias Display character set fulfills prominent text needs for both English and Spanish.

uppercase A Á BCDE É F G H I Í J K L M N Ñ
OÓPQRSTUÚÜVWXYZ

default lowercase
lowercase alternates
a aá ább c cdd e e é é f fg ghh i ií í
j j k kl lm mnn ññ o o ó ópp q q
rr s st tu uú úü üv v ww x x y y z z
marias display character set

numbers 0 12 3 4 5 6 7 8 9

punctuation .,:;…¡!¿?·•*#/\-–—_|
(){}[]“”‘’«»‹›

symbols & mathematical symbols

@&® $+−×÷=%
 3.
Correct
Spacing

| 13
How to ensure correct Spacing
[applies to marias text and marias display]

First, select text boxes composed with Marias typeface, then go to the
­Character panel and make sure the Kerning is set to: “Metrics”. If it is not, click
on the menu to show options and select: “Metrics”.

Character Character
Marias Marias
Regular Regular

Metrics 0 Metrics 0
Optical
Metrics

-5
0
5

don’t do
optical kerning metric kerning

Mummy Mummy
| 14
 4.
Variable
Font

| 15
How to use a Variable Font
[applies to marias display only]
Var: 100 / Thin Auténtica
First, select the letter, word or sentence you’d like to adjust. Then, go to the
­Character panel. If a variable font is selected (Marias Display), the variable font
button will b
­ e displayed. Click on it; you can now change to intermediate values:
Var: 200 Auténtica
a. Moving the slider and going manually through the different instances;
b. Typing the exact desired value in the side text box (from 100 to 900);
c. Choosing one of the predefined instances (Thin, Regular, Medium, Bold or
Var: 300 / Light Auténtica
Auténtica
Black) directly from the font dropdown menu.
Var: 400

A.
B.
Character
Marias Display
Character
Marias Display Var: 500 / Regular Auténtica
Black Custom

Metrics 0
tt
Weight
v/a 800
Var: 600 Auténtica
C. Character Character
Var: 700 / Bold Auténtica
Marias Display

Black
Marias Display

Thin
Light
Var: 800 Auténtica
tt
Metrics 0
Regular
v/a
Bold
Black
Var: 900 / Black Auténtica
| 16
 5.
Special
Characters

| 17
How to activate Small Caps Lowercase>
Small Caps
[applies to marias text only]

First, select the letter, word or sentence you’d like in Small Caps. Then, go to the
­Character panel. You can now change your text from lowercase to Small Caps in
one of the following ways:
avellana Avellana
a. Display the option menu from the Character panel and select “Small Caps”;
b. Display the option menu from the Character panel and select “Show Options”.
The Small Caps icon will appear at the bottom of the panel. Click on it.
siglo xxi siglo xxi
Please, note that in InDesign, the Small Caps icon won’t appear in the ­Character
panel but in the Control panel displayed at the top of the InDesign window whenever
Text tool is selected.
nom-000 nom-ooo
A. Character Character
Marias Text Marias TextOptions
Show
Regular Regular
OpenType Galletas galletas
All Caps
Small Caps
Superscript
Subscript Gamesa gamesa
...
Character
Marias Text
B. Character Character
Marias Text Marias TextOptions
Show
Regular
cont. 50 g cont. 50 g
Regular Regular
OpenType
All Caps
Small Caps
Nutrición Nutrición
Superscript
Subscript
... | 18
Where to find Character Alternates All default >
Character Alternates
[applies to marias text and marias display]

First, select the letter you’d like to see alternates of, highlighting it with the text
cursor. You can can now see Character Alternates in one of the following ways:

a. By placing the mouse over the selected letter. Alternates for this letter will Amor Amor
automatically be shown below. Click on the one you’d like to type;
b. By opening the Glyphs panel, and choosing to show “Alternates”. Double click
on the character you want.
Dulce Dulce
Check out all character alternates in “Character Sets” (p.6, 7 and 11).

A. Una mamá mm

mamá mamá
B. Glyphs Glyphs Glyphs

Show: Complete font Show: Complete font Show: Alternates

Alternates for Selection mamá mamá
Complete Font
a a a ... a a a a a a

ar as b c ar as b c

c ch ct d c ch ct d
Marias Text Regular Marias Text Regular Marias Text Regular
Familia Familia

| 19
 6.
OpenType
Features

| 20
Where to find OpenType Features
[applies to marias text and marias display]

a. In InDesign and Photoshop, you can find OpenType features in the ­Character
panel. Open the option menu and expand OpenType options by placing your
mouse over it. All available features will be displayed.
b. In Illustrator, OpenType features has its own panel. Display Window menu
and expand Text options. Then, select “OpenType” to display OpenType panel,
from where you will be able to access all OpenType features.

A. Character B.
Character Discretionary Ligatures OpenType
Marias Marias TextOptions
Show Fractions Figures: Default Figures
Regular Regular Ordinal
Position: Default Position
OpenType [Swash]
Std. Ligatures
All Caps Contextual Alternates
Metrics 0 Contextual Alternates Fractions
Small Caps All Small Caps
[Slashed Zero] Discretionary Ligatures Ordinales
Superscript
Subscript Stylistic Sets OpenType
... Positional Forms Figures: Default
Standard Figures
Ligatures
Contextual
Position: DefaultAlternates
Position
Superscritpt/Superior Discretionarya Ligatures
Subscript/Inferior a
Standard and Discretionary Ligatures, Fractions, Ordinals, Swash
v/a Metrics va 0
Contextual Alternates, All Small Caps, Superscripts, Sub- Numerator Stylistic Alternates
scripts, Numerators, Denominators, Proportional Lining and Denominator Titling Alternates
Proportional Oldstyle Figures are available for Marias Text. Ordinals
Tabular Lining Fractions
Proportional Oldstyle Stylistic sets
Only Contextual Alternates are available for Marias Display.
Proportional Lining ...
Tabular Oldstyle
Default Figure Style
| 21
Where to find OpenType Features
[applies to marias text and marias display]

All OpenType variants of any character can also be found individually:

a. Highlighting the character or characters you want to change into one of its
OpenType variants. All the options available for this letter combination will B. Glyphs
appear below. Click on the option you’d like.
a
b. Searching for the wanted character(s) from the Glyphs panel and double
clicking on it. Show: Complete font

a a a

� A A A

ar as ga ta

A. Una mamá A a a ª
Marias Text Regular

small cap ordinal Glyphs

fractions
character
alernates Show: Complete font

½ ¼ ¾

1/2 kilogramo
½ gr
Marias Text Regular
fractions ligatures

| 22
How to enable Standard Ligatures
[applies to marias text only] Disabled > Enabled
Standard Ligatures

First, select the text box you want to see all Standard Ligatures activated for.
Then:

a. In InDesign, display the Character menu from the Character panel and select
flan flan
“Ligatures” to activate Standard Ligatures.
b. In Photoshop, display the Character menu from the Character panel and
soufflé soufflé
display the OpenType options. Select “Standard Ligatures”.
c. In Illustrator, activate the “Standard Ligatures” from the OpenType panel
fina fina
options.

Note that we recommend always having the Standard Ligatures activated.

A. Character B. Character C. OpenType

Marias Text Marias Text Figures: Default Figures
Regular Regular Position: Default Position

OpenType
Character Character Standard
Figures: Ligatures
Default Figures
MariasShow
Text Options MariasShow
Text Options Contextual Alternates
Position: Default Position
DiscretionaryaLigatures
Regular Regular a
Standard Ligatures Swash
OpenType OpenType Metrics va 0
Contextual Alternates Stylistic Alternates
All Caps All Caps
Discretionary Ligatures Titling Alternates
Small Caps Small Caps
Swash Ordinals
Superscript Superscript
Stylistic Alternates Fractions
Subscript Subscript
Titling Alternates Stylistic sets
...
Ordinals ...
Underline
Strikethrough Fractions | 23
Ligatures Stylistic sets
... ...
How to enable Discretionary Ligatures Disabled > Enabled
[applies to marias text only] Discretionary Ligatures

a. In InDesign and Photoshop, first select the characters you’d like to convert into
a Discretionary Ligature. From the Character panel, display the Character options’
menu and select “Discretionary Ligatures”. The option will only appear if there is a
discretionary ligature available.
choco choco
b. In Illustrator, activate the “Discretionary Ligatures” from the OpenType panel.

galletas galletas
A. Character B. OpenType
Marias Text Figures: Default Figures
fresa fresa
Regular Position: Default Position

gusto gusto
OpenType

Character Figures: Default

Standard Figures
Ligatures
Contextual
DefaultAlternates
MariasShow
Text Options Position: Position
Discretionarya Ligatures tiramisú tiramisú
Regular a
OpenType Standard Ligatures Swash
Metrics va 0
All Caps Contextual Alternates Stylistic Alternates
Titling Alternates
Small Caps
Superscript
Discretionary Ligatures
Swash Ordinals pastel pastel
Subscript Stylistic Alternates Fractions
Titling Alternates Stylistic sets
Underline Ordinals ...
Strikethrough Fractions receta receta
Ligatures Stylistic sets
... ...
| 24
How to enable Contextual Alternates Disabled > Enabled
[applies to marias text and marias display] Contextual Alternates

First, select the text box you want to enable Contextual Alternates for. Depending
on your software, select Contextual Alternates option from OpenType menu or
OpenType window (Please consult p.21 to know where to find OpenType features).
cacao cacao
Note that we recommend always having Contextual Alternates activated.

galleta galleta

A. Character Discretionary Ligatures B. OpenType

Marias TextOptions
Show Fractions
Figures: Default Figures
trigo trigo
Ordinals
Regular Position: Default Position
OpenType [Swash]
All Caps Contextual Alternates
Small Caps All Small Caps
Superscript [Slashed Zero]
Subscript Stylistic Sets OpenType
... Positional Forms Figures: Default
Standard Figures
Ligatures
... Contextual
Position: DefaultAlternates
Position
Gamesa Gamesa
DiscretionaryaLigatures
a
Swash
Metrics va 0
Stylistic Alternates
Titling Alternates Dulce Dulce
Ordinals
Fractions
Stylistic sets
... Original Original

| 25
Marias Text Contextual Alternates

HJ HJ HY Hg Hg Hj Hp Hy Hy Hy Hz H3
Avoid overlap between H
H4 H5 H7 H9 H0 H1 H2 H₃ H₄ H₅ H₆
and following sign. Those
combinations also exist for
K Q R X h m n ñ g. H₇ H₈ H₉ H, H) H} H] H@ H|

Avoid overlap between

j and previous sign. Gj Gj Jj Qj gj qj gj jj yj yj zj 3j 4j 5j 7j 9j ( j { j [ j

Optimize the use of

lowercase alternates. cl cl cc ca ce co al il el ll ti tr tu

| 26
How to switch Figure Styles
[applies to marias text only]

First, select the numbers you’d like to switch to another set. Then:

a. In InDesign and Photoshop, display the OpenType options form the Character
panel and select the figure style you want (Proportional Oldstyle or Proportional
Lining).
b. In Illustrator, directly select the figure style you want from the OpenType panel.

Note that Marias Default Figures are Propotional Lining Figures.

Proporional Lining

A. Character Discretionary Ligatures B. OpenType FUNDADA EN 1921

Marias TextOptions
Show Fractions Default Figures
Figures:
Ordinals
Regular Position: Default Position
OpenType [Swash]
All Caps Contextual Alternates
Small Caps All Small Caps
Proportional Oldstyle
Superscript [Slashed Zero]
OpenType
Subscript Stylistic Sets
... Positional Forms Figures: Default
Default Figures
Figures
Proportional Tabular
Fundada en 1921
Position: Default Position
Superscritpt/Superior Oldstyle Tabular
a
a
Subscript/Inferior Proportional Lining
Metrics va 0
Numerator Oldstyle Lining
Denominator

Tabular Lining
Proportional Oldstyle
Proportional Lining
Tabular Oldstyle
Default Figure Style
| 27
How to switch Figure Position
[applies to marias text only]

First, select the numbers you’d like to switch to another position. Then:

a. In InDesign and Photoshop, display the OpenType options form the Character
panel and select the figure position you want (Superscript or Subscript).
b. In Illustrator, select directly the figure position you want from the OpenType
panel.

Note that you should always select Superscript and Supbscripts through Open-
Type features, to avoid creating false characters. do not use: T1 and T1 buttons.
Superscript/Superior

A. Character Discretionary Ligatures B. OpenType Sin gluten1

Marias TextOptions
Show Fractions Default Figures
Figures:
Ordinals
Regular Position: Default Position
OpenType [Swash]
All Caps Contextual Alternates
Small Caps All Small Caps
OpenType Subscript/Inferior
Superscript [Slashed Zero]
Subscript Stylistic Sets Figures: Default Figures
... Positional Forms Position: Default
Default Position
Position H20
a
Superscript/Superior
a
Superscritpt/Superior
Subscript/Inferior
Metrics va 0
Subscript/Inferior
Numerator
Numerator
Denominator
Denominator

Tabular Lining
Proportional Oldstyle
Proportional Lining
Tabular Oldstyle
Default Figure Style
| 28
How to display Ordinals
[applies to marias text only]

First, select the letters you’d like to tranform into ordinals. Then:

a. In InDesign and Photoshop, display the OpenType options form the Character
panel and select “Ordinals”.
b. In Illustrator, select “Ordinals” from the OpenType panel (directly clicking on
the Ordinals button or displaying the options’ menu and selecting “Ordinals”).
Default > Ordinals
Note that you should always select Ordinals through OpenType features, to avoid
creating false characters. do not use: T1 and T1 buttons.

1er 1er
A. Character Discretionary Ligatures B. OpenType
Marias TextOptions
Show Fractions

2o 2o
Figures: Default Figures
Ordinals
Regular Position: Default Position
OpenType [Swash]
All Caps Contextual Alternates
Small Caps All Small Caps
Superscript
Subscript
[Slashed Zero]
Stylistic Sets OpenType 3a 3a
... Positional Forms Default
Standard
Figures: Figures
Ligatures
Contextual
Position: DefaultAlternates
Position
Superscritpt/Superior DiscretionaryaLigatures
Subscript/Inferior a
Swash
Metrics va 0
Numerator Stylistic Alternates
Denominator Titling Alternates
Ordinals
Tabular Lining Fractions
Proportional Oldstyle Stylistic sets
Proportional Lining ...
Tabular Oldstyle
Default Figure Style | 29
How to type Fractions
[applies to marias text only]

First, select the text you want to transform into a fraction. Then:

a. In InDesign and Photoshop, display the OpenType options form the Character
panel and select “Fractions”.
b. In Illustrator, select “Fractions” from the OpenType panel (directly clicking on
the Fraction button or displaying the options’ menu and selecting “Fraction”).

The text you select should be composed by a number, a slash bar and another Default Fractions
number in order to work (see example on sidebar).

1/2 1/2
A. Character Discretionary Ligatures B. OpenType
Marias TextOptions
Show Fractions Default Figures
13/60 13/60
Figures:
Ordinals
Regular Position: Default Position
OpenType [Swash]
All Caps Contextual Alternates
Small Caps All Small Caps
Superscript
Subscript
[Slashed Zero]
Stylistic Sets OpenType 12/100 12/100
... Positional Forms Default
Standard
Figures: Figures
Ligatures
Contextual
Position: DefaultAlternates
Position
Superscritpt/Superior DiscretionaryaLigatures
Subscript/Inferior a
Swash
Metrics va 0
Numerator Stylistic Alternates
Denominator Titling Alternates
Ordinals
Tabular Lining Fractions
Proportional Oldstyle Stylistic sets
Proportional Lining ...
Tabular Oldstyle
Default Figure Style | 30
 7.
Case
Sensitive

| 31
How to display Small Caps Figures
[applies to marias text only]

To align numbers to Small Caps, you need to switch them to Small Caps Numbers.
Select the numbers you want to alingn to Small Caps and click on the Small Caps
button [Tt], or select Small Caps from the Character panel options’ menu.
Proportional Lining

FUNDADA EN 1921

Character
Proportional Oldstyle
Marias TextOptions
Show
Regular
OpenType Fundada en 1921
All Caps
Small Caps
Superscript
Subscript
...
Small Caps Figures

fundada en 1921

| 32
How to display Case Sensitive Symbols
[applies to marias text only]

To align symbols to case, you need to change them to Case Sensitive symbols.
We recommend typing the whole text in upper and lower case first, then se-
lecting the text we want to change case, including symbols and:
Upper and lowercase
a. For Small Caps, clicking on the Small Caps button [Tt], or selecting Small
Caps from the Character panel option menu.
b. For All Caps, clicking on the All Caps button [TT] or selecting All Caps from the
¡Ricas galletas!
Character panel option menu.

A. Character
Small Caps
Marias TextOptions
Show
Regular
OpenType ¡ricas galletas!
All Caps
Small Caps
Superscript
Subscript
...
All Caps

B. Character
Marias TextOptions
Show ¡RICAS GALLETAS!
Regular
OpenType
All Caps
Small Caps
Superscript
Subscript
...

| 33
 8.
Web
Implementation

| 34
Marias typeface for web
Marias typeface includes specific mathematical instructions (called hinting) in
order to adjust the letters’ behavior when being displayed on screens. This hint-
ing is critical for composing clear and legible texts for small screen sizes, such
as web pages, mobile apps, etc. in several operating systems and/or browsers.

These font files are carefully crafted with special security settings and
shouldn’t be used in other scenarios that are not web based.

The ttf files are optimized to be used in software that allows the creation of
print medias such as Adobe design software.

The files with woff, woff2, y ttf extensions were created to be used and adapt-
ed to different browsers and digital apps.

Desktop: Web:

ttf ttf woff woff2

| 35
How to install Marias typeface for web

In order to use Marias typeface in digital applications, such as websites or apps, Advanced strategies
several extensions are available to give support to diferent browsers. to implement:

For a more advanced implemen-

1. Select and reduce the number of fonts. tation, including performance and
Marias typeface includes various fonts of different weights and styles to re- loading improvements, avoiding
spond to a wide range of needs. In web scenarios, it’s important to choose delays when displaying website
the styles wisely and avoid using several different fonts, in order to reduce the content (due to each browser’s
number of files and the weight to be loaded on the user’s browser as this will nature), we recomend consulting
improve the performance and loading time of the website. the following resources:

2. Declare @font-face Web Font Optimization (Google):

Through this declaration, you can instruct the site to serve the correct font https://developers.google.com/
files for the browser(s) you want to support. Marias typeface includes various web/fundamentals/performance/
formats to be supported in the following browsers: optimizing-content-efficiency/
webfont-optimization

A Comprehensive Guide To
ttf woff woff2 Font Loading Strategies
Firefox 3.5 or + 3.6 or + 39 or + (Zach Leatherman):
Safari 3.1 or + 5.1 or + 12 or + https://www.zachleat.com/web/
Chrome 4 or + 5 or + 36 or + comprehensive-webfonts/

Edge 12 or + 12 or + 14 or +
Explorer — 9 or + —
iOS 4.2 or + 5 or + 10 or +
Android 2.2 or + 4.4 or + 95 or +

| 36
Fonts linking in css
The correct way to link fonts in a css file is through a @font-face rule that The correct assignmens for
­acknowledges the cascading nature of the font callings, serving the appropri- the font-weight rule are:
ate format for each browser, as shown in the example below for Marias Text
Bold Italic: Marias Text Thin 100
Marias Text Light 300
Marias Text Regular 400
@font-face {
Marias Text Bold 700
font-family: ‘MariasText’;
src: url(‘fonts/woff2/MariasText-BoldItalic.woff2’) format(‘woff2’),
Marias Display Thin 100
url(‘fonts/woff/MariasText-BoldItalic.woff’) format(‘woff’),
Marias Display Regular 400
url(‘fonts/ttf/MariasText-BoldItalic.ttf’) format(‘truetype’),
Marias Display Medium 500
font-weight: 700;
Marias Display Bold 700
font-style: italic;
Marias Display Black 900
}

Note that there should be a @font-face declaration for each variant

(weight and style) used in the website.

| 37
Variable Fonts linking in css
For variable fonts, we recommend first setting up Marias Display static version for The correct assignmens for
old browsers with a @­ font-face declaration for each weight as in the example below: the font-weight rule are:

@font-face { Marias Display Variable:

font-family: ‘MariasDisplay ’; numeric values ranging
src: url(‘fonts/MariasDisplayThin.woff2’) format(‘woff2-variations’), from 100 to 900
url(‘fonts/MariasDisplayThin.woff’) format(‘woff-variations’),
url(‘fonts/MariasDisplayThin.ttf’) format(‘truetype-variations’);
font-weight: 100;
font-style: normal;
}

If you do not wish to set up a fallback for browsers with no variable support, ignore
the previous step and refer only to the following @font-face declaration without the ­
@support declaration wrapper.

Then set up Marias Display for modern browsers, all weights.

@supports (font-variation-settings: normal) {

@font-face {
font-family: ‘MariasDisplay Variable’;
src: url(‘fonts/MariasDisplayVariable.woff2’) format(‘woff2 supports variations’),
url(‘fonts/MariasDisplayVariable.woff2’) format(‘woff2-variations’),
url(‘fonts/MariasDisplayVariable.woff’) format(‘woff-variations’),
url(‘fonts/MariasDisplayVariable.ttf’) format(‘truetype-variations’);
font-weight: 100 900;
font-style: normal;
}
}

| 38
How to access OpenType Features for web
Marias typeface supports the following functions for web: Oldstyle figures (onum):
Fractions, Superscripts, Subscripts, Lining figures, Oldstyle figures, Proportional font-variant-numeric: oldstyle-nums;
figures, Tabular figures, Ordinals, Small caps, Capitals to small caps, Common/ -moz-font-feature-settings: “onum”;
standard ligatures, Case-sensitive forms and Contextual alternates. -webkit-font-feature-settings: “onum”;
font-feature-settings: “onum”;

Fractions (frac): Capitals to small caps (c2sc): Proportional figures (pnum):

font-variant-numeric: diagonal-fractions; font-variant-caps: all-small-caps; font-variant-numeric: proportional-nums;
-moz-font-feature-settings: “frac”; -moz-font-feature-settings: “c2sc”, “smcp”; -moz-font-feature-settings: “pnum”;
-webkit-font-feature-settings: “frac”; -webkit-font-feature-settings: “c2sc”, “smcp”; -webkit-font-feature-settings: “pnum”;
font-feature-settings: “frac”; font-feature-settings: “c2sc”, “smcp”; font-feature-settings: “pnum”;

Superscripts (sups): Common/standard ligatures (liga): Tabular figures (tnum):

font-variant-position: super; font-variant-ligatures: common-ligatures; font-variant-numeric: tabular-nums;
-moz-font-feature-settings: “sups”; -moz-font-feature-settings: “liga”, “clig”; -moz-font-feature-settings: “tnum”;
-webkit-font-feature-settings: “sups”; -webkit-font-feature-settings: “liga”, “clig”; -webkit-font-feature-settings: “tnum”;
font-feature-settings: “sups”; font-feature-settings: “liga”, “clig”; font-feature-settings: “tnum”;

Subscripts (subs): Case-sensitive forms (case): Ordinals (ordn):

font-variant-position: sub; text-transform: uppercase; font-variant-numeric: ordinal;
-moz-font-feature-settings: “subs”; -moz-font-feature-settings: ‘case’; -moz-font-feature-settings: “ordn”;
-webkit-font-feature-settings: “subs”; -webkit-font-feature-settings: ‘case’; -webkit-font-feature-settings: “ordn”;
font-feature-settings: “subs”; font-feature-settings: ‘case’ on; font-feature-settings: “ordn”;

Lining figures (lnum): Contextual Alternates (calt): Small caps (smcp):

font-variant-numeric: lining-nums; font-variant-alternates: contextual; font-variant-caps: small-caps;
-moz-font-feature-settings: “lnum”; -moz-font-feature-settings: ‘calt’; -moz-font-feature-settings: “smcp”;
-webkit-font-feature-settings: “lnum”; -webkit-font-feature-settings: ‘calt’; -webkit-font-feature-settings: “smcp”;
font-feature-settings: “lnum”; font-feature-settings: ‘calt’ on; font-feature-settings: “smcp”;

| 39