Responsive Typography is Easy with WebRTC

Responsive Typography

Have you ever noticed that a favorite website of yours looks different when viewed in your mobile browser as opposed to your laptop’s browser? Perhaps the buttons are larger and easier to view in the mobile browser, or the text is larger than it is when viewed from a laptop? These changes in web design are called responsive design, and they have sprung up in response to the wide variety of devices that consumers now use to browse the internet.

The advent of smartphones introduced mobile browsers to millions of consumers, and as users began to spend more time browsing from a mobile device, web site designers noticed that their standard designs looked quite different on a mobile or tablet screen. Many designs that were easy to navigate on a PC became awkward, obtuse or near impossible to browse (or even load) on a mobile screen.

Rather than overhauling the entire design of a site to fit multiple screen sizes at once, designers and developers came up with a solution known as responsive design. Today’s web browsers pick up all kinds of information about their users including the type of device browsing the web. Responsive design is simply a bit of code embedded in a web site that lets the site act on that information to load a design that is specific to the type of device used.

Currently the most widely implemented elements of responsive design are based on screen size. As the web expands to more and more types of devices, from televisions to e-readers, developers have sought to make other elements of web sites more responsive.

The size of text, for example, is an excellent opportunity for developers to improve the browsing experience by implementing responsive design. Without responsive design elements, text on a web site can only be resized manually by the user, either by utilizing zoom functions or physically moving closer or farther from the screen.

Responsive typography solves this problem by automatically detecting where the user’s face is and adjusting the size of the text accordingly. While this seems improbable and futuristic, it is actually quite simple to accomplish by merging a few existing technologies.

Headtrackr, a Github program by developer Audun Mathias Øygard, implements face detection into web sites. It accomplishes this by using WebRTC, a framework that integrates hardware such as device cameras into the web browsing experience. Headtrackr and WebRTC allow the browser to detect the distance from a device camera to a face. Responsive typography takes this existing data and applies it to adjust the text on a web site to suit the user’s needs.

Be Sociable, Share!

    Tags: , ,

    One Response to “Responsive Typography is Easy with WebRTC”

    1. cars says:

      Car shopping can be very time consuming. There are plenty of cars
      you can look at, as well as a handful of factors to consider.

      You need to make sure you are aware of what you need to make it a better experience.
      Consider the following helpful advice for making things easier on you.