homefinance blog
Como el 95% de la información en la web es el lenguaje escrito, un buen diseñador web debe tener una comprensión de la tipografía: la antigua disciplina del modelado de texto para el consumo humano.En esta publicación, discutiremos los elementos esenciales de la tipografía de diseño web.Tipografía de diseño web: terminología de tipografía
Este maravilloso gráfico y publicación de Diseñer Insights on Anatomy of Tipografía ofrece una maravillosa y detallada lista de terminología de tipografía. Como diseñador web, querrá familiarizarse con estos términos tipográficos:
| Una colección de letras, números, puntuación y otros símbolos utilizados para establecer el texto. Un tipo de caracteres comprende una familia de fuentes), mientras que la fuente se refiere al diseño (como se ven). Una fuente es un peso o estilo específico de un personaje familiar, como Garamond Cursal. También se refiere a la categoría general de caracteres que se han diseñado con esta característica. Serif y Sans Serif son las dos clasificaciones más comunes de los tipos. Los tipos de serif tienen una apariencia más tradicional. Categoría general de tipos de caracteres diseñados sin serifs. Los tipos de caracteres sans serif se han vuelto populares a fines del siglo XIX y se consideran más modernos. Completamente de personajes que constituyen un tipo de caracteres; Puede llevar la forma de una carta, número, un signo de puntuación, etc. a la línea base). La gerencia se refiere al espacio entre las líneas de tipo en un texto de texto y juega un papel importante para garantizar la legibilidad. Caracteres consecutivos. Kerning se refiere al cambio de espacio entre caracteres individuales en una palabra. Del texto (oración, línea, párrafo, página, etc.). Como una opción adicional con un archivo de fuente. Esto incluye todas las letras especiales, números y caracteres disponibles. Expresado como fácil, audaz, extrabold, etc. |
también, mayúsculas, mayúsculas, mayúsculas, mayúsculas, mayúsculas, mayúsculas) y minúsculas (minúsculas, letras más bajas).> Cursivo | una versión inclinada de un tipo de caracteres (inclinado de izquierda a derecha); Una verdadera cursiva está diseñada de forma única, más que una versión inclinada del tipo vertical (novela “). En la que se encuentran la mayoría de las letras y otros caracteres. Font – ¿Hay alguna diferencia? Los dos primeros términos en el gráfico anterior a menudo se usan intercambiablemente en el diseño moderno. En los tiempos de la impresión, las fuentes y los tipos de caracteres eran dos cosas diferentes: la fuente era el diseño específico de las letras, mientras que la fuente se refería al tamaño o estilo particular del tipo respectivo. Un tipo de caracteres es un diseño tipográfico , Helvetica y Times New Roman Una fuente es una variación específica de un tipo de caracteres como Arial Bold en 12 puntos. Puede pensar en un tipo de caracteres como una carpeta llena de fuentes que descarga desde un sitio de fuentes, y las fuentes como los archivos individuales en esa carpeta Hoy en día, los términos generalmente son intercambiables y solo la verdadera cuidado de la tipografía está preocupado por la distinción. 2. Tipografía web en la naturaleza Si no ha estudiado el diseño gráfico tradicional, es una buena idea familiarizarse con la implementación de la tipografía en el mundo real. La tipografía impresa puede continuar inspirando la impresión web, por lo que estudia carteles, revistas, portadas de libros, paneles publicitarios y anuncios. Vea libros de su biblioteca local sobre el diseño de diseño. En cuanto a la tipografía en el diseño web, hay muchos ejemplos de diseños tipográficos buenos y muy malos. Ejemplos de buena tipografía: Los mejores ejemplos de tipografía en diseño web Los 50 mejores ejemplos de sitios web que utilizan sitios web Printing17 con diseño de impresión 20 sitios web con tipografía brillante Ejemplos de malos tipografía (Prepare los ojos) Pennyjuice.com lingscars.com http://art.yale.edu/ monkzone.com/ 3. Elegir las fuentes correctas para su diseño web cuando se trata de elegir fuentes para un nuevo diseño web Proyecto, es útil familiarizarse con los tipos básicos de fuentes. Alguacil Ejemplos: Times New Roman, Garamond, Bodoni Una personalidad más formal y tradicional. Las letras seriff son más fáciles de leer en formato impreso o tamaño más grande en la pantalla. Los siervos pueden ser difíciles de leer en la pantalla con fuentes más pequeñas Sans serif Ejemplos: Helvetica, Verdana, Tahoma, Open Sans Una personalidad más moderna y amigable. Las fuentes sans serif son más fáciles de leer en la pantalla en dimensiones más pequeñas. Pronunciado “sahns” como lazos, no como tropas. Monitor Ejemplos: langosta, bauhaus, rescate Proyectos no tradicionales que se utilizan para el impacto Bueno para títulos y títulos en algunos casos Nunca debe usarse como texto del cuerpo Escritura Ejemplos: guión de pincel, sans cómico, guión francés Simular letras escritas a mano Al igual que las fuentes de exhibición, bueno para valores y títulos, pero no texto más pequeño Evite usar fuentes de escritura a mano en mayúsculas Monos Ejemplos: mensajería, código fuente, profesional Todas las letras tienen el mismo ancho Presentar un tono serio que pueda ser efectivo en algunos casos Altura x: una característica importante de la fuente La altura x es la altura “x” en comparación con la altura de una tapa de fuente En general, una altura más alta da como resultado una fuente más legible, especialmente para un tamaño de fuente más pequeño; Sin embargo, este no es siempre el caso. Google Font para la tipografía de diseño web Google Fonts es un recurso gratuito fuerte para los diseñadores Use la función de clasificación para descubrir qué fuentes son populares y en las tendencias. Estas fuentes se usan por una razón. Sugerencia: descargue las fuentes locales de Google y comience a usarlas en documentos impresos para acostumbrarse a su apariencia y operación juntos Otra sugerencia: cuantos más estilos ofrezca su fuente, más opciones para la tipografía creativa. Otra sugerencia: recuerde la dimensión de la descarga al incorporar fuentes en CSS. Use solo las fuentes que necesita. ¡No te vuelvas loco! Font Mate hay una regla general para la asociación de fuentes: Elija una fuente para títulos y títulos para establecer la personalidad. Elija una segunda fuente para el texto del cuerpo, que creará estabilidad. Combine las fuentes de la misma familia. Sugerencia: para aquellos que tienen desafíos de diseño, las fuentes de la misma familia están diseñadas para trabajar maravillosamente juntas. Puedes usar estas preocupaciones sin preocupación … Roboto y Roboto débil Abre sans y abre sans condensado Droide serif y droide sans Source Serif Pro y Source Sans Pro Algunos ejemplos de combinaciones de fuentes + recursos fontpair.co/ Las mejores 5 combinaciones de fuentes de desarrollo de Google Sugerencia: Hay muchos, muchos, muchos recursos como estos que sugieren una excelente pareja de fuentes. ¡Google es tu amigo! 4. El CSS de la tipografía de diseño web, de acuerdo con esta excelente guía, aprende a codificar HTML y CSS: HTML, o lenguaje de marcado de hipertexto, ofrece la estructura y la importancia del contenido que define ese contenido como, por ejemplo, títulos, párrafos o párrafos o imágenes. CSS o hojas de estilo en cascada es un lenguaje de presentación creado para enfatizar la apariencia del contenido, usando, por ejemplo, fuentes o colores. Como diseñador web, querrá familiarizarse con el uso de CSS para aplicar estilos tipográficos. Aquí hay algunos consejos de CSS: Familia de fuentes Ejemplo: P {Font-Family: “Times New Roman”, Georgia, serif;} Hay dos tipos de apellidos de fuentes: Apellidos: el nombre de una familia de fuentes, como “tiempos”, “mensajería”, “arial”, etc. Familia genérica: el nombre de una familia genérica, como “serif”, “sans-series”, “cursiva”, “monosfacial”. Comience con la fuente específica y siempre termine con una familia genérica si la fuente específica no está disponible. Separe cada valor con una coma. Más información sobre la propiedad familiar de fuentes CSS Sugerencia: es una buena práctica incluir su fuente favorita, seguida de una familia común y luego regresar al Serif o Sans Serif. Ejemplos de tamaño de fuente: H1 {font-size: x-large;} h1 {font-size: 250%;} h1 {font-size: 2.5em;} h1 {font-size: 2.5rem;} h1 {font-size: 32px;};} Valor: Tamaños: XX-Mic, X-IMic, pequeño, mediano, grande, X-Large, XX-Mare Porcentaje: Establezca el tamaño de la fuente en el uno por ciento del artículo principal Longitud: Establezca el tamaño de la fuente en un tamaño fijo en CM, PX, EM, REM  Heredar: use el tamaño de la fuente principal Más información: propiedad del tamaño CSS Píxeles vs EMS vs REMS Pixel, EMS y REMS son todas unidades de medida para definir el tamaño de un elemento en una página web. Los píxeles son una medida absoluta de longitud. Los EMS son relativos al tamaño de la fuente del elemento principal. El tamaño de fuente predeterminado es 16 PX Un DU tiene un tamaño de 1.5em, las fuentes aparecerán a 24 PX. Un H1 de DI tiene un tamaño de 2EM, aparece a 48px. Los REMS son relativos al tamaño de la fuente de elementos HTML El tamaño de fuente predeterminado es 16 PX Un DU tiene un tamaño de 1.5em, las fuentes aparecerán a 24 PX. Un H1 de DI tiene una dimensión de 2 REM, aparece a 32 PX, porque H1 es relativo a la dimensión de fuente predeterminada e ignora las dimensiones aplicadas a los elementos del contenedor. Sugerencia: en estos días de problemas de diseño y accesibilidad, es mejor diseñar con EMS y REMS y no con píxeles. Otra sugerencia: dependiendo de la altura x del tipo de carácter elegido, recomendamos ajustar el tamaño de la fuente en el selector del cuerpo o HTML. Lato, por ejemplo, es una fuente excelente, pero puede ser difícil de leer en el estándar 16px = 1em para el texto del cuerpo. Ejemplos de grosor de fuente: P {font-weight: normal;} h1 {font-weight: bold;} h1 {font-weight: 900;} valores: Normal: peso de fuente estándar (predeterminado) Aygo: personajes gruesos Más audaz: personajes más gruesos Más ligero: personajes más ligeros Valor numérico: Establezca el peso de la fuente exactamente de 100 a 900 Muchas fuentes de Google proporcionan pesos precisos que se pueden usar El peso 300 es “fácil” El peso 400 es “normal” El peso de 600-700 es “audaz” El peso 900 es “negro” Heredar: use el peso de la fuente del artículo anterior Más información: CSS Font-Weight PropertySugestie: use valores de peso de fuente numérica siempre que sea posible, en lugar de “en negrita”. Esto le dará más control sobre el peso de la fuente. Ejemplos de estilo de fuente: P.Normal {Font-Style: Normal} P.Italic {Font-Style: Cursalic} P.Oblique {Font-Style: Oblique} Valor: Normal: use la versión de fuente estándar (predeterminada) Cursivo: use la versión cursiva de la fuente Oblic: usa la versión oblicua de la fuente Heredar: use el estilo de fuente del elemento principal Más información: propiedad de estilo CSS Sugerencia: Oblic es una versión angular de la fuente normal. Por lo general, es bastante feo. La cursiva es una fuente completamente diferente. Otra sugerencia: en muchos casos, Google Fonts mostrará automáticamente la versión cursiva cuando se establece en el oblicuo. Pero algunos no lo harán. La altura de la línea Similar a conducir en tipografía Sugerencia: El liderazgo se pronuncia como plomo. Ejemplos: P {Line-Tin: 1.5em;} P {Altura de línea: 150%;} P {Line-Tin: 2;} Valor: Normal: (predeterminado) La altura de la línea normal basada en el tamaño de la fuente Número: un número que se multiplicará por la altura normal Longitud: una altura fija en PX, para, CM, EM, etc. Porcentaje: La altura de la línea como porcentaje del tamaño de fuente. Heredia: use la altura de la línea de elementos actuales. Más información: propiedad CSS para altura de línea Sugerencia: dependiendo de la fuente, el aumento en la altura de la línea a aproximadamente 1.75 puede mejorar drásticamente la legibilidad del texto del cuerpo. El espacio entre letras Similar al crecimiento y la búsqueda de la impresión Ejemplos: H1 {Little Spacing: 1 PX;} H2 {Little Spacing: -1px;} Valores Normal: (predeterminado) No hay espacio adicional entre los caracteres. Longitud: haga un ajuste de espacio entre los caracteres (se permiten valores negativos) Heredia: use el valor de espaciar las letras del elemento principal. Propiedad de espaciado de letras CSS Sugerencia: aumentar o disminuir el espacio solo en 1 PX puede producir una tipografía visiblemente distinta. Otra sugerencia: el espacio más alto de las letras 2-3 PX puede hacer que los botones y encabezados se destaquen realmente. Transformación de texto Ejemplos: H1 {text-transform: upperCase;} h2 {text-transform: capitalize;} p {text-transform: minizcase;} Valor: Ninguno: el texto se muestra como es normalmente Calcule: haga que la primera letra de cada palabra sea mayúscula Mayúscula: hace que todos los personajes superen Minúsculas: hace que todos los personajes fueran pequeños Heredar: utiliza el valor de transformación del texto del elemento principal CSS transforma la propiedad CSS Sugerencia: trate de combinar fuentes con mayúsculas con letras altas en los botones y encabezados para una distinción tipográfica interesante 5. Los errores más comunes en la tipografía web 1. Uso de la fuente incorrecta Las fuentes son como los humanos: tienen diferentes personalidades que a veces pueden chocar Muchas fuentes son sobrevenditas y deben evitarse, como cómic sans y papiro Muchas fuentes son súper utilizadas y aún son útiles por una razón: Helvetic, Tahoma y Verdana 2. Usando el tamaño incorrecto Pequeñas fuentes en una página web hacen que sea difícil de leer para los ojos más antiguos. Un año de 40 años funciona el doble de difícil de leer como un viernes de 20 años. Un año de 60 años tiene que funcionar cuatro veces más. Sugastia: cuanto más difícil sea su texto, menos se lee y menos de lo que se lee realmente se entiende. 3. Usando el espacio incorrecto Cuando se trata de tipografía, el espacio en blanco es tu amigo. Los principiantes tienen miedo al espacio en blanco. Quieren llenar cada vacío con algo. Aprender el modo de espacio en blanco efectivo es una poderosa herramienta de diseño. Siga el seminario web: los elementos esenciales de la tipografía web Esta publicación se basa en el seminario web de tipografía por Nathan Ingram. En este seminario web, Nathan pasa a través de los elementos básicos de los diseñadores de impresión. Obtenga más información sobre la terminología web en el nuevo libro electrónico: 65 Condiciones de diseño web que debe saber Descargar ahora Kristen Wright Kristen escribió tutoriales para ayudar a los usuarios de WordPress en 2011. Por lo general, puede encontrarlo trabajando en nuevos artículos para IThems Blog o desarrollar recursos para #WpProsper. Fuera del trabajo, Kristen disfruta del diario (¡escribió dos libros!), Senderismo y acampar, cocinar y aventuras diarias con su familia, con la esperanza de llevar una vida más presente.  
Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.
Tags Tipografía de diseño web: 5 cosas que necesita saber Check AlsoBiblioteca Divi: explorarea posibilităților de sincronizare selectivă a bibliotecii DiviBiblioteca Divi: explorarea posibilităților de sincronizare selectivă a bibliotecii Divi |