NeoxSys Posted November 14, 2011 Author Share Posted November 14, 2011 Fuentes para impresión y fuentes para pantalla Vemos tecnicas y tipos de fuentes tipograficas para tipos de resoluciones de pantalla e impresion. Por This is the hidden content, please Sign In or Sign Up Las fuentes tipográficas diseñadas para sistemas de impresión tradicionales están pensadas para ser reproducidas en alta resoluciones y generalmente se visualizan mal en las pantallas de los ordenadores, sobre todo en pequeños tamaños, ya que las formas de los caracteres no han sido concebidas para ser reproducidas en una pantalla de baja resolución. This is the hidden content, please Sign In or Sign Up Este factor ha hecho necesaria la creación de fuentes específicas para ser visualiadas en el monitor de un ordenador, diseñadas para ser fácilmente legibles en condiciones de baja resolución. Se trata de fuentes como Verdana, Tahoma (sans serif) y Georgia (serif). This is the hidden content, please Sign In or Sign Up Mientras que las fuentes de impresión se tornan indefinidas e ilegibles al ser sometidas a antialiasing para suavizar el escalonado de los trazos, en las tipografías concebidas para su visualización en pantalla cada trazo y cada punto encaja exactamente en la trama de pixeles que compone la misma. This is the hidden content, please Sign In or Sign Up Su diseño evita, en lo posible, las curvas, tendiendo a las líneas verticales u horizontales, lo que hace que aparezcan nítidas y definidas en cuerpos pequeños. Pixelización y antialiasing Las fuentes diseñadas para pantalla presentan la desventaja de que, al estar diseñadas para un tamaño determinado, no es posible redimensionarlas de forma correcta, apareciendo los trazos verticales y horizontales que las componen distorsionados. Una solución posible sería redimensionarlas exactamente con un múltiplo de su tamaño natural, ya que coincidiría nuevamente con la rejilla de píxeles de la pantalla, pero entonces se ven pixeladas, con efectos de dientes de sierra. This is the hidden content, please Sign In or Sign Up Esta efecto indeseado se puede eviar mediante la técnica del antialiasing, consistente en un difuminado de los bordes de los caracteres, creando unos píxeles intermedios entre el color del carácter y el del fondo, para que el cambio entre ambos no sea tan brusco, con lo que se consigue que se los márgenes se vean suaves y no en forma de dientes de sierra. This is the hidden content, please Sign In or Sign Up El antialiasing, también conocido como antialias, es un mecanismo muy utilizado en el tratamiento de imágenes de mapas de bits, disponiendo casi todos los programas gráficos de filtros específicos para su aplicación. This is the hidden content, please Sign In or Sign Up Por lo que respecta a los textos, los sistemas operativos suelen ofrecer opciones de configuración del antialiasing para evitar su escalado en pantalla. En los sistemas Windows, por ejemplo, se accede a esta funcionalidad desde Inicio > Panel de control > Pantalla > Apariencia, donde suele haber un checkbox para habilitar el antialiasing. Como la aplicación de este método de visualización de textos es configurable por el usuario, nunca podremos estar seguros de su activación, por lo que no sabemos de antemano cómo se verán las fuentes en el monitor de cada usuario. Como alternativa, podemos convertir los textos en imágenes, siempre que sean de corta extensión (titulares cortos, cabeceros, etc.), ya que entonces sí que podremos aplicarles el antialiasing y estar seguros de su visualización final. Hinting Otra técnica aplicable a las fuentes destinadas a pantalla es el denominado proceso de hinting, indispensable para cualquier fuente que intente funcionar en cuerpos pequeños y en dispositivos de baja resolución. This is the hidden content, please Sign In or Sign Up Es un método para definir exactamente qué pixeles se encienden para crear el mejor dibujo posible de un caracter de tamaño pequeño a baja resolución. Como el mapa de bits que dibuja cada signo en la pantalla se genera a partir de un dibujo de línea o “outline”, a menudo es necesario modificar este contorno para que la combinación deseada de pixeles se encienda. Un “hint” es una instrucción matemática que se agrega a una fuente tipográfica con el fin de modificar el dibujo de los caracteres en determinados cuerpos. Fuente: desarrolloweb.com Link to comment Share on other sites More sharing options...
NeoxSys Posted November 14, 2011 Author Share Posted November 14, 2011 Administración de fuentes en un ordenador Vemos donde estan las fuentes en nuestro ordenador, los rasgos caracteristicos, y como las administra el ordenador.[/font][/color][/left] Por This is the hidden content, please Sign In or Sign Up Como hemos visto, todo sistema operativo instala un conjunto de fuentes por defecto, número que se ve aumentado con posteriores instalaciones de diferente software, especialemente aplicaciones de autoedición, de ofimática, de diseño gráfico y de diseño web. Generalmente, cada una de estas fuentes es almacenada como fichero individual en una carpeta destinada a almacenar todas las fuentes del sistema. Por ejemplo, Windows lo hace en una carpeta denominada Fonts, que cuelga directamente de la carpeta principal de instalación del sistema, Windows. This is the hidden content, please Sign In or Sign Up Aunque ciertas aplicaciones pueden instalar determinadas fuentes para su uso exclusivo, en la carpeta Fonts encontraremos todas las fuentes que estarán luego disponibles para los diferentes programas de edición y gráficos. Si accedemos a dicha carpeta, veremos los ficheros de las fuentes disponibles en nuestra máquina y los nombres comunes de cada una de ellas. This is the hidden content, please Sign In or Sign Up Windows puede manejar diferentes tipos de fuentes. Unas son de resolución fija, entre ellas las fuentes de pantalla y las de impresora. Este tipo de fuentes, en especial las primeras, no las utilizaremos casi nunca en las aplicaciones. Son las que emplean los programas para sus propios menús y resto de interfaz gráfica. Si deseamos ver cómo se presentan dichas fuentes, basta hacer doble click sobre su fichero, con lo que se abrirá el visualizador de fuentes de Windows, mostrándonos la frase "El veloz murciélago hindú comía feliz cardillo...12340567890" a diferentes tamaños de letra. La elección de esta frase se debe a que en ella se encuentran la mayoría de los caracteres del alfabeto, con lo que podemos hacernos una buena idea del aspecto de la fuente. This is the hidden content, please Sign In or Sign Up Los tipos de letra que casi siempre emplearemos con nuestras aplicaciones, tanto en el ordenador como para imprimir, son las fuentes escalables. Existen dos tipos principales de fuentes escalables: fuentes TrueType y fuentes Postscript Type 1. This is the hidden content, please Sign In or Sign Up Truetype (TT) y Postscript Tipo 1 (PS1) son fuentes de contorno multiplataforma y en ambas sus formas están definidas por medio de líneas y curvas. Su representación es independiente de la resolución del dispositivo de salida y por lo tanto pueden ser escaladas a cualquier tamaño sin ninguna perdida de calidad. This is the hidden content, please Sign In or Sign Up Las fuentes PS1 tienen su origen en el lenguaje de descripción de página Postscript de Adobe, mientras que la tecnología TrueType fue desarrollada por la empresa Apple. La principal diferencia entre estas tecnologías consiste en la forma matemática que utilizan para describir las curvas de los caracteres, ya que mientras PS1 utiliza curvas Bézier, con nodos y puntos de control que definen las forma, TT se basa en unas funciones propias, denominadas "splines". Otra diferencia es que las fuentes TT disponen de todos los datos en un solo fichero (de extensión .TTF), mientras que las PS1 requieren dos ficheros separados (uno .PFB y otro .PFM ), uno que contiene la definición del contorno de la fuente para la impresora y otro que contiene los datos métricos. La principal ventaja de las fuentes TT sobre las PS1 está en el hecho que las TT permite mejores procesos de "hinting", que incluyen controles diagonales y movimientos específico de puntos para aumentar la legibilidad. Aparte de las fuentes instaladas directamente por el sistema operativo y por applicaciones posteriores, existen en el mercado multitud de fuentes adicionales, unas gratuitas y otras de pago, que podemos utilizar en nustras aplicaciones gráficas y de edición. Para haceros una idea, basta acudir a Google e introducir en la caja de búsqueda las palabras "download fonts", búsqueda que nos producirá aproximadamente 1.400.000 resultados. Una vez descargada una fuente en nuestra máquina, para que puedan ser utilizadas es necesario cargarlas en memoria, existiendo tres formas básicas para ello: Cargar temporalmente el fichero de la fuente en memoria. Instalar de forma permanente la fuente. Incrustar (embedding) la fuente dentro de un documento. Cargar una fuente en la memoria es una forma de poner a disposición de las aplicaciones dicha fuente durante un intervalo de tiempo limitado (hasta que se descargue de nuevo de la memoria, o hasta que se apague el sistema). Es una forma muy conveniente de emplear fuentes que sólo pretendemos usar para un proyecto concreto, o para un gráfico. Para realizar este proceso, podemos en primer lugar acceder con el explorador de Windows a la carpeta que contenga los ficheros de las fuentes (no es necesario que sea la carpeta Fonts del sistema en este caso), haciendo doble click sobre el fichero de fuente que queremos cargar en memoria, con lo que aparecerá la ventana del visualizador con la fuente cargada. Si ahora minimizamos la ventana, podremos utilizar la fuente en cuestión en casi cualquier aplicación mientras no cerremos la ventana de vista previa de la fuente (esto la mantiene cargada en memoria) o hasta que apaguemos el sistema. Una alternativa conveniente es usar la pequeña utilidad gratuita FontLoader, que se puede descargar de Moon Software ( This is the hidden content, please Sign In or Sign Up ). Su funcionamiento es muy simple, bastando hacer clic con el botón derecho sobre un fichero de fuentes truetype y seleccionar una de las opciones disponibles (instalar / desinstalar / cargar / descargar). Un hecho a tener en cuenta es que algunos programas, como Illustrator y Freehand no admiten fuentes cargadas temporalmente siendo necesario instalar la fuente antes de ejecutar el programa. This is the hidden content, please Sign In or Sign Up Si deseamos que una fuente y que esté a disposición de los programas de forma permanente necesitaremos instalar dicha fuente en el sistema. Para ello, basta ir a Inicio > Panel de Control > Fuentes y en el menú Archivo seleccionar la opción Instalar nueva fuente, eligiendo el fichero de la fuente a instalar en el pequeño navegador que aparece. Soluciones alternativas son arrastrar el fichero de la fuente dentro de la carpeta Windows\Fonts o utilizar una programa de gestión de fuentes, como FontLoader. La desinstalación es semejante, bastando elegir la opción correspondiente a desinstalar. Cuidado con esta operación, si el programa pide confirmación para eliminar el archivo de fuente del disco; asegurémonos de tener otra copia disponible en otra carpeta o en un disquette o cd-rom. De otra manera, la perdemos irreversiblemente. Como norma general, nunca deberíamos instalar más allá de un centenar o unos pocos centenares de fuentes en el ordenador, ya que se cargan en memoria al arrancar el sistema operativo, ralentizando el sistema y la ejecución de programas. Si necesitamos trabajar con numerosas fuentes, lo mejor es crearnos una carpeta exclusivamente destinada a almacenarlas, en la que crearemos diferentes subcarpetas que nos ayuden a clasificar las fuentes de acuerdo a algún sistema válido para nuestros propositos (Type1 y TrueType, serif y sans serif, modernas, ornamentales, de comics, de ofimática, etc.). Cuando necesitemos utilizar alguna de ellas, la cargamos en memoria. Si estamos trabajando con Ilustrator, instalamos las fuentes necesarias, abrimos la aplicación y trabajamos con ellas. Una vez finalizado el trabajo, cerramos Ilustrator y desinstalamos las fuentes. Finalmente, podemos incrustar la fuente dentro de un documento. Con esta última opción, en realidad, no dispondremos de la fuente para nuestro propio trabajo, ya que lo que se incrusta es una representación de la fuente para verla en pantalla y / o imprimirla, no el fichero de ésta. Los documentos PDF suelen incluir fuentes incrustadas de esta forma, y también puede hacerse con otros programas, como por ejemplo el mismo Microsoft Word. Antes de finalizar el tema, conviene mcionar un programa indispensable para trabajar con Type 1. Nos estamos refiriendo a Adobe Type Manager, cuya versión Light (gratuita) podemos descargar desde la direcciónhttp://www.adobe.com/products/atmlight/main.html. Los programas que permiten organizar este tipo de fuentes, tales como Fontlister, Typograf, Font navigator, etc, no pueden hacerlo por sí solos, Adobe Type Manager se ha de instalar primero. Fuente: desarrolloweb.com Link to comment Share on other sites More sharing options...
NeoxSys Posted November 14, 2011 Author Share Posted November 14, 2011 Tipografía y diseño En esta ocasion vemos la eleccion de la paleta de fuentes y de sus variantes, asi como el color, el grosor y otras características. Por This is the hidden content, please Sign In or Sign Up En una composición gráfica o página web cualquiera, los contenidos textuales son los principales responsables de la transmisión del mensaje al espectador final. En este entorno, la tipografía la materia que intermedia entre el receptor y la información. Los caracteres matizan las palabras y le aportan o refuerzan el sentido. La mala selección de esas formas pueden interferir negativamente en la comunicación. Junto con el color, la tipografía puede alterar por completo el significado que asociamos a un diseño. El texto puede decir una cosa; las letras, otra muy diferente. Para conseguir una tipografía adecuada a la obra es necesario considerar diferentes aspectos de la misma, entre los que destacan los siguientes: Elección de la paleta de fuentes Todo diseñador debe tener la habilidad de analizar, explorar y reconocer las características conceptuales, formales, históricas y técnicas de los diferentes tipos de letras. Cada familia tipográfica tiene sus propias características y su propia personalidad, que permiten expresar diferentes notas visuales, unas más fuertes y otras más sutiles, unas más refinadas y otras más toscas, unas más geométricas y otras más orgánicas, por lo que la selección de las familias tipográficas a usar en una composición debe hacerse con un amplio sentido de la responsabilidad. Para lograr una composición tipográfica adecuada, es necesaria una correcta selección de las familias tipográficas a utilizar, teniendo en cuenta su legibilidad, sus proporciones, el contraste entre los trazos gruesos y delgados, la existencia del remate o su falta, su inclinación y su forma. La elección del tipo más adecuado depende en gran medida del tipo de mensaje al que va enfocada la composición. En algunos casos necesitaremos un tipo de letra refinada, elegante o delicada, mientras que en otros necesitaremos letras sobrias, macizas y sin ningún tipo de remilgos. This is the hidden content, please Sign In or Sign Up En general, las familias de origen romano, con serifas de pie, funcionan mejor como tipo de lectura en imprenta. Por el contrario, las de palo seco o sin serifas, dan mejor resultado en monitores y pantallas, sobre todo cuando hablamos de resoluciones bajas. El factor más determinante sobre la elección de una fuente debe ser su legibilidad, propiedad derivada del diseño mismo de los tipos de letra, especialmente importante para textos largos. Para bloques de texto más cortos tenemos mayor libertad de elección, y para los títulos podemos emplear la fuente que queramos, en función del espíritu del documento y la sensación que nos interese crear. This is the hidden content, please Sign In or Sign Up Deberemos escoger fuentes cuyos caracteres sean abiertos y bien proporcionados, con regularidad en los tipos y con remates clásicos. Los caracteres que contienen afectaciones estilísticas o irregularidades son menos legibles, por lo que son menos recomendables utilizarlos en bloques de textos y más adecuados para textos cortos o titulares. Para la pantalla, algunas fuentes sans como Verdana o Tahoma ofrecen óptima legibilidad. Las fuentes ornamentales o caligráficas no deben emplearse más allá de unas pocas líneas, puesto que serían causa inmediata de fatiga visual. Un concepto relacionado con la legibilidad, pero independiente del mismo, es el de la comprensión de un contenido textual, las capacidad del mismo de ser o no interpretado. Por ejemplo, un texto compuesto todo en mayúsculas, puede ser legible pero tener muy baja comprensión (en el idioma inglés se utilizan los términos ‘legibility’ y ‘readability’). Hay una diferencia importante entre legibilidad y comprensión. Mientras que la legibilidad se refiere a la facilidad con la que los lectores pueden decodificar la información en un documento, la comprensión se refiere al contenido del mismo. Las dos tienen un efecto importante en el éxito o fracaso de la lectura del documento; la comprensión no puede ser adquirida sin la legibilidad. Una vez elegida la tipografía con la que trabajaremos para hacer legible el trabajo, tendremos que tener en cuenta otros aspectos como el cuerpo con el que trabajaremos, la longitud de la línea o el interlineado. Cuando conseguimos que éstos tres elementos armonicen (tipografía y su tamaño, longitud e interlineado) se producirá una mayor facilidad de lectura, será más natural nuestro recorrido visual sobre el texto. Cuando variamos uno de estos aspectos en la tipografía, deberemos ajustar los otros para que la armonía se siga produciendo. Otro factor a tener en cuenta es la asociación temporal o geográfica de una fuente dada. Hay fuentes asociadas a épocas concretas, otras a lugares determinados, por lo que la elección de una fuente acorde con el mensaje a trasnmitir es esencial para conseguir el ambiente comunicativo adecuado. Las etiquetas y carteles de cervezas, por ejemplo, suelen utilizar tipos de letras de inspiración gótica, al estar este producto asociado a las abadías de monjes que lo producían es esa época. This is the hidden content, please Sign In or Sign Up Una buena estrategia de trabajo es preparar una paleta de fuentes con una letra serif para el texto, una letra sans para los títulos y subtítulos, con tamaños mayores, otra para los pies de foto, resúmenes, citas y notas,de menor tamaño, y tal vez, una letra especial para el título principal. Es una fórmula que es simple y efectiva, que evita la mezcla de diferentes fuentes de palo seco juntas o diferentes letras serif juntas, combinaciones que raramente funcionan. This is the hidden content, please Sign In or Sign Up Algunas tipografías tienen versión sans y versión serif y suelen formar una perfecta combinación: por ejemplo, la forma serif para el texto y la sans para el resto. Con fuentes diferentes, es cuestión de probar. La fuente elegida para el texto puede incluir, naturalmente, la variante cursiva y en negrilla. Ambas deben emplearse sólo para enfatizar partes del documento, no en fragmentos extensos. Conviene evitar lo que ya está muy visto. Una fuente que todo el mundo usa hace que nuestros documentos sean indistinguibles, un producto clónico de los demás. Fuentes como Arial (Helvetica), Courier y Times New Roman son tan frecuentes que convierten un documento en algo anodino, sin impacto visual. Como alternativa hay fuentes que, siendo básicamente del mismo tipo, sacarán del anonimato y aburrimiento a los textos que preparemos. Variantes de una fuente Generalmente, cada familia tipográfica dispone de una serie de variantes de sus letras, que pueden ser utilizadas para proporcionar variedad al texto y para particularizar en el mismo ciertas palabras. Estas variantes se obtienen por modificación de alguna de las siguientes propiedades: Grosor del trazo: La pesadez o ligereza de los trazos que componen los tipos efectan a su legibilidad. Según el grosor del trazo, una letra puede clasificarse en "extrafina", "fina", "redonda", "negra" y "supernegra". En los tipos demasiado pesados los ojales se llenan y desaparecen, mientras que la tipografía demasiado fina puede no distinguirse fácilmente del fondo. Por lo tanto el diseñador tendrá que utilizar para textos extensos un grosor adecuado o normal de tipografía y hacer uso de distintos grosores en momentos puntuales. Por ejemplo, utilizar un grosor contrastado sirve para destacar un párrafo dentro del texto. Proporción entre ejes vertical y horizontal: según sus valores relativos obtenemos las variantes redonda (cuando son iguales), estrecha (cuando el horizontal es menor que el vertical), y expandida (cuando el horizontal es mayor). Las tipografías estrechas son efectivas cuando hay abundancia de texto y debe ahorrarse espacio. Pero se disminuye la legibilidad cuando las letras son demasiado estrechas (condensadas) o demasiado anchas (expandidas). La condensación es adecuada cuando debemos utilizar columnas estrechas. Inclinación del eje vertical:nos proporciona la variante itálica o cursiva de una fuente. sirve para resaltar una parte del texto, más que para formar bloques de texto, y debe usarse con prudencia, porque una gran cantidad de caracteres inclinados en el texto dificulta la lectura. Tamaño de la caja : aumentando el tamaño respecto a la caja baja obtenemos las mayúsculas. Todo el texto escrito en letras mayúsculas no sólo consume más espacio, sino que también hace más lenta la lectura. La minúscula o caja baja llena el texto de señales creadas por la abundancia de las formas de la letras, trazos ascendentes y descendentes y formas irregulares, sin embargo el mismo texto en mayúscula pierde estas señales, tan útiles para facilitar la lectura. Como norma general, las letras redondas y minúsculas suelen ser dentro de una familia las más legibles, más que las cursivas, negritas, mayúsculas y estrechas. This is the hidden content, please Sign In or Sign Up Las negritas (bold) llaman poderosamente la atención dentro de un texto e incluso distraen seriamente, por lo que nunca se debe abusar de ellas o emplearlas de modo puramente decorativo. Deben quedar reservadas para enfatizar algunas palabras, siempre de manera muy restringida, y nunca en frases completas. Si son utilizadas adecuadamente ayudan a ojear rápidamente el texto y facilitan la rápida comprensión de la información. This is the hidden content, please Sign In or Sign Up Las mayúsculas son mucho más difíciles de leer que las minúsculas, por ello no son recomendadas para textos largos sino para palabras sueltas. Su capacidad de resaltar dentro de un texto le hacen un recurso muy valioso para captar atención sobre un elemento de información. Una opción interesante para publicidad la constituyen las combinaciones de mayúsculas y minúsculas en una misma palabra. Esta combinación presenta una muy difícil lectura lo que requiere mayor procesamiento y por tanto puede producir un mayor recuerdo, si bien esto última hipótesis no ha sido comprobada empíricamente. Las itálicas o cursivas son muy poco legibles y son poco recomendables, solo deben ser utilizadas con fuentes de tamaño suficientemente grande. Tamaño de las fuentes El tamaño de la letra debe elegirse teniendo en cuenta la naturaleza de la composición y la distancia a la que se va a leer. Para pequeños formatos como informes, libros, folletos, manuales o páginas web, conviene utilizar fuentes entre 8 y 12 puntos para cuerpos de texto. El cuerpo promedio de 11 puntos funciona a la perfección con impresoras de 300 dpi. Elementos textuales menos importantes en la composición, como notas de pie, pueden ir a tamaños de 7-8 puntos, siempre y cuando resulten legibles en la fuente elegida. En lo que respecta a grandes formatos, para un cartel que será observado a 10 metros, la altura de la letra debe ser, al menos, de 2,5 cm, mientras que para una valla publicitaria que deba leerse a 60 metros, la altura de la letra deberá ser, al menos, de 15 cm. Espaciado entre caracteres La legibilidad de un texto va a depender del correcto espaciado entre letras y palabras que lo forman. Los principales aspectos a considerar serán el tipo de letra utilizado (familia tipográfica), el cuerpo (tamaño de letra) con el que trabajemos y el grosor de la letra. Una combinación adecuada de estos tres elementos (set) nos proporciona una textura homogénea del texto, lo lo que aumentará su legibilidad. Dos importantes conceptos que debemos estudiar y utilizar para modificar el espaciado entre letras son el track y el kern. El track o tracking ajusta el espacio entre caracteres, abriéndolo cuando se trata de cuerpos pequeños y cerrándolo cuando se trata de cuerpos grandes, con lo que se consigue alterar la densidad visual del texto. El track actúa globalmente sobre todo el texto y depende del tamaño de los caracteres. Como regla general, cuanto más grande sea el cuerpo más apretado debe ser el track. This is the hidden content, please Sign In or Sign Up El kern o kerning se utiliza para ajustar el espacio entre entre las letras de una misma palabra o en algunos pares de caracteres determinados que llaman la atención por estar demasiado juntos o separados, normalmente en cuerpos grandes. El kern es estrictamente proporcional, ya que el espacio eme (la unidad en la que se basa) tiene el mismo tamaño en puntos que el cuerpo de los caracteres, es decir que el espacio eme para un texto de 12 puntos mide 12 puntos. This is the hidden content, please Sign In or Sign Up Tanto el track como el kern se miden en unidades relativas al tamaño en puntos de los caracteres. Cada carácter de una fuente concreta está rodeado por una cierta cantidad de espacio lateral, establecida por su diseñador. La anchura de un carácter comprende no sólo el carácter en sí, sino también este espacio lateral. El kern y el track modifican también la anchura de los caracteres, al modificar su espacio lateral. Un conjunto adecuado de estos valores proporciona un color homogéneo de texto, consiguiendo que las letras fluyan de forma natural y rítmica en las palabras, y las palabras en las líneas. Las palabras parecen de un tono más luminoso si las letras están más separadas. Del mismo modo, si se incrementa el espaciado que hay entre palabras y líneas, el tipo parece adquirir un valor más brillante. El espacio que pone la barra espaciadora entre una palabra y otra forma parte del diseño de la fuente, como un carácter más. Las líneas demasiado sueltas producen discontinuidad en la lectura, mientras que las demasiado apretadas hacen que sea complicado distinguir las mínimas unidades significativas (las palabras). Como norma general, la separación entre letras y palabras debe realizarse de forma coherente, para que sea fácil de leer, teniendo en cuenta especialmente las mayúsculas y sobre todo en rotulación. No es la misma separación la que deben tener las letras D y O que la M, la I o la N en una palabra como DOMINO. This is the hidden content, please Sign In or Sign Up El ajuste varía según las combinaciones de letras que van juntas, por ejemplo en la silaba "To" la "o" debe entrar unos pocos píxels debajo de la "T". Ancho de línea Otro factor decisivo en la facilidad de lectura de un texto y en su poder comunicativo es el ancho de línea. Es conocido por todos que a una menor longitud de línea, mayor velocidad de lectura, razón por la cual los periódicos tienen columnas muy estrechas. Sin embargo, líneas demasiado cortas dificultan la lectura por el ritmo visual al que obliga con el cambio constante de línea. Una mayor longitud de línea requiere de un salto de mayor longitud de un punto de fijación ocular (el extremo derecho final de una línea) al siguiente (el inicio izquierdo de la siguiente). A mayor longitud del salto, más inexactitud en la siguiente fijación y por tanto mayor dificultad de lectura. Como regla, podemos tomar para una línea más de 40 caracteres y menos de 70. En líneas muy cortas, es importante la correcta distribución de las unidades de significado, procurando siempre que cada línea ofrezca al lector una entidad significativa propia, lo que hace el texto mucho más fácil de leer y más comprensible. Interlineado El interlineado (leading), espacio vertical entre las líneas de texto, es un factor importante para que el lector pueda seguir correctamente la lectura sin equivocarse de línea o cansar la vista, además de ser uno de los responsables de la sensación de color que toma un bloque de texto. This is the hidden content, please Sign In or Sign Up Como regla general, conviene darle al interlineado uno o dos puntos más que el valor del cuerpo de la fuente, o sea, que si tenemos un texto en cuerpo 10, un interlineado de 12 da un blanco apropiado en la interlinea. Si se utilizan valores de interlineado menores al cuerpo de texto las líneas pueden comerse unas a otras o volverse difícil leer. A mayor espacio entre líneas, mayor facilidad de lectura. Se recomienda un interlineado óptimo de un ancho de línea de 1,5. Alineación de los textos El texto puede alinearse de cinco formas distintas: alineado a la izquierda, alineado a la derecha, justificado, centrado o asimétrico. El texto alineado a la izquierda es el más natural y recomendable para textos largos. Crea una letra y un espacio entre palabras muy uniforme, y dado que las líneas terminan en diferentes puntos, el lector es capaz de localizar fácilmente cada nueva línea. Esta es posiblemente la forma de alineación de textos que resulta más legible. En cuanto a legibilidad los estudios en papel impreso no han encontrado diferencias entre el texto justificado o el alineado a la izquierda, aunque si han demostrado que los "malos" lectores (lo que puede incluir a algunos tipos de discapacitados) leen mejor texto alineado a la izquierda que el justificado. Por el contrario, la alineación a la derecha va en contra del lector, porque es dificil encontrar la nueva línea. Este método puede ser adecuado para un texto que no sea muy extenso, pero no para grandes bloques. El texto justificado (alineado a derecha e izquierda) puede ser muy legible si el diseñador asegura que el espacio entre letras y palabras sea uniforme y los molestos huecos entre palabras, denominados "ríos", no interrumpan el curso del texto. En caso contrario, los textos resultan menos legibles y provoca que algunas palabras con mayor espacio entre caracteres sean involuntariamente enfatizadas. Resulta adecuado en columnas estrechas o bloques de texto de poca extensión, ya que resulta monótono y cansa al lector. This is the hidden content, please Sign In or Sign Up Las alineaciones centradas dan al texto una apariencia muy formal y son adeucadas cuando se usan mínimamente. Pero debe evitarse configurar textos demasiado largos con este modelo. Las alineaciones asimétricas se usan cuando el diseñador desea romper el texto en unidades de pensamiento lógicas, o para dar a la página un aspecto más expresivo. Obviamente la configuración de grandes cantidades de texto de esta manera acaba por cansar al lector. Color de los textos El color, aplicado discretamente a algunas partes del texto, puede mejorar mucho su legibilidad, darle un mayor peso visual e incluso crear la impresión de mayor variedad de fuentes. Un ligero toque de color en los subtítulos, o remarcando una cita, es un recurso muy útil y elegante, pero hacer un collage de colores en una página de texto que pretende ser serio o informativo pone en evidencia un mal gusto y un escaso sentido común. Cuando tenemos que buscar un color para asociar a un tipo, lo primero que deberemos de examinar son los objetivos del trabajo que tenemos que realizar y el público al que va dirigido. No es lo mismo un cartel destinado a anunciar el último disco de un grupo musical que un folleto sobre planes de pensiones de un banco. Ambos temas son totalmente diferentes y están destinados a públicos con preferencias y necesidades distintas. Uno de los factores más importante de los textos, que influye sobremanera en la legibilidad de los mismos, es el contraste entre estos y el fondo sobre el que se situan. Un contraste adecuado hace que los textos se lean bien y que su lectura no canse al lector, condición muy importante en obras de contenido textual importante. Si el tipo se disminuye en tamaño, debe incrementarse la fuerza de contraste de color. This is the hidden content, please Sign In or Sign Up Estamos acostumbrados a ver tipos negros sobre papel blanco, y tradicionalmente esta combinación es la más legible. Además muchos tipos se han diseñado para ser leidos como letras negras sobre fondo blanco y ofrecen una optima legibilidad impresos de este modo. This is the hidden content, please Sign In or Sign Up En el momento en que se añade color al tipo o al fondo, se altera la legibilidad del texto. En consecuencia, la tarea del diseñador es combinar las propiedades del tipo y el color para multiplicar su potencial comunicativo. Estos dos elementos pueden dar vida a un texto que, de otro modo, fracasaría en su vertiente comunicativa. Para alcanzar la óptima legibilidad cuando se diseña con tipos y color se han de sopesar cuidadosamente las tres propiedades del color (tono, valor e intensidad) y determinar el contraste apropiado entre las letras y su fondo. Podemos usar contrastes de tono (cálidos y fríos), contrates de valor (luminosos y oscuros) o contrastes de saturación (vivos y apagados). Los colores azul y naranja, complementarios totalmente saturados, ofrecen un contraste tonal pleno, pero cuando lo aplicamos a tipo y fondo los bordes de las letras tienden a oscilar y complica la lectura del texto. Esto ocurre porque ambos colores poseen un brillo que rivaliza entre sí y que reclaman atención propia. La solución es suavizar o acentuar uno de los tonos haciendo que su valor pase a ser claro u oscuro. Un texto de color amarillo sobre fondo blanco perdería importancia, ya que, no resaltaría al ser los dos colores claros, sin embargo, si el color de fondo es negro, el amarillo cobraría fuerza. Según algunos estudios, la letra más legible es la negra sobre fondo amarillo. This is the hidden content, please Sign In or Sign Up Por otra parte, si dos colores análogos están demasiado cerca en el círculo cromático y no aportan suficiente contrate de tono o valor, deberían reajustarse para agudizar dicho contraste. Un buen principio es coger colores que no estén directamente enfrentados ni estén demasiado próximos en el círculo cromático. Deben buscarse colores compatibles, pero tambiÈn colores que difieran en valor e intensidad. Tendremos que tener también en cuenta las cualidades y características de cada tipo, ya que un tipo muy fino o estrecho, o una letra de trazo puede parecer muy débiles o ilegibles si los tonos son muy similares o si los valores están demasiado próximos. Por lo tanto, debe de existir el contraste suficiente para proteger la fidelidad de las letras. Si el contraste de colores no basta por sí solo para destacar el tipo sobre el fondo, pueden añadirse perfiles y sombras. De todas formas no es recomendable utilizar estos efectos en los bloques de texto, pues en terminos de legibilidad sería más perjudicial que beneficioso. Los mejores resultados se consiguen con tipos grandes o en titulares. Otra solución, cuando el contraste de color es escaso o cuando debe imprimirse en color un gran fragmento textual, es configurar correctamente los espaciados, pues favorecen la legibilidad. Empleando tramas podemos enriquecer la variedad cromática de un texto sin tener que añadir colores adicionales. Las tramas resultan especialmente útiles en trabajos de impresión con uno o dos colores. Otras recomendaciones Además de todas los conceptos anteriores, existen otras reglas básicas de composición que siempre dan buenos resultados: Los comienzos de párrafo deben ser fácilmente reconocibles, pudiendo usar para este fin los indentados, los estilos o la separación de párrafos con un retorno (uno, nunca dos). Hay que evitar en lo posible el texto subrayado, en especial títulos y subtítulos, ya que las líneas los separan del texto al que pertenecen. En caso de necesitar destacar estos elementos, es mejor utilizar itálicas en lugar de subrayados. Es una buena idea dejar un espacio mayor por encima de los títulos y subtítulos que por debajo, así como evitar ponerlos todos en mayúsculas. Las viñetas (bullets) y sangrías (indent) son recursos útiles para estructurar la información, separar conceptos, subordinar unos a otros, crear dependencias, etc. Los espacios en blanco hacen los documentos más fáciles de leer y le dan un espacio más limpio. Fuente: desarrolloweb.com Link to comment Share on other sites More sharing options...
NeoxSys Posted November 14, 2011 Author Share Posted November 14, 2011 Tipografía en la Web A la hora de manejar fuentes en una página web tenemos que tener en cuenta las limitaciones que presenta este medio particular. Por This is the hidden content, please Sign In or Sign Up Las familias tipográficas disponibles en cada sistema operativo son diferentes. Aunque las versiones actuales de Internet Explorer instalan un conjunto de fuentes similar en Windows y Mac Os, hay que tener en cuenta que existen otros navegadores y otros sistemas operativos, por lo que es importante asegurarnos de que los contenidos textuales tendrán el mismo aspecto (oel más parecido posible) sea cual sea la pareja SO-navegador de cada usuario. Puesto que un 97% de los usuarios de Internet utilizan PC+Windows o Mac+Mac Os, parece lógico diseñar nuestras páginas web buscando la mayor compatibilidad tipográfica entre ambos sistemas. Las fuentes instaladas por defecto en Windows y Mac OS (fuentes seguras) son: This is the hidden content, please Sign In or Sign Up En cuanto a Linux, el número de fuentes instaladas por defecto depende de la versión, aunque suelen ser pocas. Estas fuentes por defecto se van ampliando según las aplicaciones instaladas posteriormente. Las aplicaciones de ofimática suelen instalar fuentes propias, así como los navegadores web, especialmente Internet Explorer. Por otra parte, Microsoft, Apple y las distintas empresas involucradas en Linux ofrecen a sus usuarios paquetes gratuitos de fuentes, por lo que el número de ellas presentes en una máquina puede aumentar considerablemente. Un ejemplo de estos paquetes es Windows Font Pack, que facilita fuentes tanto para entornos PC y Mac. Buscando siempre la máxima compatibilidad entre plataformas, en el diseño de páginas web deberemos usar tan solo fuentes seguras, prescindiendo de las adicionales que hayan podido instalar en los ordenadores aplicaciones complementarias o los propios usuarios. Equivalencia entre fuentes Windows y Mac OS Como las fuentes instaladas por defecto son diferentes en el caso de un PC con Windows y un Mac, puede darse el caso de que una página web no se visualice de forma correcta si utilizamos fuentes incompatibles. Las fuentes equivalentes en los sistemas PC y Mac son las siguientes: This is the hidden content, please Sign In or Sign Up Para asegurarnos de la correcta visualización en ambos sistemas habrá que utilizar siempre Hojas de Estilos en Cascada (CSS), asignando a los elementos textuales dos fuentes equivalentes, una para PC y otra para Mac. Si además queremos estar seguros de una visualización similar en otros sistemas (Linux, por ejemplo), podemos asignar también una familia tipográfica genérica, como serif, sans-serif, cursive, etc.). Ejemplo: .titular{font-size:16px;font-family:Arial, Helvetica,sans-serif;} ... Esto es un titular Generalmente los usuarios de Mac disponen de las fuentes incluidas en Windows Font Pack, ya que éste se instala automáticamente desde que Mac Os viene por defecto con Internet Explorer, pero nunca estaremos seguros de qué versión tiene el usuario final, así que la regla de declarar fuentes alternativas mediante CSS deberemos aplicarla siempre. Tamaño de las fuentes Un Mac trabaja por defecto a una resolución de 72 ppp (pixels por pulgada), por lo que en él existe una equivalencia exacta entre punto y píxel, cosa que no ocurre en un PC con Windows, cuya resolución de trabajo por defecto es de 96 ppp. Mac: 12 pt ---------- 12 px PC: 12 pt ----------- 16 px Como consecuencia, el tamaño de una fuente definida en puntos es diferente en ambos sistemas, por lo que los usuarios de Mac verán las fuentes más pequeñas que los de PC. This is the hidden content, please Sign In or Sign Up La siguiente imagen muestra la equivalencia entre puntos y píxeles, así como la visualización de los diferentes tamaños en fuente Verdana. This is the hidden content, please Sign In or Sign Up Como se puede apreciar en la imagen, los tamaños inferiores a 9 píxeles (7 puntos) no se visualizan correctamente, ya que las letras se hacen demasiado pequeñas a esos tamaños. Por el contrario, a tamaños superiores a 16 píxeles (12 puntos), las letras comienzan a escalarse, produciéndose un efecto de dientes de sierra en sus contornos, sobre todo en las zonas inclinadas y curvas de las mismas. Por estos motivos, el tamaño de los contenidos textuales para la web debe oscilar entre 9 y 15 píxeles (7 y 11 puntos), ya que con estos valores los caracteres resultan legibles y sin escalado. Si necesitamos incluir textos de mayor o menos tamaño en una página, la alternativa pasa por hacerlo como fichero gráfico, en formato GIF o PNG, teniendo en cuenta entonces la imposibilidad de modificar dichos textos “en el aire", por lo que no es viable este sistema para contenidos que deban cambiar con el idioma, por ejemplo (habría que crear versiones de la imagen para cada opción posible). Una consideración adicional referente a los tamaños de las fuentes, válida tanto para puntos como para píxeles, es que conforme se aumenta la resolución de pantalla disminuye el tamaño relativo de las fuentes, es decir, su tamaño de visualización final. Esto obliga a tener especial cuidado al usar textos de pequeño tamaño a resolución 800x600, ya que para los usuarios que visualicen la página web a 1024x768 pueden resultar ilegibles. Caso de ser necesario incluir textos en estas condiciones, una buena solución es crear dos ficheros de estilos CSS, uno para cada resolución, asignando un fichero u otro a la página mediante JavaScript según la resolución empleada por cada usuario. Ventajas e inconvenientes de usar medidas en píxeles La especificación de tamaños de fuente en píxeles ofrece la ventaja de permitirnos controlar en todo momento la visualización final de los contenidos textuales, ya que nos asegura la máxima compatibilidad entre sistemas operativos y la inmutabilidad del tamaño de los textos frente a posibles configuraciones personalizadas de los navegadores web (Ver > Tamaño de la fuente > Grande, por ejemplo). Sin embargo, con su uso pueden producirse problemas de accesibilidad, ya que impide la personalización por parte de los usuarios con problemas de visión de mayores tamaños para las fuentes. Como norma general, y si las especificaciones del proyecto no nos marcan condiciones específicas sobre accesibilidad, usaremos siempre como unidad de medida en trabajos web el píxel.Referencia: Sobre asignar tamaños al texto con CSS os recomendamos la lectura del artículo This is the hidden content, please Sign In or Sign Up . Fuentes a usar en las páginas web A la hora de seleccionar las fuentes que vamos a usar en una página, deberemos tener en cuenta que existe algunas especialmente diseñadas para su visualización en la pantalla de un monitor, por lo que suelen resultar las más apropiadas para la web. Estas fuentes suelen ser sans serif, destacando entre ellas Verdana, Arial y Helvetica, pudiendo especificarse también el tipo genérico sans-serif, con lo que el navegador usará la fuente sans serif que por defecto tenga instalada la máquina del usuario. En caso de facilitar a los usuarios de la web documentos o páginas para impresión, es conveniente sustituir las fuentes anteriores por alguna tipo serif (con remates en sus extremos), ya que son más legibles en documentos impresos y menos monótonas. Entre ellas podemos destacar Times New Roman, Courier y Courier New, pudiendo especificarse también el tipo genérico serif, con lo que el navegador usará la fuente serif que por defecto tenga instalada la máquina del usuario. Es posible asignar a una página web mediante CSS dos conjuntos de fuentes diferentes, uno para su visualización en pantalla y otro para su impresión. Basta con declarar los dos bloques de estilos separadamente, especificando en el atributo media de la etiqueta style el tipo de medio en el que será válido cada uno. Ejemplo: .contenidos{font-size:12px;font-family:Verdana,Helvetica,sans-serif;} .contenidos{font-size:10px;font-family:Times New Roman,Times,serif;} Conclusiones A la hora de trabajar con textos en nuestras páginas web deberemos siempre especificar el tamaño de las fuentes y las familias mediante estilos CSS. Los tamaños se especificarán normalmente en píxeles, considerando valores válidos aquellos comprendidos entre 9 y 16 píxeles. Si debemos usar el tamaño 8 píxeles en resolución 800x600, se deberá comprobar su correcta visualización en resolución 1024x768, implementando un fichero de estilos para cada resolución caso de ser necesario. En ningún caso se usarán tamaños inferiores a 8 píxeles. Si debemos usar tamaños superiores a 16 píxeles, es conveniente sustituir el texto afectado por una imagen en la que figure el mismo, evitándose con ello el escalado. Las fuentes a usar serán aquellas que tengan un equivalente en PC y Mac, declarando ambas en estilos CSS. Se elegirán preferentemente las fuentes Verdana, Helvetica y Arial para la presentación de textos en pantalla, añadiendo además la fuente genérica sans-serif, en aras de la correcta visualización en todos los casos. Si ofrecemos páginas alternativas para la impresión, se usarán en ellas preferentemente las fuentes Times New Roman y Times, añadiendo la fuente genérica serif. Fuente: desarrolloweb.com Link to comment Share on other sites More sharing options...
NeoxSys Posted November 14, 2011 Author Share Posted November 14, 2011 Disposición de textos en una página web Para acabar con el tema de tipografías, tratamos la disposición correcta de textos en las páginas web. Por This is the hidden content, please Sign In or Sign Up A la hora de manejar textos en las páginas web son válidas todas las condideraciones vistas para el diseño gráfico general, pero adaptadas a un medio que impone fuertes limitaciones.En primer lugar, leer de la pantalla de una computadora es cansado para los ojos y un 25% más lento que la lectura en papel. Como consecuencia, los usuarios tienden a minimizar el número de palabras que leen, por lo que la comprensión y retención se reduce aproximadamente a un 50%. Además, la web es un medio interactivo, y los usuarios tienden a navegar más que a leer, por lo que hay que tener especial cuidado en ofrecerles contenidos de calidad, perfectamente estructurados e interesantes, que consigan atraer su atención y mantenerla durante la lectura. This is the hidden content, please Sign In or Sign Up Una buena disposición de textos en una página web es la siguiente: Un titular que describa de forma clara el tema tratado. Un pequeño resumen de la información ofrecida. Una serie de palabras clave destacadas (en forma de vínculos, utilizando variables tipográficas o cambios de color). Segementación de los contenidos en unidades más pequeñas, reforzadas con índices y listas con items. Subtítulos significativos, útiles. Una idea por párrafo. La mitad o menos de palabras que las que normalmente se utilizan en textos impresos. La inclusión de gráficos de calidad, buen nivel de escritura y vínculos a otras páginas o websites que den idea de dónde provienen las fuentes o cuáles son las relaciones con otros medios, son elementos que aportan credibilida a los contenidos, lo que hará que los visitantes estén más dispuestos a leer los textos de la página. En cuanto al medio en sí, existen notables diferencias entre una página web y cualquier otro formato de presentación. La orientación de las páginas horizontal, generalmente no se ve al mismo tiempo la totalidad del material, se tiene mucho menor control de la tipografía que en el material impreso y la resolución es menor, por lo que los detalles finos no están bien definidos. Por lo que respecta a la tipografía, cada sistema operativo dispone de un conjunto de fuentes básico para presentar en pantalla los contenidos textuales, siendo diferente el grupo de fuentes que por defecto instala Windows del que instala Mac OS o Linux. Además, las fuentes disponibles para construir páginas web son tan solo un pequeño subconjunto del conjunto de ellas que posee cada sistema operativo. ¿Cuanto texto puede haber en una página? La cantidad de texto conveniente en una página web depende ante todo de qué tipo de página sea, ya que no es lo mismo, ni en concepción ni en desarrollo, un sitio web dedicado al comercio electrónico que uno dedicado a la divulgación científica, ni este que uno dedicado a la presentación de obras pictóricas. Lo que sí hay es una serie de normas generales que a grandes rasgos pueden definir el comportamiento del texto en cualquier página web. Así por ejemplo, si nuestra página contiene mucho texto es conveniente agrupar éste en columnas, ya que está comprobado que una gran cantidad de texto seguido en formato de líneas anchas cansa mucho la vista del usuario y le impulsa abandonar pronto el documento. Como regla general, podemos establecer como longitud correcta de las líneas de una página la que comprende 12-15 palabras. Si estamos en la página principal de un sitio, que es la que en cierta forma da la bienvenida a un visitante y le informa a grandes rasgos de qué es el sitio web en el que se encuentra, el texto debe ser poco y muy explícito, para que pueda sacar con prontitud una idea clara de dónde esta y qué es lo que puede encontrar en el sitio. Si nuestra página pretende comunicar al visitante una serie de conocimientos, como por ejemplo esta página que lees ahora, el texto es entonces el elemento fundamental de la misma, y te veras en la necesidad de elaborar páginas con gran cantidad del mismo. Procura entonces no hacer páginas que ocupen en altura más de una página y media (dos a lo sumo), para no obligar al usuario a utilizar continuamente la barra lateral de scroll, cosa que cansa mucho y hace que se pierda interés por el contenido. Si el tema de tu página es principalmente gráfico, como puede ser el caso de un sitio dedicado al arte o a la fotografía, el texto debe ser poco, sólo el necesario para expresar una serie de ideas claras y concisas, ya que el verdadero protagonista de tu página deben ser las fotografías y elementos gráficos. Como podéis ver, hay tantas normas como sitios se puedan hacer, siendo la experiencia y el método prueba-corrección las verdaderas técnicas maestras para lograr una serie de páginas atractivas y funcionales. Disposición del texto. Niveles de cabeceras Como ya hemos dicho antes, y al igual que ocurre en otros soportes divulgativos, la maquetación y el diseño tipográfico es aplicable en casi todos sus niveles al diseño de una página web, por lo que es necesario que para establecer un documento claro y atractivo dividamos el texto de nuestras páginas en una serie de apartados, que vendrán iniciados por una cabecera que defina el contenido de cada bloque, sobre todo si el contenido de nuestras páginas es eminentemente textual. Como podemos tener bastantes apartados y cabeceras, es necesario ir remarcando la importancia relativa de cada una de ellas en el conjunto del documento, lo que podemos lograr mediante su tamaño y peso, así como con el color de su texto. Como norma general, las cabeceras que definen temas completos deben ser las de mayor tamaño y peso, los apartados principales del tema deben seguirle en importancia, y así deberemos ir reduciendo el tamaño y peso de las cabeceras conforme vayamos bajando en el árbol jerárquico de temas del documento. This is the hidden content, please Sign In or Sign Up Dentro de cada bloque, y ya definidas las cabeceras, deberemos ir situando bloques de texto que desarrollen la idea general introducida por la cabecera. El sangrado de este texto puede ser diferente dependiendo de la cantidad de texto en el apartado. Así, si tenemos poco texto podemos distribuirlo como si de un pequeño libro o folleto se tratase, sangrando cada párrafo y justificando el texto del mismo. This is the hidden content, please Sign In or Sign Up Pero si el apartado contiene mucho texto, aunque podemos seguir sangrando los comienzos de párrafo, en este caso no es conveniente la justificación del texto, ya que este tipo de alineación cansa la vista por su monotonía, por lo que es preferible dejar una alineación a la izquierda, en la que el efecto conseguido con la finalización de cada línea en un punto diferente consigue un resultado de descanso visual y hace el contenido mas legible. Con un poco de lectura general y con la contemplación de páginas en Internet podemos ir poco a poco aprendiendo cual es la forma idónea de colocar nuestros textos en cada caso. Recomiendo sobremanera el estudio de unos buenos manuales de maquetación, diseño gráfico y tipografía. Colores de los textos Otro tema de vital importancia es el color que vamos a dar a nuestros textos. Es conocido el efecto psicológico de los colores y cómo afectan y transmiten uno u otro sentimiento, además de crear el conjunto disposición-color un estado receptivo en el usuario que le puede impulsar a continuar navegando en nuestra página o por el contrario abandonarla rápidamente. Como norma general debemos procurar que el color de nuestros textos sea tal que destaque claramente del fondo de la página, sobre todo en el caso en que usemos una imagen de fondo, ya que el texto es la vía principal de transmisión de ideas, y por lo tanto debe ser la parte de nuestra página que más clara resulte al visitante. O no colocamos imagen de fondo o lo hacemos de tal forma que el texto, por su disposición y color destaque claramente sobre el fondo. Un color de texto único para toda la página puede resultar monótono, sobre todo si el tema principal de esta es artístico o colorista, por lo que a veces es conveniente usar diferentes colores para diferentes partes del texto. En estos casos deberemos usar una gama de colores compatibles, que puede parar por el uso de colores análogos (de la misma gama o familia)o por el uso de colores complementarios, que consiguen un efecto visual equilibrado, potenciándose mutuamente, y especialmente indicados cuando queremos destacar un texto sobre un fondo de color. Es conveniente para ello el estudio de uno cualquiera de los gráficos de gamas de colores que podemos encontrar en cualquier obra dedicada a la pintura. En la imagen de la izquierda tenéis la rueda de colores; los complementarios se encuentran opuestos en la rueda, mientras que los análogos a un color están alrededor del mismo. Si nuestra página esta orientada a un público juvenil, como puede ser una página sobre el mundo de los video juegos, el texto puede estar definido por una gama de colores agresivos, como son el rojo con amarillos, o con una gama de colores que le de aspecto sugestivo, como letras blancas, rojas o doradas sobre un fondo negro. Pero si nuestra página esta concebida para un público serio y/o general, como puede ser una página sobre economía o política, deberemos emplear una gama de colores neutros, como grises, azule grisáceos o tonos pastel, apta para todo tipo de públicos. Por último, si nuestra página es corporativa, como puede ser el caso de una página de empresa o de un banco, los colores deben ser los marcados por la propia empresa, ya que cada empresa tiene uno o mas logotipos y un conjunto de colores corporativos propios, que son los que dan identidad propia a esa empresa entre todas las demás, siendo fundamental transmitir en la página esa individualidad que le es propia. Estudiaremos mejor el mundo de los colores en el capítulo sobre imágenes. Familias de fuentes en los textos Otro tema a tener en cuenta a la hora de diseñar nuestros textos es qué tipo de fuentes vamos a usar en nuestra página. Al igual que ocurre en el caso de los colores, es posible y casi conveniente el mezclar varios tipos de fuentes, buscando sobre todo romper la monotonía que crea una sola fuente. Si deseamos mezclar fuentes deberemos, como regla general, no usar más de dos o trés tipos diferentes. Por ejemplo, podemos usar dos fuentes que sean parecidas, una de ellas Sans Serif para las cabeceras, y otra Serif para los bloques de texto. Recordemos que las fuentes Serif pintan una especie de terminaciones de adorno en los extremos de las letras, mientras que las Sans Serif no, pintando todas las letras planas. Fuentes Serif son por ejemplo la Times New Roman y la Georgia, y fuentes Sans Serif son la Verdana y la Arial. Si la página va dedicada a un público corporativo o adulto podemos usar fuentes serias o clásicas, como Times New Roman o Arial. Si esta orientada a público general podemos usar Verdana, Helvetica o Tahoma. Y si nuestro público va a ser joven podemos usar fuentes mas dinámicas, como Comic Sans MS, Impact o Lucida Console. Ejemplos: Fuente Times New Roman (Serif) Fuente Tahoma (Sans Serif) Fuente Impact (Sans Serif) Como en todo, la mejor forma es experimentar y experimentar, hasta que encontremos aquella combinación que exprese lo que deseamos transmitir, pero poniéndonos siempre en el lugar del usuario potencial, no en el lado del diseñador, ya que es este el verdadero destinatario y juez de nuestro trabajo final. Cuidado con la ortografía Deberemos tener siempre especial cuidado con la sintaxis y la ortografía en nuestros textos, ya que un buen trabajo de diseño puede verse arruinado si lo que transmitimos esta mal expresado y/o mal escrito. Al fin y al cabo nuestro público va a sacar de nosotros, y lo que es más importante, de la empresa o entidad que representan las páginas web, la impresión que le demos a través las mismas, y un texto lleno de errores ortográficos denota un mal trabajo, por lo que es fácil que el usuario final abandone rápidamente el sitio web entero, con las consecuencias que pueda traer eso. Para ayudarnos en este tema podemos usar un buen procesador de textos, utilizando su herramienta de corrección sintáctica y ortográfica, lo que nos va a permitir obtener un texto bien escrito sin necesidad de ser licenciados en filología. Consejos generales Vamos a resumir escuetamente una serie de consejos para el buen uso de textos en una página web: No abusar de la mayúsculas: estas letras poseen un fundamento sintáctico y gramatical propio, pero además son un elemento idóneo para remarcar ciertas partes de información de la página. Su uso excesivo mata este factor, convirtiendo un texto interesante en una serie monótona de caracteres que no dicen nada, y que por lo tanto no captan la atención del visitante. Usa las mayúsculas al principio de cada frase, los nombres propios, los títulos y subtítulos de la página. No usar textos de pequeño tamaño en tipos serif: debido a que este tipo de letras están pensadas para ser impresas, no para ser contempladas en pantalla, y si son de pequeño tamaño se deforman y se hacen ilegibles. Esto pasa también con los tipos son Sans Serif de pequeño tamaño. No abusar de las letras en cursiva: ya que el texto en itálica es difícil de leer en pantalla, debido a la inclinación del mismo, que provoca un escalonado en los bordes de las letras que las deforma, sobre todo en tamaños pequeños de fuente. No abusar de los textos en negrita: ya que la misión de este es reforzar la importancia de una parte de la información que damos en la página, y se debe usar sólo para este fin. Además ocurre algo parecido al caso de las cursivas, ya que para pintar en pantalla una letra en negrita lo que hace el ordenador es añadir pixels adicionales en los bordes de la letra. Si esta es de pequeño tamaño, se produce un desagradable efecto de emborronado, y si es de gran tamaño se produce el efecto de escalonamiento, no siendo convenientes ninguno de ellos. No usar, y menos aún abusar, de los efectos de parpadeo o deslizamiento: como pueden ser textos en marquesina, en efecto Blink o en desplazamientos mediante scripting, ya que son irritantes y marean y confunden al usuario. No usar demasiados tipos de fuentes ni demasiados colores diferentes , ya que rompen la armonía que debe haber en el contenido de todo documento, aparte de que corremos el riesgo de que el usuario no tenga alguna de las fuentes usadas instaladas en su ordenador, lo que hará que éste las sustituya por la fuente estándar, rompiendo con ello todo nuestro esquema de estiolo. Conviene usar siempre las fuentes estándar. Cuidar la accesibilidad de la información: ya que si usamos letras de pequeño tamaño, efectos compatibles sólo con algunos ordenadores o colores que necesiten pretaciones especiales, estamos eliminando de la lista de nuestros visitantes a aquellas personas que no pueden acceder a este tipo de contenidos. Usar enlaces visualmente independientes: es decir, que los enlaces de la página se distingan cláramente del resto del texto. Piensa que no todos tus visitantes están tan acostumbrados como tú a navegar por Internet, por lo que debes marcar las diferentes partes de tu página de forma clara. Presentar el texto de una forma lógica: no olvidemos que al fin y al cabo una página web es un documento como otro cualquiera, por lo que debe tener una lógica de desarrollo y de presentación si queremos que cumpla su misión principal, que es facilitar información clara al visitante. Usar siempre caracteres compatibles con el estándar: que tradicionalmente ha sido el el conjunto de caracteres ASCII, y que incluye la letras, los números, los signos de puntuación y algunos caracteres especiales como los tabuladores. Con objeto de dar apoyo a otros idiomas, posteriormente se tomó como modelo el juego de caracteres ISO 8859-1, también llamado a veces ISO Latin-1, que no está orientado a ningún idioma en particular, por lo que para especificar uno de los subgrupos de este correspondiente a un idiomas determinado, es necesario especificarlo en la cabecera de la página mediante la etiqueta CHARSET. Y últimamente, a partir de las especificaciones del HTML 4.0, se ha tomado como estándar el juego de caracteres UNICODE. Para evitar contradicciones y malas interpretaciones es conveniente ceñirse casi siempre al juego ASCII, por lo que si escribes en castellano, no acentúes las palabras directamente, si no que debes usar los caracteres especiales que hay para tal efecto. Fuente: desarrolloweb.com Link to comment Share on other sites More sharing options...
.webp.8407a83ac96563f75e1c428a1f0d4c3e.webp)
.webp.9a04cec050a656fab081ac190f971c3f.webp)
Hack Tools Resurrection
Recommended Posts