¿Cuáles son las fuentes Web seguros?

Prácticamente todas las computadoras personales tiene un conjunto de fuentes instaladas. Estas fuentes son usualmente colocados por el fabricante del equipo o se establece el valor por defecto de las fuentes para el sistema operativo que el equipo está utilizando. Es posible instalar fuentes adicionales por su cuenta.

Sin embargo, no todos los conjuntos de fuentes son creados iguales. Equipos diferentes pueden tener conjuntos muy diferentes de fuentes instaladas, y los usuarios de computadoras más casual nunca se sabe la diferencia. Cuando se está diseñando una página web, es necesario tener esto en mente. Si decide utilizar una fuente en su página que el visitante no tiene, ese tipo de letra se hacen de manera diferente (y muchas veces poco atractiva) en la máquina del visitante.

Así que, ¿cómo asegurarse de que sus fuentes se verá bien en el mayor número de ordenadores por ahí? Fácil: El uso de fuentes Web seguro. Medida que la informática evoluciona, las consideraciones para la Web han tenido efecto en los modernos sistemas operativos y navegadores Web. Entre estas consideraciones es una lista de fuentes Web seguro de que los diseñadores Web pueden utilizar para asegurarse de que sus fuentes mostrará correctamente. Fuentes de la Web seguros son un conjunto de fuentes muy comunes que vienen instalados en el equipo de casi todos los que hay. Algunos (realmente) los equipos más antiguos no pueden tener algunas de las fuentes que consideramos Web seguro a día de hoy, pero son una minoría.

¿Quién debe usar Web Safe Fuentes?

Cada diseñador Web deberían utilizar las fuentes Web seguro. Hay algunos casos donde se desea utilizar una especial y no la Web de fuente segura, pero estos casos son poco frecuentes (y vamos a discutir casos como este en un poco). Usted quiere asegurarse de que sus fuentes son siempre fáciles de leer por sus usuarios. Al mantener los tipos de letra legible con fuentes Web seguro, usted conserva de lectores y hacer que su sitio sea más accesible a una gama más amplia de personas.

Creo que la mejor respuesta a la pregunta "¿Quién debería utilizar las fuentes Web seguro" se puede resumir en una palabra: "tú".

¿Por qué utilizar fuentes web seguro?

Como se explicó anteriormente, si usted utiliza una fuente en su página que el visitante no tiene instalado, el navegador se elige una fuente de reserva que usted no tenga intención de aparecer en tu página. A menudo, el resultado es un texto fea que no es del todo agradable para leer.

Si un visitante no puede leer con fluidez su sitio, entonces él o ella no puede obtener la información que proporcionan, y esta es la razón de todo a sus visitantes están en su sitio! Incluso si el texto en su sitio es feo y alguien decide caminar penosamente a través de él para su contenido, aún se verá desagradable y usted conservará tantos lectores. Un sitio web con los lectores no es un desperdicio.

Uso de fuentes Web seguro es sólo una parte de un conjunto más amplio de las prácticas de diseño que mantener su sitio fácil de usar. No se esfuerce los ojos de un lector, no hacer que la información difícil de encontrar, y asegurarse de que puede progresar a través de su sitio y sus contenidos sin tener que pensar en ello. (Puede leer un artículo detallado sobre la construcción de la tipografía aquí.) Si en algún momento alguien se ve en su sitio y tiene incluso una milésima de segundo para pensar, "¡Uf, eso es parte del texto feo", que ha sacudido la experiencia. Idealmente, el encuentro con toda su sitio debe ser suave como la seda, y utilizando una fuente de seguridad Web es una parte importante de la consecución de ese objetivo.

Cuándo utilizar fuentes Web seguros?

Como regla general, siempre que utilice fuentes Web seguro para el contenido de su página.

¿Dónde están las fuentes Web aplicables a salvo?

Las cabeceras de texto, enlaces, y el contenido de todos deben utilizar fuentes Web seguro. Si va a utilizar el texto normal para su logo, también deberá utilizar una fuente de seguridad Web para ello. De hecho, una de las pocas excepciones a la utilización de fuentes Web seguro es que si usted decide utilizar el texto en las imágenes. Si usted planea utilizar imágenes de parte de su texto, entonces es seguro de usar otras fuentes, porque las imágenes van a aparecer el mismo en la computadora del visitante como lo hace por su cuenta. Sin embargo, nunca debe usar las imágenes para todos los de su texto. Imágenes para el texto debe usarse con moderación. Logos y algunas cabeceras de uso de imágenes. Todo lo que es de texto de contenido o de otra manera normal, sin embargo, debe utilizar una fuente de Web seguro.

¿Cómo puedo utilizar las fuentes Web seguras, y que son seguros?

Incluir las fuentes Web seguro en tu CSS con las normas de familia de la fuente o tipo de letra. (He incluido los más útiles a continuación para usted.)

Hay un buen número de fuentes Web seguro. Muchos de ellos son muy similares a otras fuentes de Web segura, y en la práctica son esencialmente los mismos. Una regla CSS para su familia de la fuente, por ejemplo, puede tener este aspecto:

  :  Arial ,  Helvetica ,  sans-serif ; font-family: Arial, Helvetica, sans-serif; 

La fuente primera de la lista, Arial, es una fuente muy común disponible en la mayoría de los ordenadores, así que con seguridad puede apostar que se mostrará correctamente en la pantalla de un visitante cuando visiten su sitio. En casos raros, un equipo no tenga instalado Arial, sin embargo. Mayores los ordenadores de Apple, por ejemplo, no puede tener Arial, así como de varias otras fuentes. Helvetica, sin embargo, es ampliamente instalada entre los ordenadores de Apple, y parece muy similar a Arial, Helvetica que aparece en segundo lugar. Cuando un navegador no puede encontrar la fuente primera de la lista, busca las fuentes en el siguiente orden. En este caso, Helvetica se utilizará cuando Arial no está instalada.

Y en casos extremadamente raros, algunos equipos no pueden tener Arial o Helvetica instalado. En este caso, "sans-serif" se utiliza. Se trata de una reserva, tipo de letra por defecto que el navegador Web de uso si no puede encontrar ninguna de las fuentes anteriormente mencionadas.

Hay cuatro tipos (o familias) de las fuentes Web segura: serif, sans serif, cursiva, y monospace. Cada uno de estos tiene su propia fuente de reserva (como sans-serif más arriba). Que las reservas para cada familia, respectivamente, son: serif, sans-serif, cursiva, y monospace. Usted encontrará que las normas de fuente casi siempre incluyen uno de estos retrocesos, y siempre pasado.

Las fuentes se muestran en formato CSS de esta manera puede copiar y pegar si no tengo ganas de escribir a cabo. Esto es probablemente lo que va a ver las fuentes más de las veces, de todos modos.

Serif Web Safe Fonts

El arte del diseño web tiene muchas directrices generales que se han arraigado en la Web se ha convertido en más firmemente arraigados en el establecimiento de la Web 2.0. Tenemos otros artículos que tratan sobre cuándo utilizar serif y sans serif, de modo que todo lo que diré es que, en general, remates en general han sido utilizados principalmente para las partidas. A continuación se presentan las fuentes Web seguro que usted puede utilizar para sus uniones.

Sans Serif Web Safe Fonts

Sans serif se utilizan normalmente para la mayor parte de los contenidos de un sitio Web.

Monoespacio Web Safe Fonts

Fuentes de la Monospace son útiles cuando se quiere asegurarse de todos los personajes se alinean exactamente con el mismo ancho. Viendo del código o de datos tabulares sin necesidad de utilizar una tabla se usa para fuentes de espacio sencillo buena.

"Cursiva" Web Safe Fonts

En la actualidad, no hay muchas fuentes Web seguro cursiva. Hay una "cursiva" de reserva, como sans-serif, serif y monospace, pero para la mayor parte, esto es muy utilizada. Hay algo de debate si Comic Sans MS es un partido compatible con la fuente de reserva cursiva. Algunos piensan que pertenece Comic Sans MS Sans Serif con, y otros dicen que es la fuente más parecida a una normal "cursiva"-como se siente que usted puede obtener actualmente en una fuente de Web seguro.

En cualquier caso, cursiva y Comic Sans MS suelen evitarse. Personalmente, mi opinión es que usted debe evitar ambos en conjunto.

En algunos casos, se pueden utilizar otras fuentes?

Sí, hay algunas excepciones a la "Utilizar siempre fuentes Web seguro" regla. A veces, debido a circunstancias fuera de su control, simplemente se debe utilizar una fuente que no se considera Web seguro. Un cliente, por ejemplo, puede tener una empresa que ha utilizado el mismo tipo de letra de los signos de su empresa, marcas registradas, logotipos y más de un siglo. Llevar un negocio como el que a la Web sin perder su larga integridad y reconocimiento de marca probablemente sería imposible con una fuente de Web seguro.

O, tal vez, como diseñador, quiere experimentar con el diseño y tomar las cosas a la última. Siempre he creído que el arte verdadero y la experimentación se encuentra en la capacidad del artista para ver más allá del ámbito normal y paso de las prácticas estándar. Si usted comparte esta idea, entonces, sin duda, en algún momento se va a buscar la manera de jugar con no-Web-Fuentes de la seguridad en sus páginas.

A continuación se presentan las mejores maneras para que no utilicen la Web Fuentes de seguridad en su página, y todavía tienen que rendir correctamente en la mayoría de equipos que hay.

Proporcionar descargas para sus usuarios

Si desea utilizar una fuente muy específicas para su sitio web, puede incluir un vínculo al archivo de fuente en la página. De esta manera, los visitantes pueden descargar e instalar la fuente, a continuación, visite su página y ver la fuente prestados correctamente, sin inconvenientes reales.

Se trata de una gran cantidad de trabajo que esperan al visitante a hacer, sin embargo, sólo para ver su sitio como usted quiera verlo. El visitante por lo general no quieren hacer nada especial, sólo para ver una página web. Exigencia de que alguien vaya por la molestia de descargar e instalar una fuente sólo para ver su sitio es una gran manera de perder los visitantes. Las probabilidades son, la mayoría de sus visitantes ni siquiera saben por dónde empezar la instalación de la fuente, de todos modos.

También hay algunos problemas legales si usted toma esta ruta. Si usted no es la persona que creó la fuente, entonces lo más probable es que no tienen los derechos legales para distribuirlo.

Debido a estas deficiencias importantes, este método es ampliamente evitarse.

Usar las imágenes

Cuando se utiliza un editor de imágenes como Photoshop, The GIMP, o incluso MS Paint, puede crear imágenes que utilizar cualquier fuente que desee. Poner la imagen en la página y se verá igual en el equipo de un visitante como lo hace en el suyo. A continuación se muestra una imagen que no utiliza tres fuentes de Web segura que vino pre-instalado en mi MacBook.

Si usted, como visitante de este sitio, están en un Mac, un PC con Windows, en tu sabor favorito de Linux, o incluso navegar en otra cosa, como un PDA o un iPhone, las fuentes anteriores muestran correctamente. Esto es cierto incluso si su PC no dispone de estas fuentes instaladas.

Esta es una gran manera de mostrar cualquier tipo de letra ¿Quieres que tu logo, anuncios, o algunos de sus cabeceras. Sin embargo, no se puede confiar en las imágenes de contenido real. Un visitante no puede resaltar el texto con el ratón, lo que significa que si se desea copiar y pegar el texto en algún lugar (por ejemplo, para enviar su nombre de la empresa a un amigo), no pueden hacerlo. Además, el texto en las imágenes no pueden ser leídos por lectores de pantalla, que algunas personas con discapacidad utilizan para navegar por la web. Cualquier texto que tiene en sus imágenes no serán accesibles a estas personas. Además, algunas personas navegar con imágenes desactivado o tienen sus imágenes bloqueadas por un tercero, como en algunas oficinas de las empresas que utilizan un servidor proxy. Por último, los motores de búsqueda no puede leer correctamente y texto de catálogo de imágenes.

En conjunto, cualquier texto que utiliza en sus imágenes en primer lugar debería servir como decoración propósito. Hay una alternativa sin embargo: utilizar una técnica de reemplazo de la imagen.

Las técnicas de reemplazo de la imagen

Hay técnicas que puede utilizar en el CSS y (X) HTML que le permitirá utilizar las imágenes en lugar de texto normal, manteniendo la accesibilidad de su sitio web y los motores de búsqueda. Notificación de la cabecera que dice "las técnicas de reemplazo de la imagen" es una imagen. Utiliza una tipografía llamada Rockwell (que también está instalada en mi MacBook) y la fuente es de color verde en lugar del negro típico que hemos estado utilizando.

Este encabezado utiliza una técnica de reemplazo de la imagen llamada Single Pixel Sustitución. Utiliza CSS y (X) HTML para mostrar la imagen, pero si alguien tiene CSS desactivado, la imagen no se mostrará. Para resolver este problema, hay un elemento span ocultos que todavía claramente mostrar el texto "las técnicas de reemplazo de la imagen" de esta cabecera.

En cuanto a los lectores de pantalla y otras situaciones en que las imágenes pueden no ser accesibles, hay una imagen de 1 pixel con el texto alternativo que dice: "las técnicas de reemplazo de la imagen". De esta manera, no estamos dañando la accesibilidad y los lectores de pantalla seguirá recoger el texto en la que tenemos la intención.

Uno de los inconvenientes sólo para usar esta técnica es que agrega algunos elementos ajenos a su (X) HTML. No hacer daño nada, pero sí añadir más volumen a su trabajo y el tamaño del archivo de su documento. También hace más difícil de seguir cuando se lee el código de su sitio. Aún así, es una fantástica manera de añadir tipografía ricos a su sitio.

El lector astuto puede haber tomado ya un vistazo a esta sección del artículo para echar un vistazo a la CSS que usa aquí. Tenga en cuenta que tuve que modificar un poco la técnica para su uso en WPDFD ya que los estilos existentes ya tiene pre-. Si quieres probar esta técnica de reemplazo de la imagen en su sitio, permítame ofrecerle el mejor código para trabajar con.

Incluso me voy a dar su imagen para trabajar. En primer lugar, descargar y guardar estos. (Botón derecho y guardar.)

• spacer.gif - Sí, sé que el sentimiento general sobre spacer.gif. Vamos a mantenerlo entre nosotros, sólo por esta vez.
• irt.gif. Esta es la imagen de cabecera.

En segundo lugar, agregue este código en el archivo CSS.

  body ( 
  :  250px ; width: 250px; 
  :  30px ; height: 30px; 
  :  url(irt.gif) ; background-image: url (irt.gif); 
  ) 
  # header span ( 
  :  none ; display: none; 
  ) 

Por último, aplicar la sustitución de la imagen con esto en tu (X) HTML:

	


  Las técnicas de reemplazo de la imagen 

Ver en el navegador, y usted debería ver el efecto en el trabajo. Usted puede encontrar una lista de técnicas de reemplazo de la imagen sobre el Mezzoblue, que es donde me presentó a esta particular técnica de imagen de sustitución.

Use sIFR

sIFR (Scalable Inman Flash Replacement) es quizás la forma más popular de usar ricos, fuentes hermosas en tu página. De hecho, se puede ver un ejemplo de ello en la parte superior de cada artículo WPDFD. El título de este artículo, "El saber acerca de las fuentes Web de seguridad," se muestra en la mayoría de los usuarios en una tipografía llamada interestatal, que no suele ser una fuente Web seguro.

Hay sólo unos pocos pasos para la creación de sIFR, incluido un proceso llamado "fuente de afinación" (no te preocupes, no es difícil), pero todavía en general tienen aún un diseñador Web experimentado desarrollador de aproximadamente 10 minutos para configurarlo a través de un sitio que antes no usarlo.

Es fácil de configurar, sin embargo, y sus beneficios son muchos. Proporciona escalable, texto accesible en una fuente de su elección por dejar caer un elemento Flash con un fondo transparente en lugar de su texto original. Si un visitante de su sitio no dispone de Javascript, Flash, o bien instalado, a continuación, el texto sigue apareciendo en su página en un estilo CSS, encabezado normal.

Personalmente, sIFR es el método que yo recomendaría si usted quiere realmente fortalecer la tipografía de su sitio. Es importante señalar, sin embargo, que sIFR no debe utilizarse para el contenido principal de su sitio. Utilízalo para cabeceras, citas, lemas, y otros pequeños, pero significativos, trozos de texto.

En la actualidad, sIFR 2 es el estándar, pero sIFR 3 está en pruebas beta. Cuando sIFR 3 es una versión beta y no he tenido tiempo para jugar con él, tengo la intención de cubrir este tema con más detalle. Mientras tanto, si los intereses de sIFR pero usted no quiere pasar por toda la instalación, puede que desee echar un vistazo a una herramienta que lo hace todo por ti.

Así que ahí lo tienen!

Bueno, llegó a esta página y leer este artículo para que podáis estar informados sobre las fuentes Web seguro, y ahora se conocen todos los aspectos más importantes de ellos. Es probablemente una buena idea marcar esta página para que usted pueda tener una lista de fuentes Web mano segura en todo momento.

por D. Rodríguez