Poke it

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
Fluiditype animation

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.


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
  1. List 1
  2. List 2
  3. List 3
  4. 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 

Links & hyperlinks