recursive-mono-and-sans,-a-free-variable-type-family

A highly-flexible new variable font.

Built to maximize versatility, control, and performance, Recursive is a five-axis variable font. This enables you to choose from a wide range of predefined styles, or dial in exactly what you want for each of its axes: Proportion, Monospace, Weight, Slant, and Italic. Taking full advantage of variable font technology, Recursive offers an unprecedented level of flexibility, all from a single font file.

  • font-size: 16vw;

    font-size: 300px;

  • –mono: MONO
    0;

  • –casl: CASL0;


  • –wght: wght800;

  • –slnt: slnt0;

  • font-variation-settings: var(–mono), var(–casl), var(–wght), var(–slnt), var(–ital);

Recursive draws inspiration from single-stroke casual signpainting, a style of brush writing that is stylistically flexible and warmly energetic. Adapting this aesthetic basis into a type system, Recursive is designed to excel in digital interactive environments. This makes the typeface ideal for a wide range of uses, including data-rich apps, technical documentation and code editors.

One font. Infinite combinations.

Recursive is crafted with adaptability and diversity in mind, offering a complete type system but ensuring that each style can pair perfectly with its siblings. With so many possible variations across its subfamilies, weights and styles, Recursive allows for a dozen of font combinations that provide enough contrast to clearly define typographic roles, while maintaining a cohesive voice.

Sans && Mono. In one file. MONO

The typeface comes in two practical and highly readable subfamilies, Sans and Mono. Thanks to its Monospace axis (MONO), both of these subfamilies can be used in a single font file. You can even select custom instances that are semi-proportional or semi-monospaced.

Of course, vertical metrics such as line height, cap height, and x-height are shared across the entire Monospace axis. This allows harmonious and performant layouts, even where different proportions are mixed, such as in data-rich applications and technical documentation.

Recursive Sans is made for text & user interface design. While its proportional characters deliver comfortable reading at text sizes, its heaviest weights are perfect to create punchy, tightly-spaced headlines.

Recursive Mono is made for code. Its characters share the same width for clear legibility and perfect alignment. This is particularly helpful for use in programming and data-heavy design tasks, but also allows for creative possibilities in display typography.

A Sans for more robust layouts.

The characters within both subfamilies, Sans & Mono, maintain the exact same width across all font styles, independently of the values set on the Weight, Casual, Slant, and Italic axes. You can therefore use Recursive to create animated font transitions without breaking the layout of UI elements like menus and buttons.

  • Menu Item
  • Item Two
  • Choose Me

font-family:

sans-serif;

  • Menu Item
  • Item Two
  • Choose Me

font-family: Recursive;

Ready for work. Ready for play. CASL

Recursive uses its Casual axis (CASL) to offer a range of personality, allowing you to get just the right tone for any context. Along this axis, letterforms adjust in stroke curvature, contrast, and terminals to go from a sturdy, rational Linear to a friendly, energetic Casual. All the styles along this axis are designed to maintain high legibility at medium and text sizes. In display sizes, it is most effective to use either end of the Casual axis.

Linear (CASL 0) styles have subtly-flattened edges and simple, open forms. This optimizes readability and enables enhanced focus in dense information, such as long-form text and complex code.

Casual (CASL 1) echoes the soft & curvy brush strokes of casual signpainting, but simplifies these forms for a striking and inviting tone. This makes it ideal for web headlines, code snippets, and command line interfaces.

Light to ExtraBlack. And everything in between. wght

Recursive comes in a wide range of weights, from Light (300) to a super-heavy Black (900). You can choose from its seven predefined weights, or set a custom value through its Weight (wght) axis. And because Recursive maintains consistent letterforms along the entire Weight axis, it allows for smooth animations between any of its different weights.

Slant and Italics. Two axes that work great together, or separate. slnt & ital

In Recursive, italics and slant can be controlled separately. The Italic axis (ital) lets you switch on true italics, while the Slant axis (slnt) defines the angle of the letters. This makes it possible to use sloped romans ( slnt -15, ital 0), upright italics ( slnt 0, ital 1), or set custom values on both axes for more options to play with.

Recursive’s true italics (ital 1) replace familiar letterforms with single-story cursive alternates. By default, Recursive will automatically apply these cursive alternates when setting the Slant axis (slnt) to a high value. This ensures that your code and text reads beautifully and instantly, no matter how slanted it needs to be.

Powerful, yet simple to use.

As a variable font, Recursive gives you fine-grained control over each one of its styles. However, it also comes with 64 predefined styles that are easy to access through your font menu. Called named instances¹, these work just like regular static fonts do.

¹ Named instance: a predetermined location in the designspace of a variable font, similar to the “static instances” that are familiar in traditional digital fonts.

Recursive

Light

(300)

Regular

(400)

Medium

(500)

Semibold

(600)

Bold

(700)

ExtraBold

(800)

Heavy

(900)

ExtraBlack

(1000)

Supports over 200 languages.

To meet the needs of global communication, Recursive supports a wide range of Latin-based languages, including Vietnamese. It also comes with an extended set of currencies, symbols, fractions, and arrows.


Abenaki, Afaan Oromo, Afar, Afrikaans, Albanian, Alsatian, Amis, Anuta, Aragonese, Aranese, Aromanian, Arrernte, Arvanitic (Latin), Asturian, Atayal, Aymara, Azerbaijani, Bashkir (Latin), Basque, Belarusian (Latin), Bemba, Bikol, Bislama, Bosnian, Breton, Cape Verdean Creole, Catalan, Cebuano, Chamorro, Chavacano, Chichewa, Chickasaw, Cimbrian, Cofán, Cornish, Corsican, Creek, Crimean Tatar (Latin), Croatian, Czech, Danish, Dawan, Delaware, Dholuo, Drehu, Dutch, English, Esperanto, Estonian, Faroese, Fijian, Filipino, Finnish, Folkspraak, French, Frisian, Friulian, Gagauz (Latin), Galician, Ganda, Genoese, German, Gikuyu, Gooniyandi, Greenlandic (Kalaallisut), Guadeloupean Creole, Gwich’in, Haitian Creole, Hän, Hawaiian, Hiligaynon, Hopi, Hotcąk (Latin), Hungarian, Icelandic, Ido, Igbo, Ilocano, Indonesian, Interglossa, Interlingua, Irish, Istro-Romanian, Italian, Jamaican, Javanese (Latin), Jèrriais, Kaingang, Kala Lagaw Ya, Kapampangan (Latin), Kaqchikel, Karakalpak (Latin), Karelian (Latin), Kashubian, Kikongo, Kinyarwanda, Kiribati, Kirundi, Klingon, Kurdish (Latin), Ladin, Latin, Latino sine Flexione, Latvian, Lithuanian, Lojban, Lombard, Low Saxon, Luxembourgish, Maasai, Makhuwa, Malay, Maltese, Manx, Māori, Marquesan, Megleno-Romanian, Meriam Mir, Mirandese, Mohawk, Moldovan, Montagnais, Montenegrin, Murrinh-Patha, Nagamese Creole, Nahuatl, Ndebele, Neapolitan, Ngiyambaa, Niuean, Noongar, Norwegian, Novial, Occidental, Occitan, Old Icelandic, Old Norse, Onĕipŏt, Oshiwambo, Ossetian (Latin), Palauan, Papiamento, Piedmontese, Polish, Portuguese, Potawatomi, Q’eqchi’, Quechua, Rarotongan, Romanian, Romansh, Rotokas, Sami (Inari Sami), Sami (Lule Sami), Sami (Northern Sami), Sami (Southern Sami), Samoan, Sango, Saramaccan, Sardinian, Scottish Gaelic, Serbian (Latin), Seri, Seychellois Creole, Shawnee, Shona, Sicilian, Silesian, Slovak, Slovenian, Slovio (Latin), Somali, Sorbian (Lower Sorbian), Sorbian (Upper Sorbian), Sotho (Northern), Sotho (Southern), Spanish, Sranan, Sundanese (Latin), Swahili, Swazi, Swedish, Tagalog, Tahitian, Tetum, Tok Pisin, Tokelauan, Tongan, Tshiluba, Tsonga, Tswana, Tumbuka, Turkish, Turkmen (Latin), Tuvaluan, Tzotzil, Uzbek (Latin), Venetian, Vepsian, Vietnamese, Volapük, Võro, Wallisian, Walloon, Waray-Waray, Warlpiri, Wayuu, Welsh, Wik-Mungkan, Wiradjuri, Wolof, Xavante, Xhosa, Yapese, Yindjibarndi, Zapotec, Zarma, Zazaki, Zulu, Zuni


A

A

latin capital letter a (u 0041)



À

À

latin capital letter a with grave (u 00c0)



Á

Á

latin capital letter a with acute (u 00c1)



Â

Â

latin capital letter a with circumflex (u 00c2)



Ã

Ã

latin capital letter a with tilde (u 00c3)



Ä

Ä

latin capital letter a with diaeresis (u 00c4)



Å

Å

latin capital letter a with ring above (u 00c5)



Ā

Ā

latin capital letter a with macron (u 0100)



Ă

Ă

latin capital letter a with breve (u 0102)



Ą

Ą

latin capital letter a with ogonek (u 0104)



Ǻ

Ǻ

latin capital letter a with ring above and acute (u 01fa)



latin capital letter a with dot below (u 1ea0)



latin capital letter a with hook above (u 1ea2)



latin capital letter a with circumflex and acute (u 1ea4)



latin capital letter a with circumflex and grave (u 1ea6)



latin capital letter a with circumflex and hook above (u 1ea8)



latin capital letter a with circumflex and tilde (u 1eaa)



latin capital letter a with circumflex and dot below (u 1eac)



latin capital letter a with breve and acute (u 1eae)



latin capital letter a with breve and grave (u 1eb0)



latin capital letter a with breve and hook above (u 1eb2)



latin capital letter a with breve and tilde (u 1eb4)



latin capital letter a with breve and dot below (u 1eb6)



B

B

latin capital letter b (u 0042)



C

C

latin capital letter c (u 0043)



Ç

Ç

latin capital letter c with cedilla (u 00c7)



Ć

Ć

latin capital letter c with acute (u 0106)



Ĉ

Ĉ

latin capital letter c with circumflex (u 0108)



Ċ

Ċ

latin capital letter c with dot above (u 010a)



Č

Č

latin capital letter c with caron (u 010c)



D

D

latin capital letter d (u 0044)



Ď

Ď

latin capital letter d with caron (u 010e)



E

E

latin capital letter e (u 0045)



È

È

latin capital letter e with grave (u 00c8)



É

É

latin capital letter e with acute (u 00c9)



Ê

Ê

latin capital letter e with circumflex (u 00ca)



Ë

Ë

latin capital letter e with diaeresis (u 00cb)



Ē

Ē

latin capital letter e with macron (u 0112)



Ĕ

Ĕ

latin capital letter e with breve (u 0114)



Ė

Ė

latin capital letter e with dot above (u 0116)



Ę

Ę

latin capital letter e with ogonek (u 0118)



Ě

Ě

latin capital letter e with caron (u 011a)



latin capital letter e with dot below (u 1eb8)



latin capital letter e with hook above (u 1eba)



latin capital letter e with tilde (u 1ebc)



latin capital letter e with circumflex and acute (u 1ebe)



latin capital letter e with circumflex and grave (u 1ec0)



latin capital letter e with circumflex and hook above (u 1ec2)



latin capital letter e with circumflex and tilde (u 1ec4)



latin capital letter e with circumflex and dot below (u 1ec6)



F

F

latin capital letter f (u 0046)



G

G

latin capital letter g (u 0047)



Ĝ

Ĝ

latin capital letter g with circumflex (u 011c)



Ğ

Ğ

latin capital letter g with breve (u 011e)



Ġ

Ġ

latin capital letter g with dot above (u 0120)



Ģ

Ģ

latin capital letter g with cedilla (u 0122)



Ǧ

Ǧ

latin capital letter g with caron (u 01e6)



H

H

latin capital letter h (u 0048)



Ĥ

Ĥ

latin capital letter h with circumflex (u 0124)



I

I

latin capital letter i (u 0049)



Ì

Ì

latin capital letter i with grave (u 00cc)



Í

Í

latin capital letter i with acute (u 00cd)



Î

Î

latin capital letter i with circumflex (u 00ce)



Ï

Ï

latin capital letter i with diaeresis (u 00cf)



Ĩ

Ĩ

latin capital letter i with tilde (u 0128)



Ī

Ī

latin capital letter i with macron (u 012a)



Ĭ

Ĭ

latin capital letter i with breve (u 012c)



Į

Į

latin capital letter i with ogonek (u 012e)



İ

İ

latin capital letter i with dot above (u 0130)



latin capital letter i with hook above (u 1ec8)



latin capital letter i with dot below (u 1eca)



J

J

latin capital letter j (u 004a)



Ĵ

Ĵ

latin capital letter j with circumflex (u 0134)



K

K

latin capital letter k (u 004b)



Ķ

Ķ

latin capital letter k with cedilla (u 0136)



L

L

latin capital letter l (u 004c)



Ĺ

Ĺ

latin capital letter l with acute (u 0139)



Ļ

Ļ

latin capital letter l with cedilla (u 013b)



Ľ

Ľ

latin capital letter l with caron (u 013d)



M

M

latin capital letter m (u 004d)



N

N

latin capital letter n (u 004e)



Ñ

Ñ

latin capital letter n with tilde (u 00d1)



Ń

Ń

latin capital letter n with acute (u 0143)



Ņ

Ņ

latin capital letter n with cedilla (u 0145)



Ň

Ň

latin capital letter n with caron (u 0147)



O

O

latin capital letter o (u 004f)



Ò

Ò

latin capital letter o with grave (u 00d2)



Ó

Ó

latin capital letter o with acute (u 00d3)



Ô

Ô

latin capital letter o with circumflex (u 00d4)



Õ

Õ

latin capital letter o with tilde (u 00d5)



Ö

Ö

latin capital letter o with diaeresis (u 00d6)



Ō

Ō

latin capital letter o with macron (u 014c)



Ŏ

Ŏ

latin capital letter o with breve (u 014e)



Ő

Ő

latin capital letter o with double acute (u 0150)



Ơ

Ơ

latin capital letter o with horn (u 01a0)



Ǫ

Ǫ

latin capital letter o with ogonek (u 01ea)



latin capital letter o with dot below (u 1ecc)



latin capital letter o with hook above (u 1ece)



latin capital letter o with circumflex and acute (u 1ed0)



latin capital letter o with circumflex and grave (u 1ed2)



latin capital letter o with circumflex and hook above (u 1ed4)



latin capital letter o with circumflex and tilde (u 1ed6)



latin capital letter o with circumflex and dot below (u 1ed8)



latin capital letter o with horn and acute (u 1eda)



latin capital letter o with horn and grave (u 1edc)



latin capital letter o with horn and hook above (u 1ede)



latin capital letter o with horn and tilde (u 1ee0)



latin capital letter o with horn and dot below (u 1ee2)



P

P

latin capital letter p (u 0050)



Q

Q

latin capital letter q (u 0051)



R

R

latin capital letter r (u 0052)



Ŕ

Ŕ

latin capital letter r with acute (u 0154)



Ŗ

Ŗ

latin capital letter r with cedilla (u 0156)



Ř

Ř

latin capital letter r with caron (u 0158)



S

S

latin capital letter s (u 0053)



Ś

Ś

latin capital letter s with acute (u 015a)



Ŝ

Ŝ

latin capital letter s with circumflex (u 015c)



Ş

Ş

latin capital letter s with cedilla (u 015e)



Š

Š

latin capital letter s with caron (u 0160)



Ș

Ș

latin capital letter s with comma below (u 0218)



T

T

latin capital letter t (u 0054)



Ţ

Ţ

latin capital letter t with cedilla (u 0162)



Ť

Ť

latin capital letter t with caron (u 0164)



Ț

Ț

latin capital letter t with comma below (u 021a)



U

U

latin capital letter u (u 0055)



Ù

Ù

latin capital letter u with grave (u 00d9)



Ú

Ú

latin capital letter u with acute (u 00da)



Û

Û

latin capital letter u with circumflex (u 00db)



Ü

Ü

latin capital letter u with diaeresis (u 00dc)



Ũ

Ũ

latin capital letter u with tilde (u 0168)



Ū

Ū

latin capital letter u with macron (u 016a)



Ŭ

Ŭ

latin capital letter u with breve (u 016c)



Ů

Ů

latin capital letter u with ring above (u 016e)



Ű

Ű

latin capital letter u with double acute (u 0170)



Ų

Ų

latin capital letter u with ogonek (u 0172)



Ư

Ư

latin capital letter u with horn (u 01af)



latin capital letter u with dot below (u 1ee4)



latin capital letter u with hook above (u 1ee6)



latin capital letter u with horn and acute (u 1ee8)



latin capital letter u with horn and grave (u 1eea)



latin capital letter u with horn and hook above (u 1eec)



latin capital letter u with horn and tilde (u 1eee)



latin capital letter u with horn and dot below (u 1ef0)



V

V

latin capital letter v (u 0056)



W

W

latin capital letter w (u 0057)



Ŵ

Ŵ

latin capital letter w with circumflex (u 0174)



latin capital letter w with grave (u 1e80)



latin capital letter w with acute (u 1e82)



latin capital letter w with diaeresis (u 1e84)



X

X

latin capital letter x (u 0058)



Y

Y

latin capital letter y (u 0059)



Ý

Ý

latin capital letter y with acute (u 00dd)



Ŷ

Ŷ

latin capital letter y with circumflex (u 0176)



Ÿ

Ÿ

latin capital letter y with diaeresis (u 0178)



Ȳ

Ȳ

latin capital letter y with macron (u 0232)



latin capital letter y with grave (u 1ef2)



latin capital letter y with dot below (u 1ef4)



latin capital letter y with tilde (u 1ef8)



Z

Z

latin capital letter z (u 005a)



Ź

Ź

latin capital letter z with acute (u 0179)



Ż

Ż

latin capital letter z with dot above (u 017b)



Ž

Ž

latin capital letter z with caron (u 017d)



Æ

Æ

latin capital letter ae (u 00c6)



Ǽ

Ǽ

latin capital letter ae with acute (u 01fc)



Ð

Ð

latin capital letter eth (u 00d0)



Ø

Ø

latin capital letter o with stroke (u 00d8)



Ǿ

Ǿ

latin capital letter o with stroke and acute (u 01fe)



Þ

Þ

latin capital letter thorn (u 00de)



Đ

Đ

latin capital letter d with stroke (u 0110)



Ħ

Ħ

latin capital letter h with stroke (u 0126)



IJ

IJ

latin capital ligature ij (u 0132)



latin capital ligature ij with acute (u e133)



Ŀ

Ŀ

latin capital letter l with middle dot (u 013f)



Ł

Ł

latin capital letter l with stroke (u 0141)



Ŋ

Ŋ

latin capital letter eng (u 014a)



Œ

Œ

latin capital ligature oe (u 0152)



Ŧ

Ŧ

latin capital letter t with stroke (u 0166)



Ə

Ə

latin capital letter schwa (u 018f)



Ɲ

Ɲ

latin capital letter n with left hook (u 019d)



Ƴ

Ƴ

latin capital letter y with hook (u 01b3)



DŽ

DŽ

latin capital letter dz with caron (u 01c4)



LJ

LJ

latin capital letter lj (u 01c7)



NJ

NJ

latin capital letter nj (u 01ca)



latin capital letter sharp s (u 1e9e)





a

a

latin small letter a (u 0061)



à

à

latin small letter a with grave (u 00e0)



á

á

latin small letter a with acute (u 00e1)



â

â

latin small letter a with circumflex (u 00e2)



ã

ã

latin small letter a with tilde (u 00e3)



ä

ä

latin small letter a with diaeresis (u 00e4)



å

å

latin small letter a with ring above (u 00e5)



ā

ā

latin small letter a with macron (u 0101)



ă

ă

latin small letter a with breve (u 0103)



ą

ą

latin small letter a with ogonek (u 0105)



ǻ

ǻ

latin small letter a with ring above and acute (u 01fb)



latin small letter a with dot below (u 1ea1)



latin small letter a with hook above (u 1ea3)



latin small letter a with circumflex and acute (u 1ea5)



latin small letter a with circumflex and grave (u 1ea7)



latin small letter a with circumflex and hook above (u 1ea9)



latin small letter a with circumflex and tilde (u 1eab)



latin small letter a with circumflex and dot below (u 1ead)



latin small letter a with breve and acute (u 1eaf)



latin small letter a with breve and grave (u 1eb1)



latin small letter a with breve and hook above (u 1eb3)



latin small letter a with breve and tilde (u 1eb5)



latin small letter a with breve and dot below (u 1eb7)



b

b

latin small letter b (u 0062)



c

c

latin small letter c (u 0063)



ç

ç

latin small letter c with cedilla (u 00e7)



ć

ć

latin small letter c with acute (u 0107)



ĉ

ĉ

latin small letter c with circumflex (u 0109)



ċ

ċ

latin small letter c with dot above (u 010b)



č

č

latin small letter c with caron (u 010d)



d

d

latin small letter d (u 0064)



ď

ď

latin small letter d with caron (u 010f)



e

e

latin small letter e (u 0065)



è

è

latin small letter e with grave (u 00e8)



é

é

latin small letter e with acute (u 00e9)



ê

ê

latin small letter e with circumflex (u 00ea)



ë

ë

latin small letter e with diaeresis (u 00eb)



ē

ē

latin small letter e with macron (u 0113)



ĕ

ĕ

latin small letter e with breve (u 0115)



ė

ė

latin small letter e with dot above (u 0117)



ę

ę

latin small letter e with ogonek (u 0119)



ě

ě

latin small letter e with caron (u 011b)



latin small letter e with dot below (u 1eb9)



latin small letter e with hook above (u 1ebb)



latin small letter e with tilde (u 1ebd)



ế

ế

latin small letter e with circumflex and acute (u 1ebf)



latin small letter e with circumflex and grave (u 1ec1)



latin small letter e with circumflex and hook above (u 1ec3)



latin small letter e with circumflex and tilde (u 1ec5)



latin small letter e with circumflex and dot below (u 1ec7)



f

f

latin small letter f (u 0066)



g

g

latin small letter g (u 0067)



ĝ

ĝ

latin small letter g with circumflex (u 011d)



ğ

ğ

latin small letter g with breve (u 011f)



ġ

ġ

latin small letter g with dot above (u 0121)



ģ

ģ

latin small letter g with cedilla (u 0123)



ǧ

ǧ

latin small letter g with caron (u 01e7)



h

h

latin small letter h (u 0068)



ĥ

ĥ

latin small letter h with circumflex (u 0125)



i

i

latin small letter i (u 0069)



ì

ì

latin small letter i with grave (u 00ec)



í

í

latin small letter i with acute (u 00ed)



î

î

latin small letter i with circumflex (u 00ee)



ï

ï

latin small letter i with diaeresis (u 00ef)



ĩ

ĩ

latin small letter i with tilde (u 0129)



ī

ī

latin small letter i with macron (u 012b)



ĭ

ĭ

latin small letter i with breve (u 012d)



į

į

latin small letter i with ogonek (u 012f)



latin small letter i with hook above (u 1ec9)



latin small letter i with dot below (u 1ecb)



j

j

latin small letter j (u 006a)



ĵ

ĵ

latin small letter j with circumflex (u 0135)



k

k

latin small letter k (u 006b)



ķ

ķ

latin small letter k with cedilla (u 0137)



l

l

latin small letter l (u 006c)



ĺ

ĺ

latin small letter l with acute (u 013a)



ļ

ļ

latin small letter l with cedilla (u 013c)



ľ

ľ

latin small letter l with caron (u 013e)



m

m

latin small letter m (u 006d)



n

n

latin small letter n (u 006e)



ñ

ñ

latin small letter n with tilde (u 00f1)



ń

ń

latin small letter n with acute (u 0144)



ņ

ņ

latin small letter n with cedilla (u 0146)



ň

ň

latin small letter n with caron (u 0148)



o

o

latin small letter o (u 006f)



ò

ò

latin small letter o with grave (u 00f2)



ó

ó

latin small letter o with acute (u 00f3)



ô

ô

latin small letter o with circumflex (u 00f4)



õ

õ

latin small letter o with tilde (u 00f5)



ö

ö

latin small letter o with diaeresis (u 00f6)



ō

ō

latin small letter o with macron (u 014d)



ŏ

ŏ

latin small letter o with breve (u 014f)



ő

ő

latin small letter o with double acute (u 0151)



ơ

ơ

latin small letter o with horn (u 01a1)



ǫ

ǫ

latin small letter o with ogonek (u 01eb)



latin small letter o with dot below (u 1ecd)



latin small letter o with hook above (u 1ecf)



latin small letter o with circumflex and acute (u 1ed1)



latin small letter o with circumflex and grave (u 1ed3)



latin small letter o with circumflex and hook above (u 1ed5)



latin small letter o with circumflex and tilde (u 1ed7)



latin small letter o with circumflex and dot below (u 1ed9)



latin small letter o with horn and acute (u 1edb)



latin small letter o with horn and grave (u 1edd)



latin small letter o with horn and hook above (u 1edf)



latin small letter o with horn and tilde (u 1ee1)



latin small letter o with horn and dot below (u 1ee3)



p

p

latin small letter p (u 0070)



q

q

latin small letter q (u 0071)



r

r

latin small letter r (u 0072)



ŕ

ŕ

latin small letter r with acute (u 0155)



ŗ

ŗ

latin small letter r with cedilla (u 0157)



ř

ř

latin small letter r with caron (u 0159)



s

s

latin small letter s (u 0073)



ś

ś

latin small letter s with acute (u 015b)



ŝ

ŝ

latin small letter s with circumflex (u 015d)



ş

ş

latin small letter s with cedilla (u 015f)



š

š

latin small letter s with caron (u 0161)



ș

ș

latin small letter s with comma below (u 0219)



t

t

latin small letter t (u 0074)



ţ

ţ

latin small letter t with cedilla (u 0163)



ť

ť

latin small letter t with caron (u 0165)



ț

ț

latin small letter t with comma below (u 021b)



u

u

latin small letter u (u 0075)



ù

ù

latin small letter u with grave (u 00f9)



ú

ú

latin small letter u with acute (u 00fa)



û

û

latin small letter u with circumflex (u 00fb)



ü

ü

latin small letter u with diaeresis (u 00fc)



ũ

ũ

latin small letter u with tilde (u 0169)



ū

ū

latin small letter u with macron (u 016b)



ŭ

ŭ

latin small letter u with breve (u 016d)



ů

ů

latin small letter u with ring above (u 016f)



ű

ű

latin small letter u with double acute (u 0171)



ų

ų

latin small letter u with ogonek (u 0173)



ư

ư

latin small letter u with horn (u 01b0)



latin small letter u with dot below (u 1ee5)



latin small letter u with hook above (u 1ee7)



latin small letter u with horn and acute (u 1ee9)



latin small letter u with horn and grave (u 1eeb)



latin small letter u with horn and hook above (u 1eed)



latin small letter u with horn and tilde (u 1eef)



latin small letter u with horn and dot below (u 1ef1)



v

v

latin small letter v (u 0076)



w

w

latin small letter w (u 0077)



ŵ

ŵ

latin small letter w with circumflex (u 0175)



latin small letter w with grave (u 1e81)



latin small letter w with acute (u 1e83)



latin small letter w with diaeresis (u 1e85)



x

x

latin small letter x (u 0078)



y

y

latin small letter y (u 0079)



ý

ý

latin small letter y with acute (u 00fd)



ÿ

ÿ

latin small letter y with diaeresis (u 00ff)



ŷ

ŷ

latin small letter y with circumflex (u 0177)



ȳ

ȳ

latin small letter y with macron (u 0233)



latin small letter y with grave (u 1ef3)



latin small letter y with dot below (u 1ef5)



latin small letter y with tilde (u 1ef9)



z

z

latin small letter z (u 007a)



ź

ź

latin small letter z with acute (u 017a)



ż

ż

latin small letter z with dot above (u 017c)



ž

ž

latin small letter z with caron (u 017e)



ß

ß

latin small letter sharp s (u 00df)



æ

æ

latin small letter ae (u 00e6)



ǽ

ǽ

latin small letter ae with acute (u 01fd)



ð

ð

latin small letter eth (u 00f0)



ø

ø

latin small letter o with stroke (u 00f8)



ǿ

ǿ

latin small letter o with stroke and acute (u 01ff)



þ

þ

latin small letter thorn (u 00fe)



đ

đ

latin small letter d with stroke (u 0111)



ħ

ħ

latin small letter h with stroke (u 0127)



ı

ı

latin small letter dotless i (u 0131)



ij

ij

latin small ligature ij (u 0133)



latin small ligature ij with acute (u e132)



ĸ

ĸ

latin small letter kra (u 0138)



ŀ

ŀ

latin small letter l with middle dot (u 0140)



ł

ł

latin small letter l with stroke (u 0142)



ʼn

ʼn

latin small letter n preceded by apostrophe (u 0149)



ŋ

ŋ

latin small letter eng (u 014b)



œ

œ

latin small ligature oe (u 0153)



ŧ

ŧ

latin small letter t with stroke (u 0167)



ƴ

ƴ

latin small letter y with hook (u 01b4)



dž

dž

latin small letter dz with caron (u 01c6)



lj

lj

latin small letter lj (u 01c9)



nj

nj

latin small letter nj (u 01cc)



ȷ

ȷ

latin small letter dotless j (u 0237)



ə

ə

latin small letter schwa (u 0259)



π

π

greek small letter pi (u 03c0)



Dž

Dž

latin capital letter d with small letter z with caron (u 01c5)



Lj

Lj

latin capital letter l with small letter j (u 01c8)



Nj

Nj

latin capital letter n with small letter j (u 01cb)



latin small ligature ff (u fb00)



latin small ligature fi (u fb01)



latin small ligature fl (u fb02)



latin small ligature ffi (u fb03)



latin small ligature ffl (u fb04)



ª

ª

feminine ordinal indicator (u 00aa)



º

º

masculine ordinal indicator (u 00ba)



0



1



2



3



4



5



6



7



8



9



superscript zero (u 2070)



¹



²



³

³

superscript three (u 00b3)



superscript four (u 2074)



superscript five (u 2075)





superscript seven (u 2077)



superscript eight (u 2078)



superscript nine (u 2079)























¼

¼

vulgar fraction one quarter (u 00bc)



½

½

vulgar fraction one half (u 00bd)



¾

¾

vulgar fraction three quarters (u 00be)



vulgar fraction one third (u 2153)



vulgar fraction two thirds (u 2154)



vulgar fraction one eighth (u 215b)



vulgar fraction three eighths (u 215c)



vulgar fraction five eighths (u 215d)



vulgar fraction seven eighths (u 215e)



_









(

(

left parenthesis (u 0028)



)

)

right parenthesis (u 0029)



[

[

left square bracket (u 005b)



]

]

right square bracket (u 005d)



{

{

left curly bracket (u 007b)



}

}

right curly bracket (u 007d)



mathematical left angle bracket (u 27e8)



mathematical right angle bracket (u 27e9)



#



%









left single quotation mark (u 2018)



right single quotation mark (u 2019)



left double quotation mark (u 201c)



right double quotation mark (u 201d)



single low-9 quotation mark (u 201a)



double low-9 quotation mark (u 201e)



ˌ

ˌ

modifier letter low vertical line (u 02cc)



single left-pointing angle quotation mark (u 2039)



single right-pointing angle quotation mark (u 203a)



«

«

left-pointing double angle quotation mark (u 00ab)



»

»

right-pointing double angle quotation mark (u 00bb)



*







.



,



:



;



horizontal ellipsis (u 2026)



!

!

exclamation mark (u 0021)



¡

¡

inverted exclamation mark (u 00a1)



?



¿

¿

inverted question mark (u 00bf)



/






|



¦



&



§









·














±



÷



×

×

multiplication sign (u 00d7)



=



<


>

>

greater-than sign (u 003e)



less-than or equal to (u 2264)



greater-than or equal to (u 2265)







¬



partial differential (u 2202)





















$



¢



£



¤



¥



฿

฿

thai currency symbol baht (u 0e3f)

















ƒ

ƒ

latin small letter f with hook (u 0192)





















^

^

circumflex accent (u 005e)



~



´



`



˝

˝

double acute accent (u 02dd)



ˆ

ˆ

modifier letter circumflex accent (u 02c6)



ˇ



˘



˜



¯



¨



˙



˚



¸



˛



ʹ

ʹ

modifier letter prime (u 02b9)



ʺ

ʺ

modifier letter double prime (u 02ba)



ʻ

ʻ

modifier letter turned comma (u 02bb)



ʾ

ʾ

modifier letter right half ring (u 02be)



ʿ

ʿ

modifier letter left half ring (u 02bf)



ˈ

ˈ

modifier letter vertical line (u 02c8)



ˉ

ˉ

modifier letter macron (u 02c9)



ˊ

ˊ

modifier letter acute accent (u 02ca)



ˋ

ˋ

modifier letter grave accent (u 02cb)



©



®





°



estimated symbol (u 212e)







black up-pointing triangle (u 25b2)



white up-pointing triangle (u 25b3)



black right-pointing triangle (u 25b6)



white right-pointing triangle (u 25b7)



black down-pointing triangle (u 25bc)



white down-pointing triangle (u 25bd)



black left-pointing triangle (u 25c0)



white left-pointing triangle (u 25c1)







black heart suit (u 2665)



white heart suit (u 2661)







rightwards arrow (u 2192)





north west arrow (u 2196)



north east arrow (u 2197)



south east arrow (u 2198)



south west arrow (u 2199)





left right arrow (u 2194)





@

variable-color-fonts,-how-do-they-work?

Variable color fonts: How do they work?

A tiny guide to Variable Color Fonts

Variable color fonts, how do they work? What can you do with them? Are they going to change the web? Well I don’t know all answers, but I’ll give you an initiation. I hope this tiny guide, combined with links to pieces written by people much smarter than me, will clear up some things!

As variable color fonts are fairly new, there is much to explore. What are the limits, how do browsers handle them? And as fonts can become much more than just letters, the adventure doesn’t end at the ‘A to Z’. So scroll along, and if you want to give it a go yourself, at the end you find an asset pack which includes font files and an example webpage!

Need some inspiration?

Have a look at my Variable Color Font Experiments

Want to create typefaces? Glyphs offers a free trail and many tutorials:

www.glyphsapp.com

Letters or Illustrations

About fonts

In basic terms, fonts are little else than vector drawings, drawn on small artboards, each assigned to unicodes (universal markers). It’s this which allows you to type a letter with your keyboard! Of course there are other things included in a font such as the spacing, but it’s the vectors that makes it exciting. This way a typeface can be scaled indefinitely, but it also allows you to draw anything you would like!

So drawing the paths, I created illustrations instead of letters, which made the perfect subjects for variable color font experiments.

Variable fonts and illustrations

About variable fonts

To be able to transform, variable fonts use a method called interpolation, which automatically creates new instances of a letter between two existing drawings. For this, both drawings have to consist of exactly the same amount of points and handles, as you can’t interpolate into the void!

Normally, the designer chooses a certain weight or position to interpolate into a final (static) design, but with a variable font, this interpolation becomes fluid, which the user can adjust. With a variable font both you will be able to change shape in static and dynamic media, opening up possibilities for dynamic typography.

Rainer Erich Scheichelbauer has written an step-by-step tutorial on how to use Glyphs to create variable fonts:

Learn how to make variable fonts using Glyphs

Color fonts

About color fonts

Color fonts merge layers into a single font file, and allows you to assign a color to each layer. There are various techniques and formats for color fonts, as each operating systems and brower has a preference. But for a variable color font, Microsoft’s CPAL/COLR system is required, as the other formats are incompatible with the interpolation. You can tweak each color layer, giving them the RGB value you would like and even assign alpha values. One of the most useful things is the ability for layers to overlay, allowing you to mask elements of the illustration/letter.

Rainer Erich Scheichelbauer has written an step-by-step tutorial on how to use Glyphs to create CPAL/COLR color fonts:

Learn how to make color fonts using Glyphs

Combining variable and color fonts

Combining variables and color

With your variable font transformed to CPAL/COLR layers, You can assign your variables to an axis (such as width, weight, or your own invention), and can add a value to these axis, allowing you to have control over each transformation, up to the decimal.

Now you just have to export it! Glyphs can’t export variable color fonts into webfonts, so you will have to export it as a normal variable font first, and afterwards convert it into a WOFF2 file. For this you can use one of the many online converters.

Variable color fonts on the web

Letting your browser do the moving

Only usable (currently) for the web, variable color fonts can be added to on your pages with just a few lines of css and a woff2 font file. Compared to SVG’s, variable color fonts allow little customisation, but are easier to implement. When loaded on your page as a variable font, you are able to animate the font, or use other input, such as browser size, microphone, camera or gyroscope to adjust the variables.

Want to animate variable fonts in your browser? The Etcetera Type Company has made an excellent tutorial:

Learn how to use CSS to animate your variable fonts

Want to find out how variable fonts can interact with your browser? Mandy Michael has made many great experiments and open codepens:

View examples & code on how to make your variable font interactive

Variable color font support

Variable color fonts and browsers

Not all browsers support variable color fonts in the same way: Some may render the characters incomplete, or create a pixelized preview. Currently Safari has the best support, keeping the visuals sharp while also allowing it to animate without errors. (other known browser errors include visual cut-offs or not loading the font’s color palette).

While color fonts and variable fonts are supported by program’s such as Adobe Illustrator and Photoshop, variable color fonts are not. These programs will only show a placeholder character when loaded. Although this character will be variable, the color table will be inactive.

Variable fonts trucks

What the future will bring

The tech is new, the adventure big! The surface of what’s possible hasn’t been scraped yet, so let’s continue this adventure together! Have a go with the asset pack, and hope this condensed writeup was of help! If you have questions, feel free to reach out by mail, or contact me on twitter.

For a look under the hood

Download the assets for my variable color present

And of course some thanks

I would have never been able to make headway into the world of Variable Color Fonts without the great tutorials by Rainer Erich Scheichelbauer.

And my Variable Color Fonts would never have seen any real use if it wasn’t for Mandy Michael’s cool experiments, which showcase variable fonts interacting with browsers, and other output/input.

variable-fonts-&-the-new-google-fonts-api

While I was at ATypI Tokyo a couple weeks ago, Google had some big announcements (I covered those a bit last week). The new version of their API was particularly great to hear, as this marks the first support for using variable fonts on their platform. It’s a small set of typefaces, but there is some nice variety and what they have is really well done. There are 10 typefaces in all, with a selection of serifs, sans, rounded, slab, and monospace. Two of the serifs have italics as well, making them an interesting experiment for body copy usage. I created an example page that we played around with a bit in my workshop last week, and included it live in my talk, both at Web Unleashed in Toronto.

Sample page in CodePen
A sample page on CodePen loading Hepta Slab and Crimson Pro as variable fonts from Google Fonts’ new API

I’ve now created a demo on CodePen as well, and will walk through the setup here with a few examples. As the launch announcement page states, the syntax is pretty strict, but it didn’t take long to get up and running with it, and now it’s feeling pretty snappy.

Examples of available variable fonts
Here are all the different variable fonts you can play with for now

In going through the announcement it’s clear that this will eventually be how all the fonts are served, not just specifically variable fonts. You can still request a single weight of a font, like so:

https://fonts.googleapis.com/css2?family=Roboto:wght@700

You can see that the font-family attribute/value pair is the same, but the way you specify weight and italic is a little different. Here’s the current syntax:

/css?family=Roboto:700

You’ll note that whereas the original syntax just expected a weight value (in this case 700) after the family name, now you’re specifying ‘wght’ and supplying a value. This is so when requisition a variable font, it’s now possible to specify an axis (or more than one), and then supply a second set of values after the ‘@’ sign. Multiple weights can be requested too:

/css2?family=Roboto:wght@400;700

Note that the weight values are listed after the ‘@’ sign separated by semicolons. If you wanted to add italics, you have to specify each combination:

/css2?family=Roboto:ital,wght@0,100;1,100;1,700

This will get you Italic and weight combinations of ‘upright 100’, ‘Italic 100’, and ‘Italic 700’.

Now for the variable fonts. To get Crimson Pro with a weight axis (with a range of 200 to 900), you would request it like this:

/css2?family=Crimson Pro:wght@200..900

Note that this time the values after the ‘@’ sign are separated by ‘..’ which indicates that this is a range, not two separate values. When requesting Italics as well as upright, you have to indicate the axes and ranges requested for each:

/css2?family=Crimson Pro:ital,wght@0,200..900;1,200..900

Or just Italics with weight range:

/css2?family=Crimson Pro:ital,wght@1,200..900

You can either link to the request from the ‘head’ of your HTML page, or ‘@import’ from within your CSS.

The whole thing looks like this:

Or:

@import url('https://fonts.googleapis.com/css2?family=Crimson Pro:ital,wght@ 0,200..900;1,200..900&display=swap');

You can then work with the fonts just as you would if you were self-hosting, and be confident that the family grouping will be working properly as well.

p {
  font-family: ‘Crimson Pro’, Georgia, serif;
  font-weight: 350;
}

Thus, with the code above any text in a paragraph would be set in Crimson Pro, and bold would be properly bold, and Italic actual Italics.

Sample page using variable fonts from Google Fonts
The sample page shows a nice range of weights in the Hepta Slab-set headings, and regular and a slightly bolded italic in Crimson Pro

Have a play around with the demo, and try swapping in some of the other fonts they have available. Don’t forget to send a tweet to the @GoogleFonts team and let them know you’re interested. Public support goes a long way. And if you spot any issues, you can log them over on GitHub.

Until next time, happy varying 🙂

Resources

variable-fonts-link-dump!

There’s been a ton of great stuff flying around about variable fonts lately (our tag has loads of stuff as well). I thought I’d round up all the new stuff I hadn’t seen before.

  • Google fonts has a beta of hosted variable fonts and the announcement demo is on CodePen.
  • Speaking of Google Fonts, Recursive is pretty lovely and will be coming to Google Fonts. It even has a little playground for its variable possibilities.
  • The annual release of the new default WordPress theme (“TwentyTwenty”) will be done by Anders Norén. It’ll be a rejigger of Chaplin and be all ready to have cool Gutenberg blocks. The font will be Inter, which is lovely and, of course, a variable font. The screenshots look great.
  • Here’ a nice demo of a slider UI where the active slide has beefy thick font that animates to a thin variant on non-active slides. I still love the look of animating font weight, like this Marvin Visions site and Michelle Barker’s Breathing.
  • There is something about variable fonts that gets people in a weird mood (just look at Mandy Michael’s demos). But usually, the experiments are still typographic in nature. Not so with Typearture, where the demos are planes and cars and trucks and pigs and all sorts of weird stuff that is blowing minds. Like this galloping horse!
  • Remember that Wakamai Fondue (the best name ever for a site) is great at unearthing the technical possibilities of a variable font.
  • Visual demo of variable fonts interpolated in WebGL.
  • Grammato has a pretty bold proclamation of being a next-generation of typography. Not handwritten or a handwriting-font, but a handwriting-esque font that leverages variables fonts to somehow do its thing. Not sure I totally get it, but the site is nice.
  • Saved the most fun font for last: This Man This Monster from COMICRAFT is super cool looking and has unusual variable font variables: Bite, Chew, and Wonk (as opposed to the normal stuff you see, like weight and slant).
lexend-–-a-variable-font-designed-for-reading

As prescription eyeglasses achieve proficiency for persons with short-sightedness, Lexend employs variable font technology to prescribe a personalized axis setting according to the Shaver-Troup Formulations.

The word is the condition for reading. The word consists of both white and black forms in rhythm units. If the rhythm is weak; the word is poorly formed. If the rhythm is absent; there is no word. Reading is a spatial manner of intervals in both length and breadth…. Ignoring the white by pedagogy places civilization at risk. What is civilization if not the cultural community dependent on reading?

Excerpts from “The Stroke” by Gerrit Noordzij
Source • Retrieved 30 August 2017

My name is Commander Smith and the spaceship that I command has been exploring the planet known as Earth for almost a year. We have discovered that Earth is very different from our planet. Our next job was to explore the states of Texas, New Mexico, Arizona, and Nevada. These states make up the Southwest region.

First, we had to backtrack a little and fly east to Texas. This is a huge state— the map showed that it was more than seven hundred miles wide. Later we found out that Texas is the second largest state in size, after Alaska. It is also the second largest state in population, after California. We certainly saw a lot of really big things in Texas— big cities, big oil fields, and big ranches. In fact, we found out that there is a ranch in Texas that is bigger than the whole state of Rhode Island! Texas raises more cattle than any other state. The cowboy, a person who takes care of the cattle, is a symbol of Texas. In the late 1800s, Texas cowboys drove the cattle hundreds of miles to market in the northern states.

It was hard, dangerous, adventurous work, so many people thought of cowboys as heroes. Over time, the cattle ranches changed so that there was less need for cowboys. Today, there are not as many cowboys in

Texas. There are, however, many Texans who still dress like cowboys. They wear cowboy boots and a kind of tall cowboy hat they call a ten- gallon- hat because it looks as if it could hold that much water. Another symbol of Texas is the oil well. Texas produces more oil than any other state. Oil was first discovered near the city of Houston in the early 1900s.

Today, Houston is the largest city in Texas. The American space program has one of its largest workplaces there. One man told us that Houston was the first word spoken on the moon. He explained that when an American became the first human to land on the moon on July 20, 1969. The first thing he did was radio back to Houston. The United States was the first manned mission to land on the Moon. There have been six manned U. S. landings and numerous unmanned landings. To date, the United States is the only country to have successfully conducted manned missions to the Moon, with the last one in December 1972.

Time to read0ms

Words read0

Errors0

Words Correct per Minute0

WCPM

Reading-Proficiency is measured in fluency.

There is a consensus that reading fluency is one of the defining characteristics of good readers, and a lack of fluency is a common characteristic of poor readers.

Differences in reading fluency not only distinguish good readers from poor, but a lack of reading fluency is also a reliable predictor of reading comprehension problems. Once struggling readers learn sound-symbol relationships through intervention and become accurate decoders, their lack of fluency emerges as the next hurdle they face on their way to reading proficiency.

This lack of fluent reading is a problem for poor readers because they tend to read in a labored, disconnected fashion with a focus on decoding at the word level that makes comprehension of the text difficult, if not impossible.

Source

Fluency is measured in Words Correct Per Minute.

A student reads a story with 409 words in 1m 24s. She made 0 errors. To determine WCPM (Words Correct Per Minute):

  1. Count the total number of words.

    409 words
  2. Count the number of mistakes.

    0 mistakes
  3. Take the number of words minus the number of mistakes = number of words read correctly.

    409 words - 0 mistakes = 409 correct words
  4. Convert the time it took to read the passage to seconds.

    1m 24s to read = 84s
  5. Convert the number of seconds to a decimal by dividing the number of seconds by 60. This is the total reading time.

    84s / 60 = 1.4 total reading time
  6. Divide the number of words read correctly by the total reading time in decimal form.

    409 / 1.4 = 292 Words Correct per Minute (WCPM)

The Shaver-Troup Formulations

As an Educational Therapist, Dr. Bonnie Shaver-Troup observed that reading issues masked the individual’s true capability and intelligence. Shaver-Troup theorized that these issues were a sensitivity to typographical factors. She began manipulating multiple text factors to find a match between text format and an individual’s optimized visual processing capabilities.

In clinical practice with both children and adults, Dr. Shaver-Troup used a fluency test to measure the effectiveness of the solution. Test results supported her theory; making the modifications to typography allowed the reader to instantaneously improve Words Correct per Minute (WCPM) scores, which research correlates to increased comprehension.

The Shaver-Troup Formulations Examined

Three factors were manipulated in increasing intensity. These factors were:

  • Hyper expansion of character spacing
  • Expanded font-outline shapes
  • Sans-serif font to reduce noise

The Demonstration of Effectiveness

20 third graders, eight males and twelve females, read for one minute in five fonts.

All text was set at 16pt and the reading materials were two grade levels above the participants current grade level to ensure the typography was being measured, rather than reading competency.

Each student read out loud a passage set in a control of Times New Roman, then four of the Lexend Series — Regular, Deca, Mega, and Giga.

regular
deca
mega
giga

My name is Commander Smith and the spaceship that I command has been exploring the planet known as Earth for almost a year. We have discovered that Earth is very different from our planet. Our next job was to explore the states of Texas, New Mexico, Arizona, and Nevada. These states make up the Southwest region.

First, we had to backtrack a little and fly east to Texas. This is a huge state— the map showed that it was more than seven hundred miles wide. Later we found out that Texas is the second largest state in size, after Alaska. It is also the second largest state in population, after California. We certainly saw a lot of really big things in Texas— big cities, big oil fields, and big ranches. In fact, we found out that there is a ranch in Texas that is bigger than the whole state of Rhode Island! Texas raises more cattle than any other state. The cowboy, a person who takes care of the cattle, is a symbol of Texas. In the late 1800s, Texas cowboys drove the cattle hundreds of miles to market in the northern states.

It was hard, dangerous, adventurous work, so many people thought of cowboys as heroes. Over time, the cattle ranches changed so that there was less need for cowboys. Today, there are not as many cowboys in

Texas. There are, however, many Texans who still dress like cowboys. They wear cowboy boots and a kind of tall cowboy hat they call a ten- gallon- hat because it looks as if it could hold that much water. Another symbol of Texas is the oil well. Texas produces more oil than any other state. Oil was first discovered near the city of Houston in the early 1900s.

Today, Houston is the largest city in Texas. The American space program has one of its largest workplaces there. One man told us that Houston was the first word spoken on the moon. He explained that when an American became the first human to land on the moon on July 20, 1969. The first thing he did was radio back to Houston. The United States was the first manned mission to land on the Moon. There have been six manned U. S. landings and numerous unmanned landings. To date, the United States is the only country to have successfully conducted manned missions to the Moon, with the last one in December 1972.

Time to read0ms

Words read0

Errors0

Words Correct per Minute0

WCPM

The p value in this experiment (0.014) says the chance of the results presented happening by random was 1.4%. In statistics, a result is considered significant if it’s below 5%.

00/00

had better scores with Lexend over Times New Roman

0

had the best score with Times New Roman

0

had the best score with Lexend Regular

0

had the best score with Lexend Deca

0

had the best score with Lexend Mega

0

had the best score with Lexend Giga

000

Avg WCPM for Times New Roman

00.0

Avg Improvement in WCPM

A Virtue of Variable Font Technology

As the study demonstrates, while the Lexend series were beneficial to a large sample of students, no one setting worked best for all students. Diverse readers need different axis settings like people require different eyeglass prescriptions.

Eyeglass prescriptions are not six strict settings. There are more granular settings possible.

Variable font technology allows for continuous selection of the Lexend Series to find the specific setting for an individual student.

My name is Commander Smith and the spaceship that I command has been exploring the planet known as Earth for almost a year. We have discovered that Earth is very different from our planet. Our next job was to explore the states of Texas, New Mexico, Arizona, and Nevada. These states make up the Southwest region.

First, we had to backtrack a little and fly east to Texas. This is a huge state— the map showed that it was more than seven hundred miles wide. Later we found out that Texas is the second largest state in size, after Alaska. It is also the second largest state in population, after California. We certainly saw a lot of really big things in Texas— big cities, big oil fields, and big ranches. In fact, we found out that there is a ranch in Texas that is bigger than the whole state of Rhode Island! Texas raises more cattle than any other state. The cowboy, a person who takes care of the cattle, is a symbol of Texas. In the late 1800s, Texas cowboys drove the cattle hundreds of miles to market in the northern states.

It was hard, dangerous, adventurous work, so many people thought of cowboys as heroes. Over time, the cattle ranches changed so that there was less need for cowboys. Today, there are not as many cowboys in

Texas. There are, however, many Texans who still dress like cowboys. They wear cowboy boots and a kind of tall cowboy hat they call a ten- gallon- hat because it looks as if it could hold that much water. Another symbol of Texas is the oil well. Texas produces more oil than any other state. Oil was first discovered near the city of Houston in the early 1900s.

Today, Houston is the largest city in Texas. The American space program has one of its largest workplaces there. One man told us that Houston was the first word spoken on the moon. He explained that when an American became the first human to land on the moon on July 20, 1969. The first thing he did was radio back to Houston. The United States was the first manned mission to land on the Moon. There have been six manned U. S. landings and numerous unmanned landings. To date, the United States is the only country to have successfully conducted manned missions to the Moon, with the last one in December 1972.

Time to read0ms

Words read0

Errors0

Words Correct per Minute0

WCPM

At the end of the 2018 project, Thomas identified research by Dr. Nadine Chahine on reading proficiency in Arabic. The conclusion and implication of her research support the reasonable proposal to apply the Shaver-Troup Formulation into an Arabic variable font.

Aspects of hyper-extension are already familiar in Arabic. The lengthening of text for justification is named kashida which can aid in legibility:

The kashida is used to give a better character layout on the baseline, and to lessen the cluttering at the joint point between two successive letters of the same word

Mohamed Jamal Eddine Benatia,Mohamed Elyaakoubi and Azzeddine Lazrek Source

Working with Dr. Chahine and financial support from Google, the Lexend team wishes to investigate if the Shaver-Troup Formulations applied to the Arabic script has the same beneficial fluency properties as we have demonstrated in the Latin script. If proven true, the implications are the following:

  • A richer understanding of human perception that is cross-cultural in scope
  • Demonstration of evidence-based design practices in regard to legibility
  • A contribution to expanding reading-proficiency around the world
h1, p { font-variation-settings: 'LXND' 100; }
An illustration of potential for using this concept for Arabic typography

Stay Connected

For updates when Lexend will be available on Google Fonts, news on original research, and to contribute, sign up to Thomas Jockin’s Lexend newsletter.

variable-font-animation-with-css-and-splitting-js

A little while ago I made an animated variable font demo on Codepen. In this article I’ll explain what variable fonts are, how they can be animated with CSS, and how I created a breathing effect with CSS and a little bit of Javascript.

Introducing variable fonts

Variable fonts are exciting new development in web typography. Instead of multiple font files to load different variants of a particular font, variable fonts allow us to load all of the variations from a single file. In most cases this is a big performance win (although the file tends to be larger than a regular font file on its own, so it’s best to only use a variable font if you actually need it).

One font, many variations

Instead of a handful of font weights that are only available in multiples of 100 (e.g. font-weight: 600), variable fonts provide a range of values, all from a single file. The weight can be varied anywhere within that range. So font-weight: 372 is perfectly valid!

Axes of variation

Weight is just one of the axes of variation (although probably the most common one). Variable fonts can come with different axes too. There are a number of registered axes, which correspond to a four-letter tag:

  • weight (wght)
  • width (wdth)
  • italic (ital)
  • slant (slnt)
  • optical size (opsz)

These correspond to CSS properties and values:

  • font-weight
  • font-stretch
  • font-style
  • font-style
  • font-optical-sizing

Not all variable fonts contain all of these axes of variation. Many contain just one or two.

They can also be accessed using the font-variation-settings property. This property enables us to not only adjust the standard axes, but custom axes as well. So font-weight could be specified in two ways:

or

font-variation-settings: 'wght' 372;

Custom axes

Custom axes provide the type designer with infinite scope for creativity! A custom axis of variation could be literally anything – some, like x-height, might be fairly common for a typeface, but there are many more creative possibilities.

Custom axes can be accessed with the font-variation-settings property but, unline standard axes, their four-letter tag name must be uppercase. The variable font Movement by NM Type provides a custom axis called space, which controls the curvture of the letterforms.

font-variation-settings: 'wght' 200, 'SPAC' 118;

Try playing around with the different axes in this demo:

Animating a variable font with CSS

font-variation-settings is animatable, and because it covers a range of values rather than increments of 100, we can get some really nice effects with simple CSS transitions or keyframe animations. The font IBM Plex Sans has two axes of variation: weight and width. The following code sets a 1s looping animation of both axes:

h1 {
	font-variation-settings: 'wght' 100, 'wdth' 85;
	animation: breathe 4000ms infinite forwards;
}

@keyframes breathe {
	60% {
		font-variation-settings: 'wght' 700, 'wdth' 100;
	}

	100% {
		font-variation-settings: 'wght' 100, 'wdth' 85;
	}
}

This gives the effect of our text breathing in and out!

Alternatively, this could be a nice hover effect with a transition instead of an animation.

Staggering the animation

Instead of our entire text animating at the same rate, it might be nice to have our letterforms animate in sequence. We could wrap each letter of our text in a and set a animation-delay on each one:

<h1>
	<span>Bspan>
	<span>rspan>
	<span>espan>
	<span>aspan>
	<span>tspan>
	<span>hspan>
	<span>ispan>
	<span>nspan>
	<span>gspan>
h1>
h1 span:nth-child(2) {
	animation-delay: 400ms;
}

h1 span:nth-child(3) {
	animation-delay: 800ms;
}

h1 span:nth-child(4) {
	animation-delay: 1200ms;
}

This would be a bit laborious to write (although we could use Sass to help us), and it wouldn’t be very maintainable if we decided to change our text content at a later date.

But if we don’t mind using just a little bit of Javascript, there’s a great library called Splitting.js that is perfect for this!

Splitting

Splitting’s primary use case is for animating text, although it’s also possible to split grids and layouts for some cool effects. To use it we need to include the library in our project, then set a data-splitting attribute on the element we’d like to animate:

<h1 data-splitting>Breathingh1>

Now the JS we need to write is very simple:

Splitting then splits our text element into a series of s, each with a class, a data-attribute and a custom property definition with a value of the character index, which we can then access in our CSS:

<span class="word" data-word="Breathing" style="--word-index:0;">
	<span class="char" data-char="B" style="--char-index:0;">Bspan>
	<span class="char" data-char="r" style="--char-index:1;">rspan>
	<span class="char" data-char="e" style="--char-index:2;">espan>
	<span class="char" data-char="a" style="--char-index:3;">aspan>
	<span class="char" data-char="t" style="--char-index:4;">tspan>
	<span class="char" data-char="h" style="--char-index:5;">hspan>
	<span class="char" data-char="i" style="--char-index:6;">ispan>
	<span class="char" data-char="n" style="--char-index:7;">nspan>
	<span class="char" data-char="g" style="--char-index:8;">gspan>
span>

In order to create a sequential animation, we can use calc() to calculate the animation-delay value for each letter from the custom property:

h1 .char {
	--delay: calc((var(--char-index)   1) * 400ms);
	animation: breathe 4000ms infinite both;
	animation-delay: var(--delay);
}

That massively cuts down on the CSS we need to write, and means that we could change the text later on and still have our animation work perfectly!

Resources

MDN’s Variable Fonts Guide

MDN’s guide is a great resource for learning about variable fonts and how to use them

V-Fonts

V-Fonts is a listing of hundreds of variable fonts, including their variations axes and where to find them. It includes a mixture of paid and free/open source fonts, and is a great place to find samples for using in demos if you don’t want to fork out big bucks just yet.

Axis-Praxis

Axis-Praxis is a playground for experimenting with variable fonts and understanding some of the creative possibilities. It includes some really interesting and creative samples!

VariableFonts.dev

Variablefonts.dev is a project by Mandy Michael, who is well-known in the CSS world for creating awe-inspiring demos with variable fonts and speaking about them all over the world.

currentcolor-(a-css-variable-before-css-variables-were-cool)

CSS variables are becoming a standard, with more than 90% of currently used browsers supporting it out of the box. Before CSS variables, there was a CSS value that shared some common ground as CSS variables, called currentColor.

.message--danger {
    border: 5px solid currentColor;
    color: red;
}

So, how does currentColor work? Basically, an element that has CSS property with currentColor value inherits the value of the color property (of the same element). Basically, the computed value of color will be applied as a value of currentColor.

This value can be applied to the following CSS properties: borders, outlines, box shadows, and backgrounds.

This is useful when borders, shadows, outlines or background share the same color value. It’s great for keeping your code DRY in cases where other properties like background, borders, outline, etc. need to have the same color as text.

In this example, we simply change the color in the BEM modifier classes and this changes text color, background color of the box to the left and border color.

A bit more than 98% of globally used browsers support this CSS value. More info here: https://caniuse.com/#search=currentColor

Thank you for taking the time to read this post. If you’ve found this useful, please give it a ❤️ or 🦄, share and comment.

Now reaching over 3 million visitors per month, DEV is the fastest growing software development community in the world.

It’s free, open source, devoted to the open web, and will never have popups or a pay wall.

Get Started Now