Font-size: Unidades y su uso o no. Em vs Rem vs %. Destierra Px y Pt 9.5.12
Font-size: Unidades y su uso o no. Em vs Rem vs %. Destierra Px y Pt
El tamaño, tanto del texto como de otros elementos de las páginas, admite ser declarado en una gran variedad de unidades. Cada una de ellas con sus particularidades y razón de ser. Pero no todas se deberían utilizar en todos los casos.
Para entender mejor cuándo utilizar unas u otras, y cuales no usar, veamos que es cada una de ellas
Unidades absolutas
Se llaman absolutas porque su valor es el declarado. No hay cálculo del mismo. Es el que es y de ahí no se mueve
Pixel
Px: Los píxeles son unidades de tamaño fijo que se utilizan en los media="screen". Un pixel es igual a un punto en la pantalla del ordenador (la división más pequeña de la resolución de su pantalla) y por lo tanto es indivisible.
Su problema es que no es escalable, atentado contra la accesibilidad. Era una cuestión que muchos obviaban porque les permitía un control "al milímetro" de sus realizaciones.
Pero hoy a esa falla en la accesibilidad por algunos colectivos se suma el comportamiento en dispositivos de pequeñas dimensiones y grandes resoluciones.
Ni permite escalar a más los textos a los usuarios con problemas visuales ni a menos en dispositivos como los i-algo o smartphones.
Puntos
Pt: Malo el px, peor el pt.
El punto es una herencia de los medios impresos. Un punto es igual a 1/72 de pulgada (según diversas fuentes), apróx. 0´04mm.
Al ser también una medida absoluta tiene todos los problemas de los px aumentados. Olvídala excepto para los media="print". Ahí es la reina.Unidades relativas
El valor final resultante (computado) está en función de un valor previo.
Em
Em es una unidad escalable que se utiliza en los documentos web. 1 em es igual al tamaño de la fuente font-size del padre. Su referencia es el tamaño (altura) de la letra m minúscula de la familia de la tipografía font-family declarada en el elemento.
El valor primigenio debería ser el que tenga declarado el usuario del navegador en sus preferencias.
Y pese a ser una práctica muy extendida que el diseñador web pise dicho valor declarando un tamaño de fuente absoluto en el html o body del documento no deja de ser una mala práctica.
Porcentaje %
%: El funcionamiento del tanto por ciento es similar al del em. El valor computado es el del padre (o ancestro más próximo que lo tenga declarado o computado).
Al igual que em necesita de un ancestro sobre el que hacer los cálculos.Funcionamiento de em y %
El valor de estas dos unidades es acumulativo. Esto es, a medida que profundiza el dom el valor resultante va cambiando.
Un ejemplo. Tengamos tres elementos anidados, un div, un p y un span, contenidos en el body. Vamos a suponer para el ejemplo que el valor de font-size computado o declarado para html sean 20px.
Si declaramos para el div su tamaño del texto en 1.2em (o 120%) el valor computado serán 24px (20px del padre multiplicado por 1´2).
Ahora en el párrafo su tamaño en 1.4em (140%) el resultante será 33´6px (el navegador redondeará).
Y en su span .8em (90%) son 26´8px.
Como ves, el valor de cada décima varía sensíblemente. Este comportamiento debido a la herencia suele confundir a quienes se inician en el uso de Css.
Rem
Rem: esta unidad es lo mismo que "em" pero, y esta es la gran y única diferencia, el cálculo siempre se realiza sobre el valor de la letra m del elemento raíz (root). El del padre o ancestros no se tienen en cuenta.
En el ejemplo anterior los valores serían para el div = 24px; para p = 28px; y en el span = 16px.
Adenda
El documento de trabajo de los editores de Css3 "CSS Values and Units Module Level 3" del 23 de Abril de 2012 (status: Editor's Draft) añade algunas unidades nuevas para poder dar tamaño a los textos en función de las medidas de su caja contenedora inicial o del tamaño de la ventana. Estas unidades nuevas son: vw ‖ vh ‖ vmin . Y sobre ellas ya publiqué este artículo recientemente.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Creo que los cálculos para los em serían un poco distintos no?
ResponderEliminar'p' = 24 x 1.4 = 33,6
'span' = 33.6 x 0.8 = 26,88
Gracias David.
ResponderEliminarSí. Tuve un error de tipeo (un 6 por el 3). Corregido.
Un saludo.
Excelente articulo, pagina, todo. Muy bien material.
ResponderEliminarSegún tu opinión cuál sería le mejor practica usar em, % o rem??
ResponderEliminarPd. muy buen articulo.
Échale un vistazo a este otro artículo
Eliminar"De Ems y Rems"
Un saludo
Hola, soy nuevo en el tema de diseño y programación, así que permitidme equivocarme a lo burro. Primero, según he leído en librosweb, los pixeles son una medida relativa, y no absoluta, ya que depende de la resolución de la pantalla o dispositivo en el que se visualice. Así mismo, se señala en la misma fuente que que las unidades relativas no se heredan directamente, sino su valor real una vez calculado. Por tanto, segun creo haber leído no existe valor acumulativo. A pesar de lo mencionado, y me gustaria que alguien me rebatiera o corriegiera, me parece interesante la cuestión de usar rems para darle mayor accesibilidad a personas con discapacidad, o simplemente dispositivos moviles u otros que supongo optimizarán esta medida a través del navegador.?! ¿he dicho muchas tonterías, hjaha?
ResponderEliminarHola Fran
EliminarEn puridad la unidad píxel (px) las especificaciones la definen como una medida angular: http://www.w3.org/TR/CSS2/syndata.html#x39 en la que también interviene la distancia del ojo.
Y sí, el px es una medida absoluta. Tanto en la recomendación 2.1 (que te enlacé antes) como en el documento de nivel 3 (CR) que desarrolla el módulo de unidades y medidas en Css: http://www.w3.org/TR/css3-values/#absolute-lengths
Sobre el otro aspecto, tienes que diferenciar las propiedades que se heredan y las que no, aspecto diferente del valor inicial de cada propiedad (que puede ser el heredado, el computado de su ancestro o ninguno) y una tercera cuestión que es cómo se calcula el valor final ya tenga o no declarada de forma expresa la propiedad en cuestión.
Un ejemplo sobre lo último: opacity no se hereda, sin embargo el valor del padre es aplicado al hijo si no se le declara. Dicho de otra forma: el valor inicial de opacity es 1. El valor computado para el hijo es el producto del valor inicial por el valor de su padre.
Padre -> opacity: .5 // Hijo -> opacity: 1 (valor inicial o no declarado) valor final del hijo: .5 * 1 = .5
Padre -> opacity: .5 // Hijo -> opacity: .5 // valor final del hijo: .5 * .5 = .25
Espero haberte ayudado en algo
Perdón que me meta, pero ¿te acordás, Kseso, las discusiones que tuvimos por este asunto del pixel como unidad relativa, absoluta o angular?
Eliminar¡Qué épocas! ¡Hasta llegamos a la amenaza de agresión física al que no entendiera!
(Éramos dos salvajes.)
Bien, en realidad quería aportar algo. Hay un buen ejemplo de uso para lo que comenta Fran Vicente sobre "las unidades relativas no se heredan directamente, sino su valor real una vez calculado". Está en
Espiral logarítmica puro Css.
y se entiende perfectamente como el mismo valor heredado cambia según nos adentramos en el DOM.
hola amigos soy nuevo por aqui yo tambien, quiero escribir porque tengo las mismas dudas que fran vicente sobre el pixel como unidad relativa, ya que como el menciona en libros web y algunos sitios mas la considederan como relativa. Los enlaces que marca kseso estan en ingles y la verdad cuesta un poco de traducir, si alguien de la materia sabe explicar el tema esté seria de gran ayuda, ya que no se sabe si es absuluta, relativa..
ResponderEliminarmuchas gracias
Pues nada, Isaac, vamos a esperar entonces por ese alguien.
EliminarSólo una matización sobre tu última afirmación "ya que no se sabe si es absuluta, relativa..".
Estás completamente errado. Sí se sabe con total seguridad que el w3c la clasifica y engloba entre las absolutas.
Con independencia de que te cueste más o menos al estar mi enlace en inglés, la imagen siguiente no deja lugar a dudas:
El px es una medida absoluta.
Hola kseso ya leí tu artículo sobre este tema y me despejo las dudas que ya te conteste en ese post, cuando comentas aquí que estoy completamente errado, creo sinceramente que no, porque en ningún momento confirme que el pixel es absoluta o relativa ya que había comentado que en algunas web aparecía de una manera y en otras de otra manera. Pero volviendo al caso, ya puedo confirmas que es absoluta a partir de css 2.1
ResponderEliminarNo, no, Isaac
EliminarNo me expliqué con claridad.
En ningún momento quise decir que estuvieses equivocado en tus dudas (lógicas y comprensibles y totalmente lícitas) sino a la sentencia, afirmación o frase que transcribía. Al "No se sabe"
Espero que no te haya hecho sentir mal mi comentario. Ya viste que la existencia de ese otro artículo es mérito tuyo.
Un saludo
hola de nuevo kseso tengo una gran duda y no veo mucho sobre la materia y nadien que la explica bien, no viene a cuento en este post pero no sabia donde escribirtelo, porque no se si tienes alguno sobre este tema. bueno yo lo pongo y ya tu me diras.
ResponderEliminarNo entiendo bien el tema del valor computado en css, podrias definirmelo eficazmente? Gracias
se supone que valor computado es por ejemplo, si yo tengo un div con esta regla
BODY { font-size: 10pt }
H1 { font-size: 120% }
la propiedad 'font-size' del elemento H1 tendrá el valor computado '12pt' (el 120% de 10pt, el valor del padre). Como el valor computado de 'font-size' es heredado, el elemento EM que está dentro de la etiqueta H1 tendrá el valor computado '12pt' también.
¿se supone que abria que computar las medidas relativas a asolutas? lo digo porque si ese mismo codigo lo copias y lo mirais con el inspector de firefox , pone valor computado px, lo pone a px todo.
Agradecería tu respuesta a ver si lo comprendo bien
no te preocupez kseso en verdad puse "no se sabe", cuando tenia que haber dicho "yo no se", porque en verdad si se sabe que es absoluta, el que no lo sabia era yo o algunos de los que leismos algunos post con la especificacion de css2 o anterios.:)
ResponderEliminarHola, tengo una duda que me ha asaltado y no le encuentro una logica.
ResponderEliminarporque si le aplicó al elemento html la propiedad font-size: 2en por ejemplo, se puede ver como los 16px que le explican los navegadores a font-size ya no son eso 16px sino 32px. ¿A que esta haciendo referencia la unidad de medida 2em que se le aplica al elemento html? no lo entiendo, ya que siempre las unidades relativas son relativas a algo, pero aquí no se a que algo esta haciendo referencia ya que se lo estoy aplicando al elemento html.
Hola isaac.
EliminarVas a tener que revisar el corrector, porque te está escribiendo mal. De cualquier forma, el texto se llega a entender; pero la intención de la pregunta, no.
"...se puede ver como los 16px que le aplican los navegadores a font-size ya no son esos 16px sino 32px."
Si ya tenés la respuesta ¿cuál es la duda? Quizá haya que recordar que esos 16px puden ser cualquier otra medida que el usuario le haya configurado a su navegador, pero para el caso es lo mismo: si tiene por default 10px, los 2em del html serán 20px.
Esto lo encontrás en los mismos libros que leíste hace dos años, cuando empezaste a preguntar lo que aparece en cualquier manual.
Puede que alguien más lúcido que yo entienda cabalmente cuál es tu problema. Por ahora, aprovecho para recordar —también— que el navegador ve las medidas en pixeles. Siempre. La "traducción" a otras unidades es para la lectura del usuario o desarrollador, o es la confirmación de la unidad puesta en el CSS, donde no está leyendo medidas sino el texto de los valores.
Hola Isaac
EliminarCreo que de entrada lo mejor es remitirte a la documentación oficial:
-Los valores en porcentajes en el documento CSS Values and Units.
-La propiedad font-size en el documento CSS Fonts.
En todas las propiedades cuyo valor es el heredado o el computado lo hacen sobre alguno previo (el que corresponda a su ancestro previo más próximo habilitado para ello).
En el caso del elemento html en aquellas propiedades que han de tener un valor obligatoriamente (como es el caso de font-size) como en el documento no hay un ancestro sobre el que el "codiguero" pueda actuar (bueno está el elemento :root o el 'viewport' pero son otra historia) los valores iniciales o de cálculo son o bien los definidos por el navegador por defecto (por ejemplo en las propiedades 'color' o 'background-color') o por el usuario del navegador en sus preferencias de configuración como en el caso de font-size o las familias de fuentes.
Un saludo
kseso no llegó a entender bien la respuesta que me das. si no me equivoco quieres decirme que como el tag html no tiene un ancestro, la referencia de esos 2em que le he aplicado al html se haran sobre el valor inicial de la propiedad.¿estoy equivocado? según puede leer también en la especificación creo entender eso, ya que esta en inglés.
ResponderEliminarsi aclararmelo mejor.
(llege a pensar en algún momento que su referencia la hacia sobre el wiewport)
[code]
Eliminarhtml {
font-size: nV;
}
[/code]
donde para calcular valor final computado para font-size:
n es cualquier valor con signo positivo.
V es el valor declarado para el tamaño de las fuentes por el usuario en sus preferencias de configuración del navegador.
Y en caso que nV exprese un porcentaje (x%) la base para su cálculo es la misma.
Lo anterior es cierto siempre que el "codiguero" no haya declarado la propiedad font-size en la pseudoclase :root
Un saludo.
P.D.: creo que quizás tu estancamiento con esta cuestión es que no has reparado en el referente para el cálculo preferencias del usuario en la configuración del navegador.
En Chrome a través de "Configuración | Ajustes | Personalizar Fuentes" y en otros navegadores es similar.
vale, cuando en el tag html se le aplica font-size con una medida relativa (em,%) su calculo lo hace sobre el navegador (las preferencias del usuario en la configuración del navegador, si tiene 16px o cualquier otro valor lo hara sobre el), a no ser como bien dices "codiguero" no haya declarado la propiedad font-size en la pseudoclase :root. me imagino que el "codiguero" te referiras al que escribe el codigo (yo, el autor) porque nunca lo había escuchado.
EliminarKseso me gustaría matizar una cosa también. No voy a adelantarme a decir que este mal el artículo, que este yo equivocado al leerlo ni nada por el estilo. Lo voy a dejar en un “CREO” que la definición que ponéis está mal o yo lo he entendido mal”.
ResponderEliminarSegún leo en el artículo cuando se habla de la unidad de medida em dice esto:
Em es una unidad escalable que se utiliza en los documentos web. 1 em es igual al tamaño de la fuente font-size del padre. Su referencia es el tamaño (altura) de la letra m minúscula de la familia de la tipografía font-family declarada en el element.
Me llamo la atención esto justo:
1 em es igual al tamaño de la fuente font-size del padre
Según veo, la especificación dice que em “es Igual al valor computado de la propiedad Font-size del elemento en el que se utiliza. La excepción es cuando se producen en el valor de la propiedad font-size en sí, en cuyo caso se refieren a las medidas de fuente computados del elemento padre.
En ingles la especificación:
Aside from rem (which refers to the font-size of the root element), the font-relative lengths refer to the font metrics of the element on which they are used. The exception is when they occur in the value of the font-size property itself, in which case they refer to the computed font metrics of the parent element (or the computed font metrics corresponding to the initial values of the font property, if the element has no parent).
em unit
Equal to the computed value of the font-size property of the element on which it is used.
Mi duda:
Cuando en este articulo se dice que “1 em es igual al tamaño de la fuente font-size del padre” ¿se refiere a la a la excepción que dice la especificación? es decir estáis hablando del caso concreto de em y Font-size, porque en la especificcacion pone que” em “es Igual al valor computado de la propiedad Font-size del elemento en el que se utiliza”
¿No será que no diferencias o confundes o prefieres ignorar lo que es el valor de cómputo (o equivalencia) de una unidad relativa al emplearse en una declaración CSS del valor computado de esa declaración al aplicarse a un elemento?
Eliminarp {font-size: 5em;}
En la regla anterior:
Valor de 'em' = el valor computado del tamaño de la tipografía del padre de cada párrafo.
Valor computado de font-size para cada 'p' = 5 veces el valor de 'em' = 5 veces el valor computado del tamaño de la tipografía del padre del párrafo.
El cálculo necesario para el "Computed value" de una propiedad, normalmente implica convertir valores relativos (como los expresados en unidades 'em' o en porcentajes) a valores absolutos.
ResponderEliminarp {font-size: 5em; margin:2em}
valor de em de margin = la referencia es el tamaño de letra del propio elemento no del padre del párrafo. Es decir el valor computado del tamaño de la tipografía del propio elemento.
a esto es lo que me refiero.
Sube hasta el título y mira a qué entorno o propiedad se circunscribe el artículo.
EliminarTraer a colación la propiedad margin me parece un despropósito que no alcanzo a comprender.
Por última vez y como cierre te lo repito un vez más:
La unidad 'em' en la propiedad 'font-size' declarada a un elemento toma como base para el cálculo el valor computado del tamaño de la tipografía del padre de dicho elemento.
Que es lo mismo que el c&p que hiciste de la especificación.
Si, el copi y mención esta hecho de la especificación que tú mismo me enlazaste.
EliminarHe traído la propiedad margin porque si leemos las últimas preguntas que llevo haciendo sobre la unidad em se puede ver claramente la respuesta que quería obtener y no he obtenido, por eso he metido la propiedad margin.
Mi duda anterior:
Cuando en este articulo se dice que “1 em es igual al tamaño de la fuente font-size del padre” ¿se refiere a la a la excepción que dice la especificación? es decir estáis hablando del caso concreto de em y Font-size, porque en la especificcacion pone que” em “es Igual al valor computado de la propiedad Font-size del elemento en el que se utiliza” ¿Se refiere a la a la excepción que dice la especificación, es decir estáis hablando del caso concreto de em y Font-size?
Vuelvo a remarcar: ¿Se refiere a la a la excepción que dice la especificación, es decir estáis hablando del caso concreto de em y Font-size?
Creo que mi pregunta no era tan difícil de entender, solo quería saber si la unidad em en Font-size hacia referencia siempre al valor computado del elemento padre o si en otras propiedades como por ejemplo en margin es igual al valor computado de la propiedad Font-size del elemento en el que se utiliza.
Mi humilde opinión es que el artículo podría ser un poco mas especifico cuando habla de la unidad de medida em y nombrar en ella la excepción, ya que aunque se mire el titulo (que si lo he mirado varias veces), si después leemos el post no se aclara bien la unidad em y sus referencias dando lugar a confusiones.
A mi entender y repito, no era tan difícil explicar que si em se aplica a la propiedad Font-size hace referencia al valor computado del elemento padre y si se aplica a la propiedad margin por ejemplo es igual al valor computado de la propiedad Font-size del elemento en el que se utiliza. Como cierre gracias por tu tiempo y respuestas.
o también asi:
ResponderEliminarp {font-size: 20px; margin:2em}
valor de em de margin = la referencia es el tamaño de letra del propio elemento no del padre del párrafo.Es decir el valor computado del tamaño de la tipografía del propio elemento.