Beautiful Web Type

Roboto

Thin

Italic

100

Extra Light

Italic

200

Light

Italic

300

Regular

Italic

400

Medium

Italic

500

Semi Bold

Italic

600

Bold

Italic

700

Extra Bold

Italic

800

Black

Italic

900

Characters

Aa
Bb
Cc
Dd
Ee
Ff
Gg
Hh
Ii
Jj
Kk
Ll
Mm
Nn
Oo
Pp
Qq
Rr
Ss
Tt
Uu
Vv
Ww
Xx
Yy
Zz
Åå
Ææ
Çç
Éé
Øø
Ññ
Üü
Žž
1234567890
‘¿?’
“!”
- – —
(&)
[*]
{@}
€£¥$¢
:;,.
<>+÷×=

Roboto 3 Classic brings Christian Robertson’s Android system typeface into a variable format while preserving its established design. The core family dates to Robertson’s 2011 release and his substantial 2014 revision for Material Design. Developed with Type Network, the variable project began with a conservative objective: match the metrics and appearance of the static v2.136 fonts. Unlike the broader parametric exploration of Roboto Flex, Classic concentrates on continuity, allowing existing layouts to retain their proportions while gaining continuous control over weight and width.

The face retains Robertson’s combination of mechanical structure and rounded forms. Flattened outer curves give letters a firm vertical posture, while relatively open apertures and varied character widths keep the rhythm from becoming strictly geometric. The Thin, Regular, and Bold masters were adjusted for compatible interpolation, supporting a continuous weight range from 100 to 900 and widths from Condensed to Normal, with companion italic styles. Screen rendering was also a central concern: Mike Duggan developed TrueType hinting in Microsoft VTT, and the project supplies variants with hinting and vertical metrics adapted for Windows, Android, ChromeOS, and web use.

Roboto suits software menus, mobile navigation, dashboards, technical documentation, and responsive layouts that need a broad hierarchy within a consistent family. Its width range helps accommodate compact headings and constrained columns, while the familiar letterforms give everyday controls an unobtrusive presence. Classic is particularly useful where continuity with the established Roboto design matters alongside the flexibility of a variable font.

Words

Questography

difficult waffles

Havana Plywood

Château d’Yquem

Högertrafikomläggningen

hamburgevontpids

Headlines

Thin · 100

Brawny gods just flocked up to quiz and vex him

Thin Italic · 100

Brawny gods just flocked up to quiz and vex him

Thin Small Caps · 100

Brawny gods just flocked up to quiz and vex him

Extra Light · 200

Amazingly few discotheques provide jukeboxes

Extra Light Italic · 200

Amazingly few discotheques provide jukeboxes

Extra Light Small Caps · 200

Amazingly few discotheques provide jukeboxes

Light · 300

Why shouldn’t a quixotic Kazakh vampire jog barefoot?

Light Italic · 300

Why shouldn’t a quixotic Kazakh vampire jog barefoot?

Light Small Caps · 300

Why shouldn’t a quixotic Kazakh vampire jog barefoot?

Regular · 400

Grumpy wizards make a toxic brew for the jovial queen

Regular Italic · 400

Grumpy wizards make a toxic brew for the jovial queen

Regular Small Caps · 400

Grumpy wizards make a toxic brew for the jovial queen

Medium · 500

Jackie will budget for the most expensive zoology equipment

Medium Italic · 500

Jackie will budget for the most expensive zoology equipment

Medium Small Caps · 500

Jackie will budget for the most expensive zoology equipment

Semi Bold · 600

Monsieur Jack, vous dactylographiez bien mieux que votre ami Wolf

Semi Bold Italic · 600

Monsieur Jack, vous dactylographiez bien mieux que votre ami Wolf

Semi Bold Small Caps · 600

Monsieur Jack, vous dactylographiez bien mieux que votre ami Wolf

Bold · 700

Jeg begynte å fortære en sandwich mens jeg kjørte taxi på vei til quiz

Bold Italic · 700

Jeg begynte å fortære en sandwich mens jeg kjørte taxi på vei til quiz

Bold Small Caps · 700

Jeg begynte å fortære en sandwich mens jeg kjørte taxi på vei til quiz

Extra Bold · 800

Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich

Extra Bold Italic · 800

Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich

Extra Bold Small Caps · 800

Victor jagt zwölf Boxkämpfer quer über den großen Sylter Deich

Black · 900

Gazeta publica hoje no jornal uma breve nota de faxina na quermesse

Black Italic · 900

Gazeta publica hoje no jornal uma breve nota de faxina na quermesse

Black Small Caps · 900

Gazeta publica hoje no jornal uma breve nota de faxina na quermesse

Website hero

Reframe.

New life forold buildings.

We give empty shops, tired offices, and forgotten warehouses a reason to open their doors again.

01 / Peckham, London

Almond Yard

A tiled shopfront becomes a neighbourhood kitchen, with a shared table where the counter used to be and a courtyard open for Sunday lunch.

Almond Yard project data
Existing area128 m²
Added area24 m²
Structure kept86%
On site26 weeks

02 / Kelham Island, Sheffield

Rutland Works

A former cutlery workshop makes room for a ceramicist, a frame maker, and a bicycle repair shop. New partitions stop below the original roof trusses.

Rutland Works project data
Existing area640 m²
Added area48 m²
Structure kept94%
On site38 weeks

03 / Stokes Croft, Bristol

Picton House

Two empty floors above a corner shop become six compact homes. A new stair brings daylight into the centre; the shop keeps trading throughout.

Picton House project data
Existing area312 m²
Added area0 m²
Structure kept91%
On site32 weeks

04 / Cliftonville, Margate

The Westbury

An empty cinema finds its second act as a rehearsal room and evening venue. The curved balcony remains, along with the ticket window on the street.

The Westbury project data
Existing area875 m²
Added area36 m²
Structure kept97%
On site44 weeks

Software interfaces

ALMKJS
PRJ–024

Website redesign

Refresh the studio website for our summer launch. Four tasks, one shared direction.

In progressDue May 24
MKMorgan Kim2h ago

First concepts are ready for review. Let’s focus on navigation and the mobile layout.

First concepts.pdf 2.4 MB
Tasks completed2 / 4

Website traffic

studio.example

Last 7 days
24,608Increase of 12.8%

Unique visitors · compared with the previous 7 days

May 18May 20May 22May 24

Jump to…

Find something in your workspace.

Project tasksWebsite redesign
Shared files3 project documents
Design reviewMay 24 · 10:30

Shared files

Website redesign / Resources

3 files
NameUpdated
Brand guidelinesPDF · 2.4 MB
Just now
Website explorationFIG · 18.6 MB
2 hours ago
Notes on a new directionDOC · 48 KB
Yesterday
MAY
24

Design review

10:30–11:15

Walk through the first website concepts with the team.

MK

Morgan Kim

Meeting organizer

Paragraphs

With matted beard, and swathed in a bristling shark-skin apron, about mid-day, Perth was standing between his forge and anvil, the latter placed upon an iron-wood log, with one hand holding a pike-head in the coals, and with the other at his forge’s lungs, when Captain Ahab came along, carrying in his hand a small rusty-looking leathern bag. While yet a little distance from the forge, moody Ahab paused; till at last, Perth, withdrawing his iron from the fire, began hammering it upon the anvil—the red mass sending off the sparks in thick hovering flights, some of which flew close to Ahab. “Are these thy Mother Carey’s chickens, Perth? they are always flying in thy wake; birds of good omen, too, but not to all;—look here, they burn; but thou—thou liv’st among them without a scorch.” “Because I am scorched all over, Captain Ahab,” answered Perth, resting for a moment on his hammer; “I am past scorching; not easily can’st thou scorch a scar.” “Well, well; no more. Thy shrunk voice sounds too calmly, sanely woeful to me. In no Paradise myself, I am impatient of all misery in others that is not mad. Thou should’st go mad, blacksmith; say, why dost thou not go mad? How can’st thou endure without being mad? Do the heavens yet hate thee, that thou can’st not go mad?—What wert thou making there?”

With matted beard, and swathed in a bristling shark-skin apron, about mid-day, Perth was standing between his forge and anvil, the latter placed upon an iron-wood log, with one hand holding a pike-head in the coals, and with the other at his forge’s lungs, when Captain Ahab came along, carrying in his hand a small rusty-looking leathern bag. While yet a little distance from the forge, moody Ahab paused; till at last, Perth, withdrawing his iron from the fire, began hammering it upon the anvil—the red mass sending off the sparks in thick hovering flights, some of which flew close to Ahab. “Are these thy Mother Carey’s chickens, Perth? they are always flying in thy wake; birds of good omen, too, but not to all;—look here, they burn; but thou—thou liv’st among them without a scorch.” “Because I am scorched all over, Captain Ahab,” answered Perth, resting for a moment on his hammer; “I am past scorching; not easily can’st thou scorch a scar.” “Well, well; no more. Thy shrunk voice sounds too calmly, sanely woeful to me. In no Paradise myself, I am impatient of all misery in others that is not mad. Thou should’st go mad, blacksmith; say, why dost thou not go mad? How can’st thou endure without being mad? Do the heavens yet hate thee, that thou can’st not go mad?—What wert thou making there?”

With matted beard, and swathed in a bristling shark-skin apron, about mid-day, Perth was standing between his forge and anvil, the latter placed upon an iron-wood log, with one hand holding a pike-head in the coals, and with the other at his forge’s lungs, when Captain Ahab came along, carrying in his hand a small rusty-looking leathern bag. While yet a little distance from the forge, moody Ahab paused; till at last, Perth, withdrawing his iron from the fire, began hammering it upon the anvil—the red mass sending off the sparks in thick hovering flights, some of which flew close to Ahab. “Are these thy Mother Carey’s chickens, Perth? they are always flying in thy wake; birds of good omen, too, but not to all;—look here, they burn; but thou—thou liv’st among them without a scorch.” “Because I am scorched all over, Captain Ahab,” answered Perth, resting for a moment on his hammer; “I am past scorching; not easily can’st thou scorch a scar.” “Well, well; no more. Thy shrunk voice sounds too calmly, sanely woeful to me. In no Paradise myself, I am impatient of all misery in others that is not mad. Thou should’st go mad, blacksmith; say, why dost thou not go mad? How can’st thou endure without being mad? Do the heavens yet hate thee, that thou can’st not go mad?—What wert thou making there?”

Stylistic sets
Size128
Weight400
Width100%

Width

font-variation-settings: 'wdth';

Width

'wdth' 75

Width

'wdth' 87.5

Width

'wdth' 100

Standard Ligatures

font-feature-settings: 'liga';

fifi
flfl
ffiffi
fflffl

Discretionary Ligatures

font-feature-settings: 'dlig';

ffff
stst
ſtſt

Small Capitals

font-feature-settings: 'smcp', 'c2sc';

AbcdeAbcde

Figures

1234567890

Tabular Lining (default)

1234567890

Proportional Lining: 'pnum'

1234567890

Tabular Oldstyle: 'onum', 'tnum'

1234567890

Proportional Oldstyle: 'onum', 'pnum'

1/2 3/4

Fractions: 'frac'

H123

Numerators: 'numr'

H123

Denominators: 'dnom'

H123

Subscripts: 'subs'

H123

Superscripts: 'sups'

Stylistic Sets

font-feature-settings: 'ss--';

gg

'ss01'

αα

'ss02'

RR

'ss03'

KkKk

'ss04'

KkKk

'ss05'

OoOo

'ss06'

egeg

'ss07'

Loading glyphs…

Selected glyph details
Glyph name
Not available
Unicode
Not encoded
HTML entity
Not available
CSS escape
Not available