Responsive design, a web design approach in which websites are optimized for various screen sizes, has become a buzzword recently, as more and more companies aim to reach consumers through multiple devices.
Croatian designer, Marko Dugonjic, took the concept one step further by publishing a demo that combines face detection and responsive typography. In his responsive typography experiment, the website's font automatically adjusts to readable size, based on how far you are from the screen.
Here's how it works: With permission to use your webcam, the page detects your face movement and calculates your distance to the screen. As you move further from the screen, the font size of the paragraph instantly become larger; and vice versa. When you move around, you also get to see the ratio, width, and font size in real time. If you are hesitant to show your face but still want to try out the site, you can put any magazine page with a headshot in front of your webcam--the application can detect that, too.
Dugonjic told Inc. via Twitter that he had pondered the idea for a few years, but he did not come up with anything tangible until he learned about WebRTC and getUserMedia. He explained that once his team managed to capture the user and calculate the reading distance, setting the optimal letter size was relatively easy.
One application of responsive typography is to create a personalized reading experience for the device owner, according to Dugonjić.
"We are not there yet, but I hope that this demo will spark people's imagination and encourage designers and developers to think about the experiences of tomorrow," he wrote to Inc.