👁 Fluiditype

Fluiditype a simple fluid typography css helper for reading experience

Fully fluid Headings, Paragraphs, Blockquotes, Lists, Highlights, Code snippets, etc.

This small CSS library serves to avoid responsive web but focus more on fluidity and systematic approach which will let the interface to communicate with the environment and not to be broken by rules. This would work great for blogs, portfolio websites and simple pages.

👟 How to run

• You can download the package directly from Github.

• You can run the git clone command in your Terminal to get the package.

  git clone https://github.com/Fluiditype/fluiditype.git 
  

🔬 What's inside

You will find a simple .css file which would ideally make your typography fluid and responsive to the screensize, without breaking your layout, it would impact only the typography styles.

The main rules are set in a :root selector, because of it's high specificity. There we declare the global CSS variables, which can be changed and customised to answer the needs of your project.

:root {
  --font-size: calc(12px + 0.698vw); /* The character count on */  
  --line-height: calc(var(--font-size) * 1.4);
  --letter-spacing: calc(var(--font-size) * 0.0015);
  --font-weight: 300;
}

🔠 Font-size

Everything in the fluiditype.css file is dependant and connected to the :root selector font-size calculation.

Example:

p, li, b, i, strong, a, mark {
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  font-feature-settings: normal;
  font-family: var(--font-family);
}

🕸 Fluiditype schema

The Headings elements representing six levels of section headings. The h1 defines the most important heading. The h6 defines the least important heading.

There are different text elements which are part of the Fluiditype such as pparagraph element, blockquote quote element and all different styles that can be used for text like bold, underlined, deleted and mark.

Ordered oland underodered ullists with the li element.

For better documentation and reading experience we added special definitions for some main HTML elements. The HTML code element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. The HTML pre element represents preformatted text which is to be presented exactly as written in the HTML file.

We also covered the behaviour of the HTML a element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address for consistency and better experience with the web typography.

📝 License

Licensed under the MIT License.

🌐 Thanks

You can always check the cool animations on our own Gatsby developed website, visit Fluiditype.

👨‍💻 Always improving

We are always working on improving Fluiditype, if you want you can always contribute and ask for more, this would help us create something more meaningful.