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 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.
clamp(min-value, fluid-value + relative-value, max-value);
- min-value & max-value
- Minimum and maximum value constraints.
- 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.
- 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.
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.
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
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.
For a more detailed overview or tracking specific screen sizes, you can use the 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.
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.