New Perspectives On Web Design

By Marko Dugonjić CHAPTER 9

window.ondeviceproximity = function (event) {
var prox = "Proximity: " + event.value + " cm";
prox += "Min. value supported: " + event.min + " cm";
prox += "Max value supported: " + event.max + " cm";
proximityDisplay.innerHTML = prox;
};

window.onuserproximity = function (event) {
var userProx = "User proximity - near: " + event.near;
userProximityDisplay.innerHTML = userProx;
};

Another example is capturing objects with a plain old Web camera. By com-
bining the getUserMedia API with face recognition algorithms, we can de-
tect the user’s face and calculate the distance between a user and the screen^87.
Whatever the sensor technology is, once the reading distance is
available, we can use it as a complementary query to screen size @media
queries to deliver better typography. A few combinations and their respec-
tive setups come to mind:

• A smartphone at palm distance (small size, short measure, tight leading)


• A smartphone at lap distance (small to medium size, short measure,
  medium leading)


• A tablet at palm distance (small size, medium measure, normal leading)


• A tablet at lap distance (small to medium size, medium measure,
  medium leading)


• A tablet at desk distance (medium size, short measure, tight leading)


• A laptop at lap distance (small to medium size, medium measure,
  medium leading)


• A laptop at desk distance (medium size, measure and leading)


• A desktop screen at desk distance (medium to large size, medium
  measure, medium leading)


• A desktop screen at wall distance (large size, measure and leading)

87 http://webdesign.maratz.com/lab/responsivetypography/