Posted on Mar 13, 2011

Utilizando Helvetica Neue en tus diseños web

Si te dedicas al diseño es muy probable que adores la tipografía Helvetica. Si además te dedicas al diseño web, sabrás que no debes utilizarla ya que gran parte de tus visitantes no la tendrán disponible. Por esa razón, está muy extendido el uso de Arial como tipografía sans serif en la web.

Sin embargo, a veces, sería deseable darle la vuelta a la tortilla, pensar en utilizar la tipografía que queramos, en este caso la Helvetica Neue, y buscar un plan B para aquellos que no la tengan disponible. Es decir ¿Por qué privar a esos usuarios, por pocos que sean, de ver un diseño con la tipografía que realmente queremos utilizar? Esto o podemos hacer en la defición de la tipografía en nuestra hoja de estilo:

body {font-family: “Helvetica Neue Light”, “HelveticaNeue-Light”, Helvetica, Arial, Sans, sans-serif;}

Quizás, para que la tipografía funcione exactamente como tú quieres, quieras definir un poco mejor sus espaciados y su peso.
font-weight: 100;
letter-spacing: 0.1em;
line-height: 1.6;

Verás este texto en Helvetica Neue si estás en un Mac, en caso contrario, seguramente se mostrará en Arial o Sans.

Actualización: Y aquí está la captura tal y como pide luiife en los comentarios:

helvetica en la web Utilizando Helvetica Neue en tus diseños web

Helvetica en la web

Posted on Feb 11, 2011

Posted on Jan 15, 2011

Wrapper en HTML5

En la maquetación con capas, normalmente utilizamos capas envolventes (que solemos identificar como div#wrapper) para agrupar todo el contenido

Solíamos definir algo así:

body {margin: 0 auto;}
wrapper {width: 1024px;}

En HTML5 ha cambiado el uso de ciertos elementos. Lo normal, para guardar una coherencia semántica, será utilizar el atributo <div /> sólo cuando el contentido no encaje como section, article, etc…

Sin embargo podemos utilizar <body /> como wrapper, dando un color de fondo a la etiqueta <html />, para luego estructurar el contenido

html {background-color: #000;}
body { background-color: #fff; margin: 0 auto;  width: 1024px;}