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.

fd
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 the powerfulInter font
  • Copy the css or download it from Github

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 forFigma, also used byGithub.

  • 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
font-size: calc(var(--fontSize) * 1.1);
Code preview
pre 

Links & hyperlinks