Aunque embeber tipografías en nuestras webs es una buena solución para poder usar fuentes que anteriormente los diseñadores no podíamos usar en web por no ser fuentes seguras; es una gran desilusión ver que a veces estas fuentes no se renderizan demasiado bien en IE7 e IE8.

Un truco que he visto recientemente y que me alegrado muchísimo es el de Allcreatives.net que hacen lo siguiente:

1

h2, p {font: 36px/44px 'OldSansBlackRegular', Arial, sans-serif;letter-spacing: 0;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);zoom:1;

Le añaden un filtro especial y le adjuntan una imagen (que es trnasparente) y le ponen el zoom a 1. Está muy bien.

En la web que os he indicado podéis bajaros en ejemplo en un .zip y además ver cómo funciona en vuestro explorer.

Vídeo muy útil que explica como trabajar con @font-face. Deciros que el orden de carga sí importa. Es esencial que carguemos la versión .eot de primera.

Un código CSS de @font-face quedaría así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

@font-face {
font-family: 'blok-regular';
src: url('type/Blokletters-Potlood.eot');
src: local('Blokletters Potlood Potlood'),
 local('Blokletters-Potlood'),
 url('type/Blokletters-Potlood.ttf') format('truetype');
}

@font-face {
font-family: 'blok-italic';
src: url('type/Blokletters-Balpen.eot');
src: local('Blokletters Balpen Balpen'),
 local('Blokletters-Balpen'),
 url('type/Blokletters-Balpen.ttf') format('truetype');
}

@font-face {
font-family: 'blok-heavy';
src: url('type/Blokletters-Viltstift.eot');
src: local('Blokletters Viltstift Viltstift'),
 local('Blokletters-Viltstift'),
 url('type/Blokletters-Viltstift.ttf') format('truetype');
}

h1 { font-family: blok-heavy, helvetica, arial; }

¿Os apetece un café? En la web Art in My Coffee podemos ver cafés decorados con mucho gusto. En este blog agrupan arte hecho en café con leche:

Tercera y última grabación de las sesiones sobre Responsive Web Design realizadas en directo por Daniel Martínez, @Wakkos. En esta ocasión se centraron en explorar las Mediaqueries de CSS3, explicando las maneras de aplicar estilos CSS que solo afecten a aquellos dispositivos que tienen determinadas características.

Esta es la segunda entrega de unas clases impartidas por el diseñador Daniel Martínez @Wakkos dentro de los cursos de DesarrolloWeb.

Hablarán sobre medidas relativas y en porcentaje, aspectos relacionados con las unidades y cómo aplicarlos a tamaños de fuentes tipográficas y a tamaños de los elementos. También nos darán consejos sobre imágenes flexibles.

Muy útil, ¡gracias!

Esta es la primera de las tres sesiones gratuitas que impartirán en DesarrolloWeb.com sobre Responsive Web Design, en la que han repsasado algunos aspectos teóricos y diversos aspectos prácticos sobre las hojas de estilo en Cascada.

Tratan trucos y análisis de las posibilidades de Responsive, como son los siguientes:

• Nuevas maneras de navegar por Internet, cómo debemos encarar el trabajo de diseñar una web en la Internet Multidispositivo
• Cómo utilizan Responsive sitios web de referencia y los diferentes layouts que se adaptan a dispositivos según su anchura
• Estilos CSS para adaptar las cajas a distintas anchuras, min-width y max-width
• Diferencias entre Float e Inline-block
• Modelo de caja en CSS3 y mejoras con el atributo box-sizing
• Trucos para compatibilizar algunos atributos de CSS en Internet Explorer

Las media queries son unas técnicas mediante las cuales gracias a la evaluación previa de unas características del navegador, podemos variar ciertas especificaciones de estilos para ellos. En la práctica funcionan como condicionales. Son verdaderamente útiles a la hora de diseñar webs que se adapten correctamente a mayoría de dispositivos y resoluciones que ahora conviven (o a las que el diseñador en el momento de crear la web le preocupen).

Este concepto se está llamando adaptative design o responsive design.

Su uso generalizado es relativamente nuevo y parece que está prosperando rápidamente, pero ya en Mayo del 2010 podíamos leer artículos sobre el tema en A List Apart (Responsive Web Design).

El W3C también recoge documentación sobre Media Queries, que es de obligada consulta para iniciarse en esta técnica.

Continue reading »

Si al maquetar una web nos encontramos con que una serie de elementos no se ven bien en Explorer, nos veremos obligados a crear una hoja de estilos para este navegador para definir esas diferencias. Entonces dispondremos un Hack condicional en el head de nuestra página justo después de la llamada de la hoja de estilos CSS principal.

Este condicional sería así, dentro de los corchetes ponemos la url de la hoja de estilos CSS especial para explorer:

1
2
3
4
5

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Podemos identificar el navegador exacto para el que es la excepción:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Para explorer 7
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Para explorer 8
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

O puede ser para versiones anteriores a la que indicamos. En este ejemplo de abajo la condición es sólo para versiones anteriores a la 9:

1
2
3
4
5

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

O para versiones anteriores pero también incluyendo la que indicamos:

1
2
3
4
5

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

También podemos escribir la condicional de modo que sea para versiones superiores a la indicada:

1
2
3
4
5

<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Si hacemos que el menú se componga de las categorías de nuestras entradas

1
2
3
4
5

<ul>
 <?php wp_list_categories('title_li='); ?>
</ul>

quizás nos vendrá muy bien este plugin, Category Order, que nos las deja ordenar mediante drag & drop y así conseguiremos ordenar a nuestro gusto los enlaces de nuestro menú.

Un plugin estupendo.

Hoy quiero hablaros de otro juego de tipografías, se trata de Kern Type. Kern Type es un juego para aprender el kerning.

El juego es sencillo. Aparecerán en pantalla una serie de palabras, en las cuáles algunas letras se podrán mover. Se trata de distribuir el espacio entre letras del mejor modo posible. Una vez hecha nuestra solución, nos dirán cómo hemos quedado una vez comparada nuestra solución con la de experimentados tipógrafos.

Este juego ha sido desarrollado por Mark MacKay de Method of Action, blog donde hay varios cursillos para diseñadores.