¿Por qué se utiliza la técnica CSS html {font-size: 62.5%} para establecer el tamaño de fuente base en 10px? ¿Por qué no simplemente decir html {font-size: 10px}?

Tiene razón en que el tamaño de la fuente cambiaría, pero ese es el resultado deseado. La razón por la que las personas hacen esto es para alejarse de las dimensiones basadas en píxeles.

Si el tamaño predeterminado de un navegador cambia de 16 px a 18 px, una fuente base del 62.5% cambiaría de 10 px a 11.25 px. Esto generalmente sería preferible.

Los diferentes dispositivos tienen diferentes resoluciones y densidades de píxeles. Estos han aumentado con el tiempo y los tamaños predeterminados del navegador se han ajustado junto con ellos. El tipo de 10 píxeles en un monitor antiguo con una densidad de píxeles más baja parece más grande que el tipo de 10 píxeles en una pantalla más nueva con una densidad más alta. Puede ser lo suficientemente grande como para leer en la computadora antigua pero demasiado pequeña en la nueva.

Cuando la Web comenzó a funcionar, muchos monitores tenían densidades de píxeles de pantalla (ppi) de 72 px por pulgada. Si escribió la palabra “Tipo” en un tamaño de 72 px y luego trajo una regla a su pantalla para medir la palabra, tendría casi una pulgada de alto al medir desde la parte inferior de la p hasta la parte superior de la T. (La fuente el tamaño se basa en una altura ligeramente mayor que la altura de un cuadro dibujado alrededor de los caracteres para incluir el ascendente más alto y el descendente más bajo).

Mi MacBook Pro actual tiene un ppi de 149. Por lo tanto, si midiera la palabra en esta computadora, ahora tendría menos de 1/2 pulgada de alto. Para llenar el mismo espacio en la pantalla más nueva que la pantalla anterior, necesitaría aumentar el tamaño de mi fuente.

Si configura su fuente base como un porcentaje en lugar de en píxeles, no tendrá que preocuparse tanto por esto. El tamaño de la fuente aumentará según sea necesario.

Esto es particularmente importante ahora ya que construimos sitios que se ven en todo, desde monitores grandes hasta teléfonos pequeños. El tipo de 10px en un teléfono más nuevo sería increíblemente pequeño y difícil de leer. Una fuente base de 62.5% puede ser mayor que 10px (pero aún así pequeña). Me inclinaría por el 100%.

Es un truco de una década para facilitar la conversión matemática de píxeles a ems.

100 / 62.5 = 1.6
1em ahora = 10px
1.6em = 1

http://clagnut.com/blog/348/

Todavía creo que es mucho más fácil dejar de pensar en las fuentes en términos de px por completo. ems y rems son los tamaños de letra de la Web. Forzamos px en los navegadores. No de la otra manera.