Static font sizes are great for most cases in responsive websites. In some situations though, you find yourself wishing that your typefaces were a little more adaptive than is achievable with simple 2 or 3 stage media queries
For a long time, I have searched for a good solution to this problem. The trouble is that "normal" scaling algorithms are not really suited to responsive design.
Simple autoscaling based on the width of a container such as a column does not work. In responsive sites columns will not fluidly change width. Instead they may jump to a new width at a breakpoint (such as for small screens) and then max-out once you get to the site width.
Autoscaling based solely on browser width is the other common method. This however is also not ideal as it takes no account of browser height. Why is this important?
Imagine you are viewing the text on a mobile phone, the height may vary considerably between models and always introduces a completely different aspect ratio to that used on desktop. How then do we provide an autoscaling solution that can work in all of these situations.
You start from scratch and write a new type of autoscaling algorithm that takes the best elements from both approaches and combines them into a simple, flexible format that gives you the best of both worlds.
BWD Intelliscale works by analysing the width of the text element, the browser window width and the browser window height. This makes it unique. This is not just unique to RapidWeaver users, this is unique - period.
IntelliScope is super light weight as well. The code is less than 1kB no matter how many times you use it on a page.
Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult almost impossible to achieve for all screen widths with only CSS media-queries. With Intelliscale it is easy.
The Flexifont stack from BWD packages up this functionality in an easy to use form that you can use to rescale individual text elements on your page or the whole page at once.
Notice how the text in this box autoscales to keep the number of characters within range and the height almost constant even on narrow screens. This is Proportional Mode.
The proportional mode, above is great for controlling text in single or multiple elements and can even be applied to the whole page.
There are times thought when this is not appropriate for responsive pages.
It would not, for example, be appropriate to scale everything on the page like this for a true responsive site. There is nothing to stop you doing it, but why would you want to, when the responsive behaviour of the total page content works as it does.
This is where the IntelliScale algorithm does what no other scaling routine can do. There are lots of plugins that do some of what FlexiFont can do, none can do it all.
When set to Responsive Mode, and totally automatically, will analyse both the width and the height of your page and fit the content appropriately.
What this means is that the responsive column widths are always respected and no scaling will take place until the columns start to shrink in width.
When the columns reach the mobile breakpoint where they will stack on top of each other an get wider, Intelliscale will recognise this and scale accordingly.
Still no be shakes you may say. But think about what also happens on mobile devices. While we are obsessing about responsive width, mobile screens reduced height compared to desktops is often overlooked.
On mobile screens, the presentation of your site can dramatically alter. Everything is there, in one tall column, but is the information still as clearly presented as on desktop? Imagine the case where you have a picture and some descriptive text. The picture scales down but the text simply wraps to more lines, often meaning that the whole message is no longer visible. The impact and coherence of the message is lost.
Responsive mode solves this problem by scaling with the screen height at this point, ensuring that what was intended to be in view, is in view.
The Flexifont stack has both proportional width and height selected.
Notice how the text in this box autoscales to keep the number of characters within range and the height almost constant even on narrow screens, but also adjusts the hight dependent on browser height. This is Responsive Height Mode.
The Flexifont stack from BWD packages up this functionality in an easy to use form that you can use to rescale individual text elements on your page or the whole page at once.
Notice how the text in this box autoscales to keep the number of characters within range and the height almost constant even on narrow screens. This is Reposnsive Width Only Mode.
Have a look at the FlexiFont playground page where you can see just a few of the possibilities without even resizing your browser.
See how intelliscale can scale your entire page contents at once or just a section on the All Contents page where you can see just a few of the possibilities without even resizing your browser.
Of course you can also use FlexiFont with Screens to give a little more control over the scaling of individual elements. There is however no substitute for content control!
Free Stacks for Foundation and other RapidWeaver Themes
- Sitemap
Sign up below to receive updates on new products and offers first.