Fluid, flexible & simple typography

This small CSS library serves to avoid the responsive web by focusing on pure fluidity in which the system communicates what size to be rendered. Recommend to be used for blogs, portfolios &documentation.

npm i fluiditype

yarn fluiditype

Easy to adopt and customise

Using a simple formula of font-size and a viewport-width which renders the size of the font.

3kb only
Presented with Inter font
Copy the CSS or download it from Github
Run npm i fluiditype in your terminal

Fluiditype content schema

You can review the font behaviour and the spectrum of text types that Fluiditype covers like Headings, paragraphs, lists & code-snippets.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs & text-styles

Fluiditype is a typography css framework, which can easily be added to any web-page. The magic is behind the calculations done while incorporate thevw which stands forviewport-width and it is fully responsive and fluid to the size of the viewport.

You want to understand and test how this setup works, it is easy. Just rescale the screen and you will se the typography starting to adjust.

Just a simple paragraph text, that way you can easily visualize thebehavior when you change the viewport, the rescaling and fluidity in action. This is a font type called Inter created for Figma, also used by Github.

Bolded text
Italic text
Strong text
Underlined text
~~Strikethrough text~~

List & List styles

Unordered List

List 1
List 2
List 3
List 4

Ordered List

List 1
List 2
List 3
List 4
- List 4.1
- List 4.2
- List 4.3
- List 4.4

Code snippets

Code quote

yarn fluiditype

Code preview

npm i fluiditype