I loved the concept of FitText.js when I first ran across it. I played with it and tried to incorporate it into a project last fall before design tweaks ruled it out. When Peyton brought me her first designs for RichTech, it immediately sprung to my mind. However, the more I played with it, the more I found it wasn’t what I was looking for.
With FitText, the size of your text was related to the width of the parent element. What if you want your text related to the height of the element or, in this case, the height of your screen?
The first PSD that our Peyton passed over was designed for monitors with a resolution of 1024×768. The text was well-proportioned and balanced for that width. However, I build sites on a 27″ iMac with a resolution of 2560×1440, more than twice the screen real-estate when compared to the initial design. What would it look like on my screen, especially in combination with a background image covering the entire screen?
The simple answer? It looked tiny! The first way we thought about solving this problem was through media queries. What should we query on? Screen width? Screen height? Height and width in combination? As we started down the road of media queries, it became clear that it was a workable solution but not an ideal solution. It allowed us to scale the font size up as we got larger, but we would always stumble across a combination that forced unacceptable compromises.
What we needed was a way to maintain a truly proportional ratio between screen size and font size while allowing us to identify edge-use cases and dynamically account for them 1. We began where we started: 1024×768. What font size did we think looked ideal there and what was the ratio between the font size and the screen size? We liked 17.5 percent.
Here are three screenshots showing what the title text looks like at various window sizes.
The next problem we ran across was accounting for tall screens that were also narrow. For example, I am a big user of BetterSnapTool so I frequently have browser windows of 1280×1380 (half-width, full-height). This took quite a bit of testing to find the ratios of window height to window width AND window width to font-size that we liked. In the gist below you can see our final code and the ratios we ended up with.
First and foremost: work closely with your designer. The more dynamic the web gets the more you need to consult with your designer. No longer can a developer get away with accepting a PSD and building it pixel-perfect. Yes, you still must do that. However, you must do more and challenge your visual designer as much as they challenge you.
Second: venture away from those pre-built jQuery plugins on occasion. You’ll learn something new and the end-result just might be better for your project.
Third: I’m happier than ever that I paid attention in math class when I was younger!
1. Eventually we will be able to move this into CSS with the use of VW/VH units. See CSS-Tricks for more.