About the project & user guide

I was going through Josh Comeau's CSS for JS devs course which is one of the best courses on CSS in general and I recommend checking it out. In one of the lessions, Josh implemented a simple fluid typography editor, mainly for demonstration purposes to showcase how fluid typography changes depending on the screen size.

I saw an opportunity for doing a really fun and useful project. I set out to build upon Josh's concept and developed a fully-fledged tool that developers could use on a day-to-day basis to fine-tune and keep track of their fluid typography and help to keep fluid typography behavior consistent across the significant breakpoints.

Fluid typography

Fluid typography is a modern way of approaching responsive typography. Instead of setting fixed typography values for individual screen sizes, we can set a single fluid value and let the CSS render the appropriate values for a specific screen size constrained by minimum and maximum values.

Try resizing the screen and notice how the "About the project & user guide" adapts to screen size, but is constrained at some specific minimum and maximum value. Cool, isn't it?

CSS clamp and browser support

This editor relies heavily on CSS clamp and generates code using this property. Although this property has a solid browser support (above 90% of globally used browsers), you might want to use a polyfill or a fallback value if you need to support legacy browsers like Internet Explorer.

Configurable values

clamp(min-value, fluid-value + relative-value, max-value);

min-value & max-value: Minimum and maximum value constraints.
fluid-value: Change speed (rate). If a value is positive, the final value will increase from minimum value to maximum value as screen width increases. If this value is negative, the final value will decrease from maximum value to minimal value as screen width increases.
relative-size: Browser default root font size is 16px. This value can be changed by users in their browser settings, usually for accessibility purposes. Positive or negative "rem" values should be included to avoid locking font size to px value and to support user font size preferences.

Features

Here is a short overview of some of the features of this editor:

Adjust size constraints, rate, and relative size
Adapts to any root font size
Graphical overview of the final fluid values
Table view for keeping track of values on fixed screen width sizes.

Adjusting fluid settings

Fluid typography settings can be easily adjusted either by using numerical inputs for more precise inputs or using range inputs for fine-tuning and smaller changes to easily track changes on the graph or table.

Use editor to configure min and max constraints, change rate and direction and relative sizing for user font preferences

Editor with text inputs with sample values set — Use editor to configure min and max constraints, change rate and direction and relative sizing for user font preferences

Code snippet

Based on the configured fluid settings, a CSS clamp code is generated. You can easily copy the value by clicking the button on the left side or by selecting the value and copying it manually.

Generated clamp code snippet with sample values set. Values can be copied by clicking on a button or manually selecting and copying the value. — The code snippet can be copied by clicking the button or by selecting the text and copying manually

Graph view

Graph view can give you a general overview of fluid typography behavior. By hovering over the graph you can inspect individual values on specific screen sizes.

A high-level overview of fluid typography behavior. Fluid value starts increasing from min-size to max size at around 400px of the viewport width and it stops at a maximum value at around 1000px,

Graphic overview of fluid typography behavior for default settings — A high-level overview of fluid typography behavior. Fluid value starts increasing from min-size to max size at around 400px of the viewport width and it stops at a maximum value at around 1000px,

For a more detailed overview or tracking specific screen sizes, you can use the table view.

Table view

A table view can give you a more detailed overview of fluid font sizes for specific viewport sizes. Viewport sizes can be easily added using the adjacent input. Likewise, individual values can be removed from the list by clicking the remove button for a specific value.

Minimum, maximum, and fluid values are indicated in the table and values can be sorted by screen size in ascending or descending order.

Table view of fluid behavior for specific set of screen sizes. — Minimum, maximum, and fluid values are indicated in the table and values can be sorted by screen size in ascending or descending order.

Issues and contribution

Found any bugs or have a suggestion? Feel free to open an issue in project's GitHub repository .

Feel free to contribute code to the project by forking the source code . Please consult the "Issues" tab or contact me directly as unsolicited code contributions may be rejected if they're not necessary or if they harm code quality, performance or functionality.