SlideShare una empresa de Scribd logo
1 de 10
Tipografía y color Johnny Alexander Pinzón Velasco
Tipografía En general es muy importante una buena estructuración del texto a lo largo de la página, empleando párrafos cortos que faciliten la lectura y poniendo títulos destacados en las distintas secciones del texto. Además, es mejor no apurar mucho los bordes de la pantalla del ordenador: las líneas cortas se leen con mayor facilidad que las largas. Podemos forzar esto situando el texto en una tabla de una sola columna y sin bordes, definiendo que ocupe solo el 85-90 % de la pantalla.
Tipos de Fuentes 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.
Ajuste del espacio entre letras (kerning) El espacio entre las letras de una misma palabra (kerning) no debería ser siempre fijo. Cuando este espacio se ajusta los textos son más legibles y el aspecto estético es mucho mejor. Respecto al espacio que ocupa cada letra existen dos tipos de fuente: las proporcionales y las no proporcionales. En las proporcionales este espacio depende del carácter, por ejemplo una "i" ocupa menos espacio que una "M".  En las fuentes no proporcionales todos los caracteres ocupan el mismo espacio.
Color y contraste con el fondo La combinación más adecuada para el 90% de los casos es texto negro sobre fondo blanco. En pocos casos se recomienda utilizar un color de fondo, en cualquier caso para textos largos siempre es más adecuado texto oscuro sobre un fondo claro. Solo es adecuado usar fondo oscuro y texto claro para títulos, cabeceras o celdas, sin embargo el problema es que los fondos oscuros con texto claro son muy empleados en publicidad y ello puede provocar que contenidos no publicitarios sean afectados por la ceguera a los banners y por tanto ignorados por los Usuarios.
Negritas Las negritas deben utilizarse solo 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. Las negritas llaman poderosamente la atención dentro de un texto e incluso distraen seriamente, por ello nunca se debe abusar de ellas o emplearlas de modo puramente decorativo. En algunas Webs por ejemplo se suele escribir en negrita el nombre de la empresa siempre que aparece, lo que no aporta absolutamente nada.
Tamaños de letra Un tamaño de entre 10 y 12 puntos suele ser el estándar para la mayoría de textos, sin embargo lo realmente importante es que el tamaño de fuente no sea fijo y pueda ser modificado libremente por los usuarios mediante la opción correspondiente del navegador.
Color de los textos 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 sitúan. 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.
La Teoría del color Define muchos tipos de contraste y, aunque algunos no son especialmente aplicables a páginas web, es muy interesante conocerlos para profundizar en el conocimiento del efecto de los colores.
Contraste de Tono Está relacionado directamente con las distancias entre dos colores dentro del Círculo Estándar de Color. Así, cuanta mayor es la distancia entre dos colores dentro del círculo, mayor es el contraste entre ambos.

Más contenido relacionado

Similar a Tipografía y color

T4 pa2yarannabeldisenografico
T4 pa2yarannabeldisenograficoT4 pa2yarannabeldisenografico
T4 pa2yarannabeldisenograficoAnnabellYar
 
La legibilidad en un proyecto gráfico
La legibilidad en un proyecto gráficoLa legibilidad en un proyecto gráfico
La legibilidad en un proyecto gráficoGráficas Azorín
 
Presentaciones efectivas
Presentaciones efectivasPresentaciones efectivas
Presentaciones efectivasbitwbyk
 
Crear textos en lectura fácil
Crear textos en lectura fácilCrear textos en lectura fácil
Crear textos en lectura fácilamluise
 
el texto en multimedia
el texto en multimediael texto en multimedia
el texto en multimedia65519584
 
4.2 composición
4.2 composición4.2 composición
4.2 composiciónLuis Amaya
 
4.2 composicion
4.2 composicion4.2 composicion
4.2 composicionLuis Amaya
 
Requisitos para la_creacion_de_presentaciones_afectivas_en_la_educacion
Requisitos para la_creacion_de_presentaciones_afectivas_en_la_educacionRequisitos para la_creacion_de_presentaciones_afectivas_en_la_educacion
Requisitos para la_creacion_de_presentaciones_afectivas_en_la_educaciontateii
 
Consejos para preparar una presentación de powerpoint
Consejos para preparar una presentación de powerpointConsejos para preparar una presentación de powerpoint
Consejos para preparar una presentación de powerpointJohn Carabal
 
Pautas a seguir para accesibilidad en PowerPoints
Pautas a seguir para accesibilidad en PowerPointsPautas a seguir para accesibilidad en PowerPoints
Pautas a seguir para accesibilidad en PowerPointspruebas
 
Cuadro (alternativa)
Cuadro (alternativa)Cuadro (alternativa)
Cuadro (alternativa)lolopop123
 
Recomendaciones para el armado del tamplate.pptx
Recomendaciones para el armado del tamplate.pptxRecomendaciones para el armado del tamplate.pptx
Recomendaciones para el armado del tamplate.pptxJohanna767825
 

Similar a Tipografía y color (20)

Eq4 tipografia
Eq4 tipografiaEq4 tipografia
Eq4 tipografia
 
T4 pa2yarannabeldisenografico
T4 pa2yarannabeldisenograficoT4 pa2yarannabeldisenografico
T4 pa2yarannabeldisenografico
 
La legibilidad en un proyecto gráfico
La legibilidad en un proyecto gráficoLa legibilidad en un proyecto gráfico
La legibilidad en un proyecto gráfico
 
Presentaciones efectivas
Presentaciones efectivasPresentaciones efectivas
Presentaciones efectivas
 
Crear textos en lectura fácil
Crear textos en lectura fácilCrear textos en lectura fácil
Crear textos en lectura fácil
 
2. elem graficos 2003
2. elem graficos 20032. elem graficos 2003
2. elem graficos 2003
 
Tipografia
TipografiaTipografia
Tipografia
 
el texto en multimedia
el texto en multimediael texto en multimedia
el texto en multimedia
 
Periodismo digital
Periodismo digitalPeriodismo digital
Periodismo digital
 
4.2 composición
4.2 composición4.2 composición
4.2 composición
 
4.2 composicion
4.2 composicion4.2 composicion
4.2 composicion
 
Requisitos para la_creacion_de_presentaciones_afectivas_en_la_educacion
Requisitos para la_creacion_de_presentaciones_afectivas_en_la_educacionRequisitos para la_creacion_de_presentaciones_afectivas_en_la_educacion
Requisitos para la_creacion_de_presentaciones_afectivas_en_la_educacion
 
Consejos para preparar una presentación de powerpoint
Consejos para preparar una presentación de powerpointConsejos para preparar una presentación de powerpoint
Consejos para preparar una presentación de powerpoint
 
Pautas a seguir para accesibilidad en PowerPoints
Pautas a seguir para accesibilidad en PowerPointsPautas a seguir para accesibilidad en PowerPoints
Pautas a seguir para accesibilidad en PowerPoints
 
cuadro conceptual
cuadro conceptualcuadro conceptual
cuadro conceptual
 
Cuadro (alternativa)
Cuadro (alternativa)Cuadro (alternativa)
Cuadro (alternativa)
 
Tipografia
TipografiaTipografia
Tipografia
 
Recomendaciones para el armado del tamplate.pptx
Recomendaciones para el armado del tamplate.pptxRecomendaciones para el armado del tamplate.pptx
Recomendaciones para el armado del tamplate.pptx
 
Power point
Power pointPower point
Power point
 
Power point
Power pointPower point
Power point
 

Último

Arquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfArquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfduf110205
 
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)LeonardoDantasRivas
 
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfLAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfBrbara57940
 
Calendario 2024 Santoral con fase lunar.pdf
Calendario 2024 Santoral con fase lunar.pdfCalendario 2024 Santoral con fase lunar.pdf
Calendario 2024 Santoral con fase lunar.pdfAsol7
 
EL CONCEPTO Y EL PARTIDO ARQUITECTONICO.pdf
EL CONCEPTO Y EL PARTIDO ARQUITECTONICO.pdfEL CONCEPTO Y EL PARTIDO ARQUITECTONICO.pdf
EL CONCEPTO Y EL PARTIDO ARQUITECTONICO.pdfCeciliaTernR1
 
ALICORP wdv ebwnskjdhejsklxkcnhbvjdkspdlfkjhdjisokdjchbvfnhjdkslkjdhfeiopweoi...
ALICORP wdv ebwnskjdhejsklxkcnhbvjdkspdlfkjhdjisokdjchbvfnhjdkslkjdhfeiopweoi...ALICORP wdv ebwnskjdhejsklxkcnhbvjdkspdlfkjhdjisokdjchbvfnhjdkslkjdhfeiopweoi...
ALICORP wdv ebwnskjdhejsklxkcnhbvjdkspdlfkjhdjisokdjchbvfnhjdkslkjdhfeiopweoi...sayumi4
 
Historia de los estilos artísticos docum
Historia de los estilos artísticos documHistoria de los estilos artísticos docum
Historia de los estilos artísticos documminipuw
 
Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura Moderna
Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura ModernaLe Corbusier y Mies van der Rohe: Aportes a la Arquitectura Moderna
Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura Modernasofpaolpz
 
La arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaLa arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaCamilaIsabelaRodrigu
 
Gabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimientoGabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimientoGabrielaMarcano12
 
Arquitectura moderna / Nazareth Bermúdez
Arquitectura moderna / Nazareth BermúdezArquitectura moderna / Nazareth Bermúdez
Arquitectura moderna / Nazareth BermúdezNaza59
 
Portafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B HuizingaPortafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B Huizingagbhuizinga2000
 
Curso Básico de Windows Word y PowerPoint.pdf
Curso Básico de Windows Word y PowerPoint.pdfCurso Básico de Windows Word y PowerPoint.pdf
Curso Básico de Windows Word y PowerPoint.pdfirisvanegas1990
 
PRESENTACION SOBRE EL PROYECTO DE GRADO .
PRESENTACION SOBRE EL PROYECTO DE GRADO .PRESENTACION SOBRE EL PROYECTO DE GRADO .
PRESENTACION SOBRE EL PROYECTO DE GRADO .Rosa329296
 
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdfQue es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdfandrea Varela
 
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfslaimenbarakat
 
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)lemg25102006
 
Sesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxSesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxMarcosAlvarezSalinas
 
Maquetas-modelos-prototipos-Mapa mental-.pdf
Maquetas-modelos-prototipos-Mapa mental-.pdfMaquetas-modelos-prototipos-Mapa mental-.pdf
Maquetas-modelos-prototipos-Mapa mental-.pdforianaandrade11
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2dheribertaferrer
 

Último (20)

Arquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdfArquitectura griega, obras antiguas. pdf
Arquitectura griega, obras antiguas. pdf
 
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
 
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfLAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
 
Calendario 2024 Santoral con fase lunar.pdf
Calendario 2024 Santoral con fase lunar.pdfCalendario 2024 Santoral con fase lunar.pdf
Calendario 2024 Santoral con fase lunar.pdf
 
EL CONCEPTO Y EL PARTIDO ARQUITECTONICO.pdf
EL CONCEPTO Y EL PARTIDO ARQUITECTONICO.pdfEL CONCEPTO Y EL PARTIDO ARQUITECTONICO.pdf
EL CONCEPTO Y EL PARTIDO ARQUITECTONICO.pdf
 
ALICORP wdv ebwnskjdhejsklxkcnhbvjdkspdlfkjhdjisokdjchbvfnhjdkslkjdhfeiopweoi...
ALICORP wdv ebwnskjdhejsklxkcnhbvjdkspdlfkjhdjisokdjchbvfnhjdkslkjdhfeiopweoi...ALICORP wdv ebwnskjdhejsklxkcnhbvjdkspdlfkjhdjisokdjchbvfnhjdkslkjdhfeiopweoi...
ALICORP wdv ebwnskjdhejsklxkcnhbvjdkspdlfkjhdjisokdjchbvfnhjdkslkjdhfeiopweoi...
 
Historia de los estilos artísticos docum
Historia de los estilos artísticos documHistoria de los estilos artísticos docum
Historia de los estilos artísticos docum
 
Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura Moderna
Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura ModernaLe Corbusier y Mies van der Rohe: Aportes a la Arquitectura Moderna
Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura Moderna
 
La arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historiaLa arquitectura griega y su legado en la historia
La arquitectura griega y su legado en la historia
 
Gabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimientoGabriela Marcano historia de la arquitectura 2 renacimiento
Gabriela Marcano historia de la arquitectura 2 renacimiento
 
Arquitectura moderna / Nazareth Bermúdez
Arquitectura moderna / Nazareth BermúdezArquitectura moderna / Nazareth Bermúdez
Arquitectura moderna / Nazareth Bermúdez
 
Portafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B HuizingaPortafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B Huizinga
 
Curso Básico de Windows Word y PowerPoint.pdf
Curso Básico de Windows Word y PowerPoint.pdfCurso Básico de Windows Word y PowerPoint.pdf
Curso Básico de Windows Word y PowerPoint.pdf
 
PRESENTACION SOBRE EL PROYECTO DE GRADO .
PRESENTACION SOBRE EL PROYECTO DE GRADO .PRESENTACION SOBRE EL PROYECTO DE GRADO .
PRESENTACION SOBRE EL PROYECTO DE GRADO .
 
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdfQue es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
 
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
 
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
 
Sesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptxSesión 02 Buenas practicas de manufactura.pptx
Sesión 02 Buenas practicas de manufactura.pptx
 
Maquetas-modelos-prototipos-Mapa mental-.pdf
Maquetas-modelos-prototipos-Mapa mental-.pdfMaquetas-modelos-prototipos-Mapa mental-.pdf
Maquetas-modelos-prototipos-Mapa mental-.pdf
 
arquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2darquitectura griega.pdf fghjdchjypiyez2d
arquitectura griega.pdf fghjdchjypiyez2d
 

Tipografía y color

  • 1. Tipografía y color Johnny Alexander Pinzón Velasco
  • 2. Tipografía En general es muy importante una buena estructuración del texto a lo largo de la página, empleando párrafos cortos que faciliten la lectura y poniendo títulos destacados en las distintas secciones del texto. Además, es mejor no apurar mucho los bordes de la pantalla del ordenador: las líneas cortas se leen con mayor facilidad que las largas. Podemos forzar esto situando el texto en una tabla de una sola columna y sin bordes, definiendo que ocupe solo el 85-90 % de la pantalla.
  • 3. Tipos de Fuentes 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.
  • 4. Ajuste del espacio entre letras (kerning) El espacio entre las letras de una misma palabra (kerning) no debería ser siempre fijo. Cuando este espacio se ajusta los textos son más legibles y el aspecto estético es mucho mejor. Respecto al espacio que ocupa cada letra existen dos tipos de fuente: las proporcionales y las no proporcionales. En las proporcionales este espacio depende del carácter, por ejemplo una "i" ocupa menos espacio que una "M". En las fuentes no proporcionales todos los caracteres ocupan el mismo espacio.
  • 5. Color y contraste con el fondo La combinación más adecuada para el 90% de los casos es texto negro sobre fondo blanco. En pocos casos se recomienda utilizar un color de fondo, en cualquier caso para textos largos siempre es más adecuado texto oscuro sobre un fondo claro. Solo es adecuado usar fondo oscuro y texto claro para títulos, cabeceras o celdas, sin embargo el problema es que los fondos oscuros con texto claro son muy empleados en publicidad y ello puede provocar que contenidos no publicitarios sean afectados por la ceguera a los banners y por tanto ignorados por los Usuarios.
  • 6. Negritas Las negritas deben utilizarse solo 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. Las negritas llaman poderosamente la atención dentro de un texto e incluso distraen seriamente, por ello nunca se debe abusar de ellas o emplearlas de modo puramente decorativo. En algunas Webs por ejemplo se suele escribir en negrita el nombre de la empresa siempre que aparece, lo que no aporta absolutamente nada.
  • 7. Tamaños de letra Un tamaño de entre 10 y 12 puntos suele ser el estándar para la mayoría de textos, sin embargo lo realmente importante es que el tamaño de fuente no sea fijo y pueda ser modificado libremente por los usuarios mediante la opción correspondiente del navegador.
  • 8. Color de los textos 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 sitúan. 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.
  • 9. La Teoría del color Define muchos tipos de contraste y, aunque algunos no son especialmente aplicables a páginas web, es muy interesante conocerlos para profundizar en el conocimiento del efecto de los colores.
  • 10. Contraste de Tono Está relacionado directamente con las distancias entre dos colores dentro del Círculo Estándar de Color. Así, cuanta mayor es la distancia entre dos colores dentro del círculo, mayor es el contraste entre ambos.