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 .

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

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

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