Share
Voy a hacer una declaración de barrido; Los píxeles no tienen lugar en el diseño web. Solo hay una razón por la que aún dependes de los píxeles, y eso es porque aún no te has familiarizado con los ems. Vamos a cambiar eso!
M cortesía decorativa de Frances Mcleod - ganador de TypeFight # 34 Cuando construimos sitios web, debemos decirle al navegador qué tan "grandes" son: "este encabezado es tan grande", "este contenedor es muy alto", "este formulario es más amplio que eso", así es como diseñamos una página. Los píxeles siempre han tenido perfecto sentido como la unidad de medida elegida; estamos saliendo a una pantalla, así que, ¿qué otra cosa usaríamos??!
Sin embargo, resulta que los píxeles son inherentemente inflexibles. Y resulta que ser inflexible no es bueno para la web..
Oliver Reichenstein declaró hace mucho tiempo: "La web tiene un 95% de tipografía", pero a la gente le ha llevado varios años incorporarse a la idea. Contenido y usuarios; Son nuestras prioridades como diseñadores web, y el diseño tipográfico nos ayuda a cumplir esas prioridades..
Los navegadores muestran la copia del cuerpo en un tamaño predeterminado. En las computadoras de escritorio esto es generalmente de 16px, los navegadores móviles varían. Los usuarios pueden cambiar este valor predeterminado, según lo que prefieran..
A menudo, los diseñadores web usarán CSS para convertir el tamaño de fuente base en piedra ...
... evitando que el usuario adapte su propia experiencia de lectura, haciendo que el contenido sea menos accesible.
La primera lección es devolverle el poder al usuario. No impida que los usuarios configuren su propio tamaño de tipo, pero asegúrese de comenzar en un campo de juego nivelado. Establezca su fuente base al 100% del valor predeterminado del navegador:
entonces podemos trabajar desde allí.
Todavía tenemos que definir el tamaño de nuestros diversos elementos tipográficos, especialmente si hemos utilizado una técnica de restablecimiento de CSS para eliminar todo el tamaño predeterminado. Una escala modular bastante típica se vería así:
Estas cifras se han utilizado durante siglos, calculadas para optimizar las proporciones, sin tener que fabricar físicamente muchos de los bloques utilizados en la impresión. Hay todo tipo de matemáticas inteligentes que justifican escalas como esta y estoy seguro de que pueden apreciar que este rango también es agradable a la vista.
Traduciríamos esta escala a nuestra propia tipografía aplicando CSS un poco como esto:
Sin embargo (como ya hemos dicho) el uso de valores de píxeles fijos es inflexible, así que rectifiquemos eso ...
Un em es una unidad de medida. Al igual que los píxeles, ems puede determinar el tamaño de los elementos en una página web. A diferencia de los píxeles, que son absolutos, los ems son relativos al tamaño de fuente de sus padres, que es donde hay mucha confusión..
1em es igual al tamaño de fuente heredado. Si el tamaño de fuente de un Ems recibe su nombre de la impresión. Precisamente cuando el término se usó por primera vez no está claro, pero como la M mayúscula (pronunciada emm) representa mejor el bloque de impresión cuadrado en el que se colocaron las letras de impresión, llegó a prestar su nombre a la medida. Cualquiera que sea el tamaño en puntos de la fuente en cuestión, el bloque de la M mayúscula definirá el Em. Un em es generalmente un toque más grande que la forma de la letra, pero entiendes la idea. Ya hemos empezado a establecer nuestra escala tipográfica en píxeles, así que, ¿cómo convertimos eso en ems? Un cálculo simple, que expresa el tamaño de fuente deseado en relación con el tamaño de fuente del cuerpo: Usando el tamaño del cuerpo, asumimos que es 16px, con el objetivo de convertir nuestro 36px Aquí es cómo se convierte nuestra escala, utilizando el método anterior: Algunos de estos valores pueden ser un poco complejos, pero no tenga miedo de ser lo más preciso posible con los decimales. Los navegadores siempre harán todo lo posible para representar los valores exactos.. Propina: A menudo es útil hacer una nota en los comentarios para recordar cómo calculó cada valor de em.. El mayor número uno de quejas de la gente con ems proviene de las complicaciones que surgen de la cascada. Un valor de em es relativo al valor de su padre más cercano, que accidentalmente puede estropear las cosas si no está prestando atención. Eche un vistazo al siguiente css, que apunta a obtener anclajes y párrafos del mismo tamaño: Ahora eche un vistazo a esta inocente pieza de marcado: Como es de esperar, todo aparece bien en el navegador. Tanto el párrafo como el anclaje se muestran en 1.2em, en relación con el tamaño de fuente del cuerpo Sin embargo, si tuviéramos que introducir un segundo ancla dentro El párrafo, a ver qué pasa: El ancla dentro del párrafo todavía tiene un tamaño de 1.2em, pero ahora es relativo al párrafo principal, que ya es 19.2px - Nota: Los elementos de la lista anidada en los menús de navegación son un ejemplo clásico de donde la cascada puede salirse de control, tenga cuidado con eso. No hay solución para esto; lo último que desea hacer es agregar una regla adicional para reducir el tamaño de los anclajes que aparecen en los párrafos, que es un boleto de ida a Migrainesville. Para poder mantener tu CSS y HTML, es importante mantenerlo simple ™. Eso debería ayudar! Usar Ems significa que tendrás que pensar bastante a veces, pero hacerlo te obligará a limpiar tu acto y ser eficiente en tu codificación.. Los rems son útiles y se comportan exactamente de la misma manera que ems, sin la cascada. Cada Rem que definas es relativo al tamaño de fuente del cuerpo. Sin embargo, el soporte no es tan bueno, por lo que IE8 y anteriores necesitarán un respaldo basado en píxeles.. Hemos cubierto el CSS No hay una regla fija sobre qué tan grande debe ser la altura de la línea, pero 1.5em es un valor razonable para probar y hará que su tipografía sea fácil de leer. Propina: Eche un vistazo a la sugerencia de Bryan Gruhlke en los comentarios sobre el uso de valores sin unidades con altura de línea ... Nota: Las cosas pueden complicarse si intenta establecer una cuadrícula de línea de base con ems, pero ese es un tema para otro artículo. Una vez que entres en la mentalidad de mantener tu diseño flexible en términos del tamaño de fuente, verás que dependes cada vez menos de los píxeles para diseñar elementos en la página.. Si estamos hablando de diseños fluidos, deberías usar los valores de% para determinar el ancho de cualquier elemento dado. Los píxeles no deben verse en ningún lugar al determinar las dimensiones horizontales. El espaciado vertical se puede lograr muy fácilmente con ems; Una vez más, se trata de estar limpio con su marcado y estilo. Considere la posibilidad de restringir los márgenes a la fondo de sus elementos, para facilitar la gestión del ritmo vertical.. Si necesita definir un ¿Esquinas redondeadas en un botón? Selecciona el Sombra de texto, cuadro de sombra, ídem. Y si necesitas cambiar el tamaño de todo ¿Bajo ciertas circunstancias, como ventanas más pequeñas? Modifique el tamaño de fuente base del cuerpo en la consulta de medios apropiada Como todas las reglas científicas excelentes, tiene que haber una excepción para probarlo. En este caso, puedo pensar en un buen escenario en el que puede necesitar píxeles; fronteras Si define un ancho de borde (o la altura de una regla horizontal) en ems, es posible que se calcule tan pequeño que el navegador no pueda procesarlo.. En este caso, simplemente no lo verás.. Para las reglas horizontales, puedes tener estilos un poco como este: Para evitar que desaparezca cuando el tamaño del cuerpo es demasiado pequeño, puede agregar esto: Ahí. Un pixel Dangit. Los anchos de borde no pueden tener un valor mínimo (por desgracia), por lo que no es posible realizar una copia de seguridad similar en ese caso. En su lugar, podría utilizar los valores de ancho de borde de ¡Comience a usar ems hoy! Su contenido está tipográficamente conectado a tierra, ya sea que se dé cuenta o no. Remitir a píxeles, convertir figuras y pensar en términos de diseños fijos ni siquiera es necesario. Comience a pensar en ems y pronto olvidará los píxeles por completo.. Si puede pensar en una situación en la que simplemente no puede usar ems, me encantaría escucharla en los comentarios.!
Una M mayúscula en Calendas Plus - la plaza circundante es 1em de alto, 1em de ancho Conversión de píxeles
, obtenemos:
Problemas con la cascada
(1.2 * 16px = 19.2px).
(1.2 * 19.2px = 23.04px). Esto nos da anclas extra grandes en algunas partes de nuestra página; difícilmente deseable.La solución
Rems
¿Qué hay de usar Ems en otro lugar??
tamaño de fuente propiedad; un primer paso sensato para usar ems, pero ahora veamos altura de la línea. Si alguna vez hubo una propiedad que grita "no use valores de píxeles", es la altura de la línea. La altura de la línea (tratada en un artículo anterior con más detalle) de un elemento tipográfico debe siempre ser relativo al tamaño de fuente. Si tiene un encabezado cuyo tamaño se establece en ems, pero cuya altura de línea se establece en píxeles, podría terminar con una superposición fea y una relación visual deficiente en general.
En este caso, 1.5em es 1.5 * 18px que es 27px Elementos estructurales
altura (lo que puede ser complicado en diseños flexibles) usa ems también. Quizás esté construyendo una navegación y necesite definir la altura de los enlaces del menú; deberían aumentar y disminuir con el tamaño de la fuente..radio del borde Usando ems, para que todo escale a la perfección..
Eche un vistazo a este Codepen para ver un ejemplo más visual de lo que estoy hablando aquí. RWD
cuerpo font-size: 90%; y wham! Todo tu sitio se escalará en el tiempo que lleva presionar Enter..Excepciones
Echa un vistazo a esta pequeña demostración. hr altura: .02em; frontera: ninguna; fondo: blanco; margen: 2em 0; esquema: ninguno; bloqueo de pantalla; Limpia los dos; ancho: 100%;
min-height: 1px;
grueso, medio y Delgado, aunque estos valores no se escalan con el tamaño de fuente mejor que los píxeles.Conclusión
Otras lecturas
Accentsconagua