<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>El Ojo en la Red &#187; tipografía</title>
	<atom:link href="http://www.vinaixa.org/web/blog/tag/tipografia/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.vinaixa.org/web/blog</link>
	<description>Un blog para hablar de la aplicación real de la comunicación en las empresas</description>
	<lastBuildDate>Thu, 26 Jan 2012 08:32:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Usos y costumbres de la tipografía en la web</title>
		<link>http://www.vinaixa.org/web/blog/comunicacion-grafica/492/usos-y-costumbres-de-la-tipografia-en-la-web/</link>
		<comments>http://www.vinaixa.org/web/blog/comunicacion-grafica/492/usos-y-costumbres-de-la-tipografia-en-la-web/#comments</comments>
		<pubDate>Wed, 10 Mar 2010 11:50:01 +0000</pubDate>
		<dc:creator>Jordi Vinaixa</dc:creator>
				<category><![CDATA[Comunicación Gráfica]]></category>
		<category><![CDATA[diseño gráfico]]></category>
		<category><![CDATA[tipografía]]></category>

		<guid isPermaLink="false">http://www.vinaixa.org/web/blog/?p=492</guid>
		<description><![CDATA[Hace tiempo que no trataba ningún tema específico de diseño, así que ya tocaba. Del 18 al 20 de junio se desarrollará en Valencia el Cuarto congreso Internacional de Tipografía que organiza la Asociación de Diseñadores de la Comunidad Valenciana y la Escola d&#8217;Art i Superior de Disseny de Valência. Porque hay sitios donde el [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.vinaixa.org/web/blog//wp-content/uploads/2010/03/tipos.jpg"><img class="alignright size-full wp-image-515" title="Tipografía" src="http://www.vinaixa.org/web/blog//wp-content/uploads/2010/03/tipos.jpg" alt="" width="250" height="220" /></a>Hace tiempo que no trataba ningún tema específico de diseño, así que ya tocaba. Del 18 al 20 de junio se desarrollará en Valencia el <a title="Enlace a la página del congreso" href="http://www.congresotipografia.com/" target="_blank">Cuarto congreso Internacional de Tipografía</a> que organiza la <a title="Enlace a la página de la asociación" href="http://www.adcv.com/" target="_self">Asociación de Diseñadores de la Comunidad Valenciana</a> y la <a title="Enlace a la página de la Escola" href="http://www.easdvalencia.com/easd2009/index.html" target="_self">Escola d&#8217;Art i Superior de Disseny de Valência</a>. Porque hay sitios donde el diseño se considera un trabajo digno y que debe remunerarse. Con esta loable excusa me voy a sumergir en el mundo de la tipografía para Internet. En base a algunos artículos publicados en la desaparecida revista de diseño argentina <a title="Enlace a la publicación" href="http://tipografica.com/" target="_blank">tipoGráfica</a>.<span id="more-492"></span></p>
<p>Primero decir que <strong>las tipografías que podemos utilizar en Internet</strong>, lo mismo que los colores, <strong>tienen sus limitaciones</strong>. Estas limitaciones están impuestas por la necesidad de que los textos  sean visibles, de la misma manera,  en el mayor número de ordenadores, por ello existe la convención de utilizar sólo aquellos tipos de fuentes más comunes a todos los sistemas operativos.</p>
<p>Existen, de todas formas, algunos<strong> métodos que nos permiten saltarnos estas limitaciones</strong>:</p>
<ul>
<li>El primero consiste en utilizar<strong> imágenes sustituyendo el texto escrito</strong>, lo que se conoce como Sustitución de texto por Imágenes (<a title="Enlace a artículo sobre el tema" href="http://stopdesign.com/archive/2003/03/07/replace-text.html" target="_blank">FIR</a> en inglés). Esto lo podemos ver en algunas páginas web más preocupadas por la estética que por el contenido. El problema es que los buscadores no indexan, todavía,  las palabras que aparecen en las imágenes.</li>
<li>La segunda forma es más ortodoxa y utiliza las definiciones en las hojas de estilos que permiten a los buscadores que <strong>descarguen estas fuentes no comunes de un archivo</strong> que proporcionamos, antes de presentarlas en pantalla. Esta técnica basada en la directiva css <a title="Enlace a la página del consorcio web" href="http://www.w3.org/TR/css3-fonts/#the-font-face-rule" target="_blank">@font-face</a> tiene el problema de que no es reconocida por todos los navegadores y que aparece y desaparece de las directivas de estándares de la web.</li>
<li>La última y quizás más complicada es <strong>aportar un programa</strong> en JavaScript o PHP que <strong>vaya sustituyendo las fuentes</strong> normales por las específicas, cuando aparecen.</li>
</ul>
<p>Aclarado este primer punto podríamos <strong>enumerar las  fuentes</strong> <strong>de tipo común</strong> con las que normalmente vamos a trabajar:</p>
<ul>
<li><strong>Familias genéricas</strong>, como la Serif (con rabitos &#8211; ejemplo la Times-),  la Sans-Serif (sin rabitos -ejemplo la Arial-) o Monospace (todos los caractreres usan un mismo espacio), que siempre debemos consignar, para que el ordenador del usuario pueda, en el peor de los casos, elegir una fuente de sustitución.</li>
<li>Las <strong>aportadas por</strong> el sistema operativo <strong>Windows</strong>: Abadi MT Condensed Light, Andale Mono, Arial, Arial Black, Book Antiqua, Calisto MT, Century Gothic, Comic Sans MS, Copperplate Gothic Bold, Courier New, Georgia, Impact, Lucida Console, Lucida Handwriting Italic, Lucida Sans, Marlett, News Gothic MT, OCR A Extended, Symbol, Tahoma, Times New Roman, Trebuchet MS, Verdana, Webdings, Westminster, Wingdings.</li>
<li>Las <strong>aportadas por </strong>el sistema operativo de <strong>los</strong> <strong>Mac</strong>: Charcoal, Chicago, Courier, Geneva, Helvetica, Monaco, New York, Palatino, Symbol, Times.</li>
<li>Por último, las más importante, <strong>las incorporadas en los navegadores</strong> y que realmente comprenden el porcentaje mayor de<strong> fuentes comunes</strong>, ya que aseguran su exacto visionado conocidas como &#8220;<a title="Enlace a Wikipedia" href="http://en.wikipedia.org/wiki/Web_typography#Web-safe_fonts" target="_blank">web-safe fonts</a>&#8220;:  Arial, Comic Sans MS, Courier New, Georgia, Impact, Lucida Console (Monaco),  Palatino, Symbol, Tahoma (Geneva), Trebuchet MS, Verdana y Webdings.</li>
</ul>
<p>Con esto habríamos definido la materia prima, ahora nos toca hablar de <strong>usos correctos </strong>y dar algunas pequeñas normas o apuntes.</p>
<p>El <strong>objetivo</strong> de la selección de una u otra tipografía y sus características de uso (tamaño, interlineado, interletrado, grososr, etc.) debe ser el <strong>conseguir la mayor legibilidad</strong> de los textos, para <strong>facilitar la mejor comprensión</strong> de los mismos. Dicho objetivo se logra con un correcto equilibrio entre la familia  tipográfica elegida, el ancho de la columna de texto, el cuerpo  tipográfico, la interlínea, el marginado del texto, el uso de colores  para fondo/figura y el estilo de la tipografía (itálico, bold, versalita).</p>
<p>La <strong>forma de lectura en pantalla no es igual a la de los libros</strong>. El usuario <a title="Enlace al estudio Eyetrack III" href="http://www.poynterextra.org/EYETRACK2004/main-spanish.htm" target="_blank"><em>escanea</em></a> la pantalla en busca de aquellos elementos que llaman su atención. Lo que nos obliga a una composición que tenga en cuenta estos hábitos.</p>
<p>Esto nos obliga a<strong> organizar el contenido</strong> de una manera adecuada:</p>
<ul type="circle" compact="compact">
<li><strong>Palabras clave</strong> destacadas (en forma de vínculos, o utilizando   variables tipográficas, o cambios de color);</li>
<li><strong>Subtítulos</strong> significativos; útiles;</li>
<li><strong>Listas</strong> de ítems;</li>
<li><strong>Una idea por párrafo</strong> (los lectores generalmente saltan cualquier   idea adicional si no son ‘capturados’ por las primeras palabras del   párrafo);</li>
<li>El <strong>estilo de ‘pirámide invertida’</strong>, empezando por la conclusión;</li>
<li>La <strong>mitad o menos de palabras que</strong> las que normalmente se utilizan <strong>en   textos impresos</strong>;</li>
</ul>
<p>Por último podemos destacar varios aspectos en los que la <strong>tipografía web se diferencia  del uso de la tipografía impresa</strong>:</p>
<ul type="circle" compact="compact">
<li>La <strong>orientación</strong> de las páginas es normalmente<strong> horizontal</strong>, en lugar de  vertical;</li>
<li>Generalmente <strong>no se ve</strong> al mismo tiempo <strong>la totalidad</strong> del material;</li>
<li>El diseñador tiene mucho<strong> menor control de la tipografía</strong> y de la  puesta en página que en el material impreso;</li>
<li>En general, la <strong>resolución es menor</strong>, por lo que los detalles finos no  están bien definidos;</li>
<li>Por todo lo expuesto anteriormente, la <strong>velocidad de lectura </strong>es  aproximadamente un 30% <strong>menor</strong>;</li>
<li>Los lectores <strong>escanean en lugar de leer</strong>, por lo que la comprensión y  retención se reduce a un 50%;</li>
<li>El <strong>uso de hipertexto para relacionar contenidos</strong>, que no existe en el mundo impreso.</li>
</ul>
<p>El buen uso de la tipografía depende del <strong>contraste visual </strong>entre fuentes y  entre los bloques de <strong>texto y el blanco</strong>. El ojo es naturalmente atraído  por los contrastes.</p>
<p>En cuanto al <strong>ancho de los párrafos</strong> podemos decir que el <strong>alcance ocular</strong> en lectura es de unos <strong>8 cm</strong>, y es por eso que los  párrafos (estándard) conservan estas proporciones. El uso de <strong>líneas más  anchas requieren</strong> que el lector gire su cabeza ligeramente o fuerce los  músculos del ojo para poder seguir las líneas. Esta ley rara vez se cumple en el diseño web, provocando una <strong>lectura más lenta</strong>. En este sentido <strong>sería conveniente el diseño de párrafos más estrechos</strong> y un <strong>interlineado algo superior</strong> al utilizado en impresión.</p>
<p>En cuanto a las<strong> famílias de fuentes a elegir</strong>, se constata que aquellas que son <strong>más legibles en medios impresos</strong>, <strong>no</strong> tienen porque ser necesariamente las <strong>más eficaces en pantalla</strong>. Dependerán mucho del tamaño y características utilizadas. Así no queda más opción que la <strong>realización de pruebas en cada caso</strong> específico.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.vinaixa.org/web/blog/comunicacion-grafica/492/usos-y-costumbres-de-la-tipografia-en-la-web/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

