Tamaños de las fuentes en html

Cuando uno se enfrenta a la realización de una página web y más concretamente al del diseño de la misma, una de las decisiones más importantes que se deben tomar en la misma, es la forma en la que se van a indicar los tamaños, y en concreto el de las fuentes.

Su importancia va más allá del simplemente estético, ya que una mala elección del tamaño de la fuente puede conllevar a que sea inaccesible para determinados tipos de personas o por lo menos que sea incomodo para el usuario de la misma, por lo que no es ni mucho menos para tomárselo a broma. Además, hay que tener en cuenta el comportamiento de los distintos navegadores con estas formas, así como el funcionamiento en temas de herencia de estas propiedades.

Para ayudar un poco con este tema voy a hacer un análisis pormenorizado de las distintas posibilidades, describiendo como se usan cada uno y, como no, como las tratan los navegadores. en concreto voy a hablar de las medidas en px, %, em y con el uso de palabras clave, dejando de lado el de pt ya que su uso es simplemente para impresión.

px

El px se usa como acompañamiento de un valor numérico y define el número de píxeles de alto que va a tener el texto que estemos indicando.

Es una de las medidas más precisas, pues 11 píxeles son 11 píxeles, pero también una de las menos recomendadas en los diseños accesibles, puesto que no permite al usuario configurar el tamaño de la letra y no todos los navegadores incluyen un zoom total (aunque si lo hacen casi todos lo modernos).

Los tamaños en píxeles no son heredados en cascada, pero si son tomados en cuenta en caso de usar las palabras clave en sucesores.

Aunque todos los navegadores toman está medida con el mismo alto, no todos la muestran igual puesto que difieren en la anchura de la letra.

%

El % se usa como acompañamiento de un valor numérico y define el tanto por ciento con respecto al tamaño base que debería tener, este tamaño base viene definido según la forma de heredar las propiedades de CSS y hay que tener especial cuidado con ello.

Un tanto por ciento mayor que 100 aumenta el tamaño de letra, mientras que uno menor lo reduce.

En caso de ser usado en un página, es recomendable usar un tamaño base para el body (y opcionalmente para otras etiquetas básicas) para poder tener un mayor control. Una de sus principales ventajas es que su tamaño se modifica en los navegadores antiguos (lease IE6 y anteriores).

em

El em se usa como acompañamiento de un valor numérico y su definición es una la más complicadas de todas, puesto que es algo ambigua, en teoría un 1em es el tamaño base del elemento, por defecto es 16px, pero en caso de modificar el tamaño de la fuente del body, este será el tamaño del em. Su valor se ve modificado en cascada y por tanto hay que tener cuidado con como se trata puesto que si se coloca el tamaño del párrafo a 1.3em y el de los elementos de listas li a 1.2em, un elemento de lista dentro de un párrafo tiene 1.3*1.2.

El valor numérico es tratado como un multiplicador del valor base y por tanto es parecido al uso de %, en concreto 1.5em ~= 150%, al menos en teoría.

Un uso clásico de esta propiedad es especificar el valor de la fuente del body a 62.5% (10px en teoría) y empezar a modificar el resto a partir de ahí.

Palabras clave

se trata de palabras concretas para el tratamiento de medidas, pueden ser: xx-small, x-small, small, medium, large, x-large, y xx-large y las medidas relativas larger y shorter.
Su comportamiento, según parece, es muy parecido en los distintos navegadores y por tanto puede ser una buena forma de trabajar para diseños sencillos poniendo un tamaño base y jugando con la palabras clave relativas.

Con toda esta información se puede comenzar un diseño web mucho mejor y avanzar más rápido siempre y cuando se haga un buen uso de la potencia de las distintas posibilidades.

Via: css-tricks.com

Selects con vida gracias a jQuery

En esta nueva andadura del blog voy a escribir mucho sobre diseño/desarrollo web, sin lugar a duda una de mis mayores pasiones en el mundo de la informática y como no tengo tiempo ni posibilidad de escribir sobre todo lo que leo y muchas veces es mejor un buen enlace que un mal post, iré poniendo breves post con enlaces de páginas de donde leo información en la que vengan tutoriales/consejos/ayudas interesantes.

Es el caso de éste, en el que he descubierto un nuevo plugin para jQuery (llamado Javascript Image Combobox ) con el que es posible añadir más funcionalidad a los, en general sosos, selects de html, pudiendo añadir imágenes en ellos, se puede leer el artículo en anieto2k.

Colocaré en breves una prueba del mismo en la zona de pruebas.