FVSCL
An experiment in harmonious
Fluid Visual Scaling
for
typography
a
Component Library
using CSS Variables and Svelte.
Current Scale: 1.332
Demos
Slack
Slack reskinned using various fvscl components.
Overridden CSS variables:
:root {
--min-size: 14;
--max-size: 18;
--min-ratio: 1.1;
--max-ratio: 1.4;
}Gitlab
Google Forms reskinned using various fvscl components.
Overridden CSS variables:
:root {
--min-size: 14;
--max-size: 20;
--min-width: 720;
--min-ratio: 1.1;
--max-ratio: 1.2;
}Google Forms reskinned using various fvscl components.
Overridden CSS variables:
:root {
--min-size: 14;
--max-size: 16;
--min-ratio: 1.2;
--max-ratio: 1.3;
--color-light: white;
}
body {
--color-dark: #3c4043;
--color-primary: #1a73e8;
}Jekyll (& Hyde)
Using Gutenberg as a source an entire book has been "typeset" using fvscl components.
Overridden CSS variables:
:root {
--font-family-base: serif;
--min-size: 16;
--max-size: 24;
--min-ratio: 1.1;
--max-ratio: 1.414;
}Forms
Google Forms reskinned using various fvscl components.
Overridden CSS variables:
:root {
--min-size: 14;
--max-size: 22;
--min-ratio: 1.1;
--max-ratio: 1.234;
}Typography
h1 currently has a font-size of 92.59px
h2 currently has a font-size of 69.46px
h3 currently has a font-size of 52.10px
h4 currently has a font-size of 39.09px
h5 currently has a font-size of 29.32px
h6 currently has a font-size of 22px
Text
Base
The font-size of body text is 22px.
Excepteur mollit tempor occaecat commodo sit laborum esse nostrud magna cupidatat nisi. Minim consectetur velit ea sint dolore et elit dolor non voluptate commodo excepteur. Deserunt veniam tempor eiusmod proident quis sint aliquip voluptate proident voluptate exercitation Lorem ea. Esse esse fugiat fugiat consequat labore Lorem cillum magna culpa magna ullamco laborum et. Sunt ad duis proident qui et. Cupidatat magna veniam magna duis sit eu nisi cupidatat incididunt esse do fugiat nostrud in. Magna Lorem quis officia cillum occaecat ad dolor ea sint aliquip.
Pariatur commodo proident consequat laborum amet excepteur nisi fugiat minim. Labore et sunt magna dolor ex sit laboris consectetur deserunt culpa. Deserunt incididunt dolor fugiat reprehenderit esse irure commodo consequat occaecat amet incididunt aliqua. Quis et laborum laborum reprehenderit adipisicing veniam dolor ut sit magna exercitation do amet cupidatat.
Sm
The font-size of sm text is 16.50px.
Quis incididunt est occaecat mollit reprehenderit consectetur do sunt excepteur aute excepteur. Reprehenderit Lorem ea eu nisi labore nisi nisi quis non proident et elit. Veniam fugiat sunt sit do sit excepteur cupidatat eu eiusmod voluptate sunt velit. Labore ipsum in sit aute Lorem qui ut.
Enim consequat commodo exercitation Lorem laboris esse reprehenderit. Tempor aliquip exercitation Lorem quis. Qui ea duis do commodo ex. Aliquip dolor et fugiat enim reprehenderit ad voluptate in magna dolore ex adipisicing commodo.
Laboris minim ea cillum cillum. Consectetur fugiat tempor cillum magna consequat id dolore laborum exercitation reprehenderit eiusmod duis. Cillum anim aliquip et veniam id laboris. Ad magna nulla anim Lorem mollit ex. Occaecat anim ea incididunt pariatur reprehenderit sunt sunt aliqua voluptate nostrud mollit officia.
Xs
The font-size of xs text is 12.38px.
Culpa mollit laboris proident qui nisi elit eiusmod do eu voluptate ex velit. Aliqua laboris do ad id. Quis labore sunt officia ea. Voluptate sint sint incididunt pariatur elit nisi excepteur ipsum aliquip. Laboris non ipsum aute anim. Velit elit ad cupidatat dolor pariatur commodo esse mollit ex anim nulla.
Aliqua esse et veniam consectetur. Officia nulla id aliqua duis anim voluptate nostrud minim adipisicing nulla sint ex officia. Aute elit dolore voluptate non excepteur pariatur deserunt qui officia tempor culpa aliqua consequat.
Eiusmod in labore voluptate aute pariatur aliqua labore irure dolor deserunt cupidatat consequat aliqua irure. Et non et ullamco nulla nostrud. Ipsum aute tempor dolor laboris duis cillum ipsum commodo laboris eiusmod. Do dolor mollit est Lorem.