fd

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 & and simplistic text websites.

fd
herofluiditype

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 powerful Inter 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-snippeds.


#Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

#Paragraphs & text styles

Fluitype is a typography css framework, which can easily be added to any webpage.The magic is behind the calculations done while incorporate the vw which stands for viewport-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 the behavior 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
  • Deleted text

#List and List styles

Unoredered 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 and hyperlinks