Motion
Typography that exists outside the module system can be animated using the color system.
Lines or phrases scroll along the Y-axis. The baseline of the lines informs the distance in which the text moves. Color adjusts as the hierarchy of text changes.
Typography
Typography that exists outside the module system can be animated using the color system.
Lines or phrases scroll along the Y-axis. The baseline of the lines informs the distance in which the text moves. Color adjusts as the hierarchy of text changes.
Typography is organized using the color system. As the text scrolls on the Y-axis, the color of the text adjusts accordingly.
Back to top
Uppercase
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Lowercase
abcdefghijklmnopqrstuvwxyz
Numerals
1234567890
Accented Uppercase
ÀÁÂÃÄĀĂÅǺĄÆǼĆĈČĊÇĎĐÐÈÉÊĚËĒĔĖĘĜĞĠĢĤĦÌÍÎĨÏĪĬİĮIJĴĶĹĽĻŁĿŃŇÑŅŊÒÓÔÕÖŌŎŐØǾŒÞŔŘŖŜŠŚŞȘẞŤȚŢŦÙÚÛŨÜŪŬŮŰŲẀẂŴẄỲÝŶŸŹŽŻ
Accented Lowercase
àáâãäāăåǻąæǽćĉčċçďđðèéêěëēĕėęĝğġģĥħìíîĩïīĭıįijĵȷķĺľļłŀńňñņŋòóôõöōŏőøǿœþŕřŗśŝšşșßťțţŧùúûũüūŭůűųẁẃŵẅỳýŷÿźžż
Punctuation
(¡¿!?.:,;…)[&&@#]{-–—|¦·}‹›«»‘’“”‚„'"•/\
Numerators, Denomerators
12345678901234567890
Symbols
&%‰©℗®™°§¶*†‡#№
Mathematical Symbols
+−±×÷=≠≈<>≤≥¬∞~^µ∫Ωπ∂∆∏∑√◊
Currencies
$¢£¥€ƒ¤
Arrows
←→↑↓↖↗↘↙
Fractions
¼½¾⅓⅔⅛⅜⅝⅞
Headlines
Plain Medium
Plain Medium
Lorem ipsum
Dolor sit amet
Consectetur
Dolor sit amet
Consectetur
Subheaders, Short Paragraphs
Plain Medium
Plain Medium
Lorem ipsum dolor sit amet, consect vedriam consectetur adipiscing intus elit, Vevo dolor eiusmod tempor Vevo incididunt ut labor et dolore.
Body Copy Above 14px
Plain Medium
Plain Medium
Ut optus illam, oditem et et dolorec tempore pudant minti bea sumquia Vevo qua tiorumquos doluptatur alit, in rerovid esedis mo omnit, esequia qui cusaecto do dolum, quam hillore coreseque conestiis Vevo. Olor aut ea qui re velitibus aspedis secearum id mo ium evelitatio. Ut optus illam, oditem et et dolorec tempore atlas pudant minti bea sumquia tiorumquos doluptatur alit, in rerovid esedis mo omnit, esequia qui cusaecto dolum, quam hillore coreseque conestiis Vevo. Olor aut ea qui re velitibus aspedis secearum eiusmod tempor.
Body Copy Below 14px
Plain Regular
Plain Regular
Ut optus illam, oditem et et dolorec tempore pudant om bea sumquia tiorumquos doluptatur alit, in rerovid esedis mo omnit, esequia qui cusaecto dolum, quam doluptatur coreseque conestiis Vevo. Olor aut ea qui re velitibus qua aspedis secearum id mo ium evelitatio.
Ut optus illam, oditem et et dolorec tempore pudant om bea sumquia tiorumquos doluptatur alit, in rerovid esedis mo omnit, esequia qui cusaecto dolum, quam doluptatur coreseque conestiis Vevo. Olor aut ea qui re velitibus qua aspedis secearum id mo ium evelitatio.
Too Tight
Tracking -9%
Tracking -9%
Too Loose
Tracking -3%
Tracking -3%
Just Right
Tracking -6%
Tracking -6%
Before
After
Incorrect Spacing
80/100/133
80/100/133
Correct Spacing
65/85/100
65/85/100
Too Tight
Leading 22/25
Leading 22/25
Too Loose
Leading 22/31
Leading 22/31
Just Right
Leading 22/27
Leading 22/27
Size 120px
Leading 108px
Tracking -5%
This is a title example.
Size 48px
Leading 48px
Tracking -4%
This is a subtitle example.
Size 18px
Leading 21px
Tracking -2%
This is a body copy example, lorem elit adipiscing elit, sed do eius mod tempor incididunt ut labore et dolore magna qua aliqua. Ut enim ad minim veniamquis ex nostrud exercitation ullamco.
Size 14px
Leading 17px
Tracking -1%
This is a small copy example, lorem elit adipiscing elit, sed do eius mod tempor incididunt ut labore et dolore magna qua aliqua. Ut enim ad minim veniamquis ex nostrud exercitation ullamco.
Streaming 24/7 on
a screen near you
a screen near you