When the text becomes a problem

Web design always offers some surprises. What was simple and appropriate in the head is in practice can often be a small disaster. And the fact that today’s design needs not only to look good at different presentations in different browsers, but also to be responsive to mobile devices is not easy. Since then images are distorted, the menu is poorly operable, or a single header or a small teaser text can destroy the entire design. This can be very frustrating!!

There are now a lot of tools for designing a website that make it easier to customize graphical elements for many different surfaces. Whether CSS-Grids, Fluid-Container or similar: Design is now as flexible as never before! And with a little practice and know-how, everything can be adapted so that the overall result on the laptop looks just as good as on the smartphone. If only there were not always these problems with the text, which likes to do exactly what you do not want it to do. Line breaks in the wrong places can destroy any perfect layout, and truncated words or the like are not exactly useful.

Often developers have failed in the implementation alone on a few words that ultimately caused problems on a single device. There were also solutions, but they did not always lead to the desired result. Help should now be here in the form of Javascript. The Javascript library Fitty responds to container size and other preferences, and then scales the text automatically to fit. Even if content is created or added afterwards, the work does not start again so that everything looks good – Fitty regulates it automatically.

You can find Fitty at GitHub and it can be used directly without dependencies.