Probando fuentes | Oloblogger No es que se me ocurran muchas aplicaciones para este código, pero siempre puede de ser de utilidad para alguien. Se trata de unos botones ...

16 de octubre de 2009

Probando fuentes

No es que se me ocurran muchas aplicaciones para este código, pero siempre puede de ser de utilidad para alguien. Se trata de unos botones que mediante instrucciones JavaScript de estilo, permiten que el lector de una web vea que aspecto tendría la página que está visitando, con los distintos tipos de fuentes considerados estándar.

Tipografías estándar son las que tienen instaladas una mayoría considerable de los ordenadores y en una información más exacta, las que nos relaciona Cosas Sencillas. Cada uno puede ver en una página web, sólo las tipografías que tiene instaladas en su propia máquina. O sea, que si pones una fabulosa fuente en tu espacio, tan buena como poco común, lo más seguro es que tú y sólo tú la veas como es debido. El resto verán unas letras distintas, las que estén definidas por defecto. Como podeis comprobar en el anterior enlace, incluso hay algunas fuentes "estándar", que vienen con Windows y no con Apple, otras para la versión Vista...

Realmente no hay una fuente que valga para todos los equipos, arquitecturas y sistemas operativos y por eso es conveniente saber cómo funciona el selector font-family. El valor de esta propiedad debería ser en un principio el nombre de la fuente deseada, pero por lo anteriormente explicado, es conveniente montar una relación de fuentes que el navegador irá intentando leer en el orden en que se escriban, hasta encontrar una que el usuario efectivamente tenga:

p {
font-family: Cambria, "Times New Roman", Times, Serif;
}

Hay dos tipos de nombres de tipografías, el que hace referencia a la fuente en sí y el de las familias genéricas. Poner una familia genérica sirve para el caso de que todas las anteriores fallen. Las posibilidades son serif, sans-serif, cursive, fantasy y monospace.

Una observación. La relación de fuentes debe ir separadas por comas y los nombres de fuentes que contienen espacios en blanco, deben ir entrecomillados si se utiliza con STYLE en HTML.

Y ahora el código por si quereis poner unos botones de este tipo:

<style type="text/css">.botones ul {list-style:none; float:right;margin:0px 0px 0px 10px;text-indent:0px;} .botones li {width:130px;padding:2px;margin:0px 0px 2px 0px;background:#990000;color:#ffffff;text-align:center;border:1px solid #000000;text-indent:0px; } .botones li:hover {background:#cc00000} .botones li a {width:130px;background-image:none;text-indent:0px;color:#ffffff;display:block;} .botones li a:hover {width:130px !important;background:#cc0000;} </style><div class="botones"><ul><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Arial';">Arial</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Arial Black';">Arial Black</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Comic Sans MS';">Comic Sans MS</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Courier New';">Courier New</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Georgia';">Georgia</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Helvetica';">Helvetica</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Impact';">Impact</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Lucida Sans';">Lucida Sans</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Times New Roman';">Times New Roman</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Trebuchet MS';">Trebuchet MS</a></li><li><a href="javascript:void(0);" onclick="document.getElementById('CONTENEDOR').style.fontFamily = 'Verdana';">Verdana</a></li></ul></div>

Añadiendo nuevos elementos a la lista, podeis incluir otras fuentes que considereis oportuno probar con este sistema. El código está preparado para colocar en una entrada o un gadget añadido desde Elementos de página, pero lo más importante es que escojais el nombre de un CONTENEDOR (#) lo más genérico posible para que se pueda cambiar el tipo de letra de toda la página y no sólo una parte de ella. Esto ya va en función de cada plantilla. Si no estais muy seguros podeis hacer pruebas con OUTER-WRAPPER o MAIN-WRAPPER que suelen ser muy comunes en las plantillas Blogger.

Hay sistemas para forzar que el usuario vea la fuente que el programador desea a pesar de que el primero no la tenga, pero no están exentos de inconvenientes. Uno es convertir el texto en imágenes que diseñaremos con nuestras propias fuentes y colocar dichas imágenes en su lugar, pero como podeis imaginar, es pesado de hacer, no es bueno para la correcta indexación de las páginas y además ralentizará la carga de la misma. Otros sistemas basados en scripts sIFR, nos liberan de la tarea de conversión, pero no elimina todos los inconvenientes.

De momento, el futuro está en la generalización de @font-face de CSS3 para todos los navegadores, que es la forma más sencilla y práctica de conseguir utilizar tipografías no-estándar, ya que este atributo permite indicar la dirección de una fuente en la hoja de estilo y esta se descargará automáticamente en el ordenador del usuario.



Hacer este artilugio se me ha ocurrido al hilo de la polémica sobre Oloblogger, que ha provocado mi curiosidad y me ha hecho leer mucho sobre el tema del uso de la tipografía Comics Sans. Tanto que estoy planteándome cambiarla. El caso es que parece que esta tipografía si bien es una de las más utilizadas, también es la más odiada dentro del mundo del diseño web. O sea, a los usuarios de procesadores de texto y a los aficionados a desarrollar webs parece que les encanta, pero los profesionales no la quieren ni ver.

Existe incluso una Organización Contra el Abuso de la Comic Sans (castellano) y otra página que directamente propone el banneo de esta tipografía de nuestras vidas (inglés). Chistes, más chistes y artículos ingeniosos a cuento de la Comic, además de la historia sobre su origen. Todo para reforzar la idea de que no es una tipografía al uso.

En Blogoff nos dan 5 razones de peso para no utilizarla, todas válidas pero de las cuales me parecen muy convincentes dos: ¿Si mucha gente la odia, por qué espantar lectores por una cosa tan simple de cambiar? ¿Original la fuente más usada en el mundo? Parece que algo de razón, sí que tienen.

No es la primera vez que alguien me llama la atención con la tipografía y aunque por otra parte parece que no debe ser demasiado molesta (finalista por decisión del jurado en 20blogs y tercero provisionalmente en la categoría en Bitácoras * ) me he propuesto dar gusto a los lectores y a los no lectores de este espacio -ya veremos si no me arrepiento- y aprovechando el artilugio de hoy, abro una encuesta para saber vuestra opinión. Sólo teneis que haceros una idea pinchando en los distintos botones de arriba y luego seleccionar en la encuesta de abajo aquellas tipografías que más os gusten PARA ESTE BLOG de entre las propuestas. Se pueden seleccionar varias de ellas. Prometo al menos estudiarlo.



Una curiosidad: Una tabla periódica con las mejores tipografías, donde por supuesto, no está la Comic.

(*) ¡No sabía cómo contarlo! Por eso está ahí metido con calzador :)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

26 comentarios :

  1. La courier queda muy bien sobre el papel por simular una máquina de escribir pero como se escribe en un cuaderno... la comic sans es la más adecuada, creo yo. Es la única que pasa por caligráfica. No sabía que fuera tan odiada esta fuente, a muchos nos gusta bastante. Hay otras tipo comic más vistosas que me gustan mucho más pero no todo el mundo las tendrá instaladas. Un saludo.

    ResponderEliminar
  2. Me Encanto este Pos Amigo Mil Felicitaciones

    ResponderEliminar
  3. Hola amigo...

    Tienes mi voto en Bitacoras.. Suerte!!.. te veré en la fiesta de 20blogs..

    Un abrazo de buen fin de semana

    ResponderEliminar
  4. De hecho y ya opiné ahí en el blog de jacovox acerca de comic sans.

    me parece ridículo que los "profesionales" odien tanto esta fuente pero bueno, deberé de leer el artículo done está la justificación al NO aunque a mi parecer siento omo si Comic Sans fuera la fuete bruja en laa aedad media.

    ResponderEliminar
  5. Leídas las 5 razones de peso para ano usar esta fuente simplemente no me convenció.

    Que me dice que Hay 3 fuentes de las más usads en el mundo y una de ellas es Comic pues por algo será.

    Que si es difícil de leer? a mi no me parece, me parecen más difíciles de leer las alternativas que este tipo dió.

    Y por último, te lo comento aquí porque allá cerraron los comentarios (sus razones tendrán y quizá le ganaron en la discusión).

    En definitiva me gusta Comic así que yo te doy mi voto para que se quede esta fuente en este blog.

    ResponderEliminar
  6. La Comic Sans es la que le pega a este blog de notas. Y si a tí te gusta, es la que se debería quedar y punto. Al que no le guste la Comic Sans, que se la desinstale del ordenador y cuando entre en un website que la tenga como primera fuente, ya se le cargará la segunda que tenga asignada, no te preocupes.

    Por otro lado, es una putada que todavía no sean compatibles todos los navegadores con el @font face. En mis experimentos sólo me ha funcionado con Opera y con IE (que fue el para el que se diseñó, en realidad). Hasta entonces, tendremos que seguir usando las mismas aburridas fuentes de siempre, o recurrir a trucos como el del blog de Uve, o el sIFR, el cual estoy barajando, pero no me acaba de gustar, porque requiere flash para funcionar.

    Bueno, lo dicho, si te gusta, usa la Comic, es una fuente bonita, lo que pasa es que en su día se abusó de ella y algunos exaltados la tomaron con ella.

    ResponderEliminar
  7. Miguel hay tipografías caligráficas escandalosamente bonitas, pero como comentas no las tiene instaladas mucha gente. A mí también me pasa lo que a tí con la Courier.

    Admin, se agradece el entusiasmo, pero como decía al principio, no sé si será de mucha utilidad el código. Lo de las fuentes estándar seguramente lo será más.

    Balovega gracias y espero también conocerte, aunque ya no sé si me dará tiempo de hacerlo con tanta gente como me gustaría.

    Yop, tampoco te falta razón y es posible que lo del odio a comic sea una caza de brujas, un esnobismo o simplemente una cruzada de una minoría selecta, pero creo que también hay que tener en cuenta otras cosas.
    Si hay una parte de tus potenciales lectores que no lo terminan de ser porque hay un elemento de tu página que no les gusta y ese elemento es de fácil sustitución por otro que cumple la misma función y más o menos con el mismo resultado estético, ¿por qué no hacerlo? Y por otra parte, creo que es justo reconocer que si la usamos tantísima gente, realmente no es tan original como nos creemos.
    Dicho todo esto ¿qué tal si hacemos una plataforma a favor del uso de la Comic? xb

    Jose GDF, a mí me parece lo mismo que a tí y por eso la puse de primeras, pero eso de que si a mí es la que más me gusta, es la que se deberia quedar, creo que ya es más opinable. Precisamente me gustan varias fuentes, pero puedo tener mal gusto para la selección final y el replantearse las cosas no creo que sea negativo. Hace tiempo me dijeron que tenía un blog muy oscuro, que cansaba la vista. Gracias a aquella sugerencia, tengo el diseño que hay actualmente y que parece que gusta a más gente y por supuesto a mí. Un blog está destinado al autor, pero también al público. Siempre que se pueda compatibilizar el gusto de ambos creo que lo bueno es hacerlo.
    Por otra parte, me ha gustado mucho lo de que al que no le guste una fuente que se la desinstale y en paz (no es literal, pero más o menos). Sí, tenemos esa libertad. Ayer vi Agora de Amenábar y los fanatismos en cualquier variante no son nada buenos, no.

    ResponderEliminar
  8. Pero, ¿Y si a ti te gusta? Entonces usa la fuente que tu quieras, es tu blog, eres blogger y eres libre. No tiene que ser "estandard", si esas personas odiaran tanto el aspecto de unas letras pues supongo ya habrían desinstalado la Comic y no se habrían dado cuenta de que la usas.

    Personalmente me gustaría que usaras Trebuchet y dejaras un espacio entre las letras porque están muy juntas y de repente es más dificil leer. Bueno, es mi opinión y quizá más de uno coincida.

    En mi blog verás uso tres fuentes "exóticas" quizá ni te des cuenta. Una en el logo.

    ResponderEliminar
  9. Hola Oloman,

    justamente me preguntaba si había algo por el estilo de esto.
    Mira, he instalado en mi blog de pruebas ( probespau.blogspot.com ) la plantilla notepad chaos y estoy haciendo cambios para personalizarlo, comenzando por el page back. Una vez lo he canviado en el márgen se repite el mismo color y no se que hacer para poder transformarlo en una imágen ( como tu tienes con el fondomanchas ).

    Bueno Grácias

    ResponderEliminar
  10. Oloman.

    Pues ni que decirte, ya lo dijo la miad de tus comentaristas y estoy de acuerdo con eso: es tu blog y si le quieres poner algo de lo más espantoso como unaa foto de Michael Jackson sin maquillaje pues es tu blog, je je, es un ejemplo solamente, a lo que voy es a que tú eres libre de hacerle los cambios que gustes solo que en mi opinión como ya dijeron allá arriba, tu block de notas se lleva muy bien con Comic, quizá la cambies pero no le vayas a poner un Arial o un Times, ahora si que tú eres el experto en esto de los blogs.

    Saludos.

    ResponderEliminar
  11. Ah y por cierto, en mi opinion las fuentes que se pegan más a tu blog son la comic, la georgia y tampoco se queda corta la lucida sans

    ResponderEliminar
  12. Bonzu: Creo que la del título es Magneto en negrita. Otra es la de algunos titulos de la sidebar y la última debe ser muy parecida porque no la distingo ;)

    Pau: Lo que tienes que hacer es cambiar el color de fondo que acompaña a la imagen del BODY
    background:url(http://www.pickaloo.com/photos/10-18-09/48218.jpg) no-repeat top center #50CC55;
    Si lo que quieres es poner dibujo, la cosa se complica. Habría que poner ese fondo-imagen en el BODY y crear un nuevo contenedor para la cabecera para luego incorporarlo a la parte HTML. Es posible que necesites Z-INDEX para asignar el orden en que se solaparan las distintas capas.

    Yop y Bonzu: Efectivamente somos libres de poner lo que queramos en nuestros espacios, pero intentaba explicar que en cierta forma también nos debemos a los lectores.

    ResponderEliminar
  13. Pues te tomo la palabra entonces, yo soy uno de tus lectores, y yo creo que una fuente manuscrita es la que le pega a tu blog, y como la única fuente estándar que hay es la Comic Sans, pues te vas a dejar la Comic Sans... xD

    ...Al menos hasta que @fontface funcione en todos los navegadores, en ese caso, debería ser una fuente hecha con tu propia letra.

    ResponderEliminar
  14. A mí me gusta... ahora, jajaja
    antes llegué a aborrecerla, y mucho... cuando estaba en el insti tenías que utilizar Times Roman para los trabajos... cuando llegué a la universidad, muchos te daban vía libre con esas cosas (u otros ya no podía Times, pedían Verdana 10,5 - cualquier letra pero con interlineado 1,5, y cosas así... así que empezó la "moda" de utilizar una de las más "desenfadadas-juveniles-miracomomola... etc" de word... que oh casualidad era COMIC porque la mayoría son horribles jajajaj

    Así que recuerdo que en el último año si alguien mandaba su parte con Comic la cambia entera por una Arial, Tahoma, Franklin, Verdana... lo que fuera pero no Comic!!

    ResponderEliminar
  15. José GDF: Je, je. Esperaré unos días a ver cómo va saliendo la encuesta. Estoy hasta pensando en poner una botonera como la de este post en la barra lateral y que cada uno se coloque la fuente que le salga de las narices XD

    Uve: Tú no cuentas, que tu gusto ya me lo conozco :)Es broma. Gracias por opinar.

    ResponderEliminar
  16. Si por mi fuera usaría la fuente Herculanum en todos los textos, aunque muy poca gente la viera.

    ¿Magneto? se vería raro.

    ResponderEliminar
  17. Yo he votado por la Comic Sans. Es una letra que no utilizaría nunca para un logo o para una web, pero en este blog hace falta una letra desenfadada o de tipo manuscrita. El día que se puede utilizar una fuente desde una url podrías usar alguna como la Angelina (http://www.dafont.com/angelina.font) por ejemplo, pero mientras tanto, dejar este blog con este estilo y una letra tipo Times o Courier se cargaría completamente el diseño...

    No sabía nada de la polémica, vaya, cada día llega a menéame cosas más raras... Felicidades por el premio :)

    ResponderEliminar
  18. Me equivoqué, Bonzu :) Lo cierto es que una vez hice el ambigrama de mi nick con la misma letra que tú tienes y me sonaba que era magneto, pero evidentemente era otra. La tenía instalada pero en un formateo necesario la perdí.

    100x100net hay montones de tipografías chulísimas. El día que exista un método eficaz de instalarlas para que sean visibles para todos, estoy seguro de que no habrá dos webs iguales... bueno, casi.
    Si a tí te extrañó lo de menéame, imáginate a mí cuando lo ví.

    ResponderEliminar
  19. Lo mismo me pasó, un restablecí mi compu a sus valores de fábrica y pues lo único que se me olvidó fue realizar una copia de la carpeta fonts, se llama Matura.

    ResponderEliminar
  20. Oloman: Estoy incursionando en el asunto de los blogs, con una aventura múltiple. El diseño me preocupa mucho y deseo contar con unas etiquetas que en mis blogs "Versiones" e "Invenciones" desplieguen una suerte de índice libresco, como el ArchiveList, sin que al darle clic al link te conduzca al despliegue total de los posts... ¿tienes idea de cómo puedo prepararlo?

    ResponderEliminar
  21. Bonzu, ¡al menos acerté con las dos primeras letras!

    Gerardo, no sé si te habrás dado cuenta, pero cuando tienes resoluciones de pantalla de más de 800px, el cuerpo principal de tu blog se desencaja. Supongo que se arreglará centrando el CONTENT-WRAPPER con un margin:0px auto
    Con respecto a lo que preguntas, sólo sé cómo hacer un índice, aunque no sé si es eso lo que quieres.

    ResponderEliminar
  22. Se me ocurre que tal vez lo que Gerardo quiere controlar es la cantidad de entradas mostradas al dar click en tal o cual etiqueta. Aunque no sé que será "índice libresco".

    ResponderEliminar
  23. Gracias por tus respuestas, Oloman, sobre todo a la del post de Bitácora... el texto desencajado lo arreglé agregando un simple "text-align:justify" en el main Wrapper; sobre el índice, ya había visto esa entrada, pero no vi lo de Rosita, a ver qué luces me arroja. No quise extenderme en mi pregunta y terminé por expresarla mal. Lo que estoy buscando es un widget en el sidebar con un índice temático jerarquizado de la entrada más antigua a la más reciente, que en el caso de los blogs que señalé, la etiqueta equivale al título de un libro o reunión de cuentos; ejemplo:

    Título del libro (etiqueta) ▼
    ▼ Primera parte (etiqueta)
    Capítulo primero (entrada 1)
    Capítulo II... (entrada 2)
    ► Segunda parte (etiqueta)...

    Archivo jerarquiza por fecha, no por etiquetas, que es lo que deseo, y Etiquetas te redirecciona a todas las entradas en el blog ordenadas de la más reciente a la más antigua, sin desplegar una lista de entradas o índice en el sidebar.
    Sobre el dilema tipográfico, aborrezco la comic sans, pero en efecto, tu blog está diseñado para esta fuente. Gracias y sigo pendiente de tu blog.

    ResponderEliminar
  24. Bonzu, parece que ya está claro lo que quiere Gerardo.

    Gerardo, eso que quieres no sé siquiera si será posible hacerlo. A mano por supuesto que sí, pero de forma automática creo que no podrá ser y si tienes muchas entradas, la forma manual es una hincheta a trabajar.

    ResponderEliminar
  25. ...o trabajar para combinar archivos de entradas y etiquetas automáticamente, y en lo que busco y experimento, no me resta sino darte de nuevo las gracias, creo que tienes razón, por el momento la solución será un tanto artesanal.

    ResponderEliminar
  26. Facundo, tienes que insertar un font-family con la fuenta que quieras, dentro de la capa (parte de estilo o CSS) donde pretendas cambiar la tipografía. Si es para todo el blog, en BODY.

    ResponderEliminar