Tipografía en la web. ¿Cómo se ve el diseño de impresión?

Uno de los problemas de diseño más comunes es el .

En este artículo, cubriremos algunos principios de una buena tipografía y le daremos consejos sobre cómo evitar muchos errores comunes.

El artículo no es un libro sobre tipografía o el arte de la tipografía, es más bien " consejos rápidos para mejorar la base tipográfica del diseño."

Regla 1: cuantas menos fuentes, mejor.

Uno de los mayores errores que cometen los diseñadores es usar demasiado gran cantidad fuentes y/o sus estilos. Intenta reducirlos a dos o tres. Es decir, el texto principal debe tener la misma fuente y tamaño.

Elija uno para los títulos y quédese con él, tal vez otro para los subtítulos como último recurso. No te asustes si las fuentes son muy diferentes entre sí. Cuando se usan dos muy fuentes similares En diseño, el lector puede pensar que simplemente cometió un error y seleccionó accidentalmente la fuente incorrecta al escribir.

Cuida la unidad de color, densidad, etc. o su texto parecerá como si moscas borrachas se hubieran esparcido por toda la página.

Regla 2. Mira la descarga.

Tenga cuidado de no abarrotar demasiado las letras. Si tiene problemas porque no hay suficiente espacio para el texto, es mejor reducir la fuente. Sí, esto probablemente añadirá espacio entre párrafos, pero no tiene nada de malo, dará un respiro a la hora de leer.

Regla 3: alineación correcta

No centres todo (a menos que sea un movimiento de diseño especial). Considere usar una cuadrícula. Después de todo, todo lo que hay en la página está interconectado. Utiliza guías y coloca objetos según ellas. No arrojes objetos en las esquinas de la página como si no pudieras decidir dónde colocarlos.

Regla 4. Menos fuentes decorativas

¿Tienes hermosas fuentes decorativas? ¡Asombroso! Pero esto no significa en absoluto que deba utilizarse para el texto de los párrafos. Las fuentes decorativas suelen tener una historia detrás o se utilizan en un caso específico, por ejemplo, para un encabezado o título. A menudo, cuanto más simple, mejor, razón por la cual fuentes como Helvetica son tan populares.

Regla 5: El tamaño importa

Se trata del tamaño de las letras del texto;). Los títulos son buenos cuando están en negrita y con fuente grande, pero si también usas letras demasiado grandes en el cuerpo del texto, lo abaratará. Piénsalo. Vas a un buen restaurante y muchas veces sucede que el menú está escrito letra pequeña, se ve genial. (Solo asegúrese de que la fuente no sea tan pequeña que sea difícil de leer). No tengas miedo de hacer que tus títulos sean mucho más grandes que el cuerpo del texto.

Regla 6. Mantenlo legible

Todo lo que haces está hecho para que pueda ser leído. Texto oscuro encendido fondo oscuro- Esta no es una muy buena idea. Peor aún, colocar texto pequeño encima de una foto de alto contraste. Recuerde evitar colocar texto sobre cualquier cosa.

Regla 7. Elige los colores correctos

¿Qué color es mejor para la fuente? Como regla general, lo creas o no, el blanco o el negro suele ser mejor. Si utiliza un color que no sea diferentes tonos de gris, reduzca la saturación. Las fuentes de colores brillantes pueden resultar difíciles de leer. Tenga cuidado con las combinaciones de vibración complejas, como el rojo sobre el verde.

Regla 8. Agrupación adecuada

Es mejor combinar la información relacionada. Esto hará que el diseño sea más claro. Por ejemplo: mira el cartel de una película, todos los datos están agrupados en bloques atractivos. Ahora pueden considerarse como elemento separado diseño. Ejemplos de mala agrupación: abra las páginas amarillas.

Regla 9. Liderazgo suficiente

Esta es la distancia entre líneas de texto. Es muy importante elegir este intervalo correctamente. Es mucho más agradable de leer cuando hay espacio para descansar la vista entre líneas. Como regla general, intente utilizar un interlineado que sea al menos 2 puntos más grande que el tamaño de fuente. Por ejemplo: para una máxima legibilidad en 10 puntos, la fuente debe configurarse en al menos 12 puntos.

Regla 10: cuidado con el kerning

Kerning es el espacio entre caracteres individuales de una palabra. Aquí es importante tener experiencia en identificar un kerning incorrecto, ya que muchas veces programas como Photoshop, cometen errores en su colocación. Será necesario ajustarlo manualmente, pero lo principal es no exagerar. Si no te gusta distancia entre caracteres, pero no sabes cómo mejorarlo, elige una fuente diferente.

Intente aplicar estas reglas cuando trabaje con fuentes. Los bloques tipográficos bien diseñados deberían verse bien sin imágenes. EN mejor escenario, su trabajo tipográfico refuerza la impresión positiva del diseño. Debe ser atractivo y fácil de leer.

Nosotros, como diseñadores, no sólo debemos comprender y captar el significado del texto, sino que debemos verlo. Es decir, reconocer en qué tipo de letra se escribió el texto y qué estilo se utilizó. Para elegir las fuentes adecuadas para sitios web o aplicaciones moviles Necesitas entender la tipografía al menos. nivel de entrada. En este artículo, explicaré los principios y conceptos básicos de la tipografía, lo que ayudará a un diseñador web novato si es la primera vez que escucha sobre el concepto de tipografía.

Comencemos con ejemplos de tipografía.

La tipografía es el uso de las fuentes adecuadas no sólo en el diseño de libros y revistas, sino también en sitios web o aplicaciones para dispositivos móviles.

No hay necesidad de hacer eso

A menudo puedes encontrar este tipo de tipografía en anuncios en postes o en el metro.
Para comprender la diferencia entre el primer ejemplo y el segundo, es necesario conocer los principios y definiciones básicos, es necesario comprender y sentir las fuentes. La teoría es importante si desea iniciarse de forma rápida y eficaz en el nicho del diseño web.

Intenta leer este texto en 20 segundos.

Hay un error en cada palabra de este texto. Como somos personas alfabetizadas, estamos acostumbrados a ver lo que queremos ver. Podemos leer fácilmente incluso un texto así, sin leer los símbolos, y comprenderlo. Esto es normal, la mayoría de las personas alfabetizadas hacen esto, es decir, no notan errores tipográficos porque quieren ver lo que está escrito aquí (comprender el significado del texto) y no ver el abra-kadabra. Por lo tanto, cuando las fuentes se eligen correctamente, no le resultará difícil leer incluso el texto con un gran número errores tipográficos.

Tipografía

La definición de tipografía es el diseño de texto utilizando herramientas de escritura y diseño. El concepto de “tipografía” proviene de la imprenta.
En la imagen, la letra es un bloque de metal sobre el que se imprimen elementos espaciales que hacen una huella en el papel y se obtiene la letra correspondiente. Por tanto, en la definición de “tipografía” existen palabras como “composición” y “maquetación” que provienen de la imprenta;

Definiciones básicas en tipografía

Ejemplo de caligrafía

Caligrafía- el arte de la bella escritura. Tome un bolígrafo ancho, un pincel o una regla y utilice estas herramientas para crear dichos trabajos.

Creación de tipografías decorativas. Por lo general, se dibuja un boceto en un bloc de notas, luego se transfiere a Illustrator, la fuente se delinea mediante curvas de Bézier y luego se obtiene una inscripción ordenada.

Letras para el logo.

Diferencia entre caligrafía y lettering. La caligrafía es cuando tomas un bolígrafo, marcador o lo que sea y dibujas en cualquier lugar. Letras: cuando dibujes un boceto, transfiérelo a un editor gráfico, trázalo y obtén hermosas letras, que se puede utilizar en un logotipo o en cualquier otro lugar.

Reglas básicas de tipografía.

Minúsculas y letras mayúsculas fuente

Letras minúsculas- Se aceptan letras para mecanografía continua.
Mayúsculas(mayúsculas, popularmente “grandes”) se utilizan letras para los caracteres en mayúsculas; una oración o nombre propio comienza con ellas.

Guión y guión
Una característica importante que los principiantes pasan por alto. Guión y guión - diferentes signos, es importante saber esto.
Guión- un guión corto para separar palabras y guiones. Nada supera las palabras. NO se colocan espacios antes ni después.
en guión se utiliza para indicar rangos numéricos, normalmente tampoco separados por espacios.
Em guión- Este es un signo de puntuación, usado en oraciones y separado por espacios.
Guión, guión y em guión difieren en la longitud del signo en sí. También hay un signo menos, es el más corto de todos. He aquí una pequeña pista. Guarde la imagen para recordar qué es qué.


Para escribir un guión em en una PC, mantenga presionado tecla alternativa y en adicional teclado numérico(tienes un bloque a la derecha) marca 0151, obtendrás un guión. En guión: alt + 0150.
Si olvida la combinación, escriba "em dash" en un motor de búsqueda, busque el artículo de Wikipedia y copie el guión desde allí.

Citas
Es importante recordar que en Rusia se acostumbra utilizar citas de árboles de navidad"". Para escribirlos, use alt + 0187. Algunas personas usan el signo de doble minuto “ entre comillas, pero es mejor usar comillas“ ”: alt + 0147.
Combinación Teclas de cambio+ 2 en la distribución del teclado cirílico muestra el familiar "signo" en la pantalla. No denota comillas en absoluto (como comúnmente se cree), sino segundos: 68° 13′ 22″ o pulgadas: un monitor de 17″ de diagonal.
Se deberá utilizar un patrón de cita única por publicación, excepto en “casos de ‘cita dentro de cita’”.

Fuentes

Hemos resuelto los signos, ahora sobre el concepto de fuente. Aquí solo daré definiciones básicas de cómo usar las fuentes correctamente, lea más.
Fuente- un conjunto de letras destinadas a mecanografiar. Una letra es de lo que hablé arriba, un bloque de metal con una letra. En términos generales, una fuente es un conjunto de letras metálicas diseñadas para texto.

Auriculares- un conjunto de fuentes que tienen estilo uniforme y diseño. Naturalmente, deberían tener un estilo similar. Por ejemplo, el tipo de letra PT Sans consta de diferentes estilos de fuente: negrita, cursiva y otros. Todos los estilos juntos nos dan el tipo de letra PT Sans.

Estilos de fuente es un tipo de fuente gráfico dentro del mismo tipo de letra. Por ejemplo, PT Sans tiene estilos finos, atrevidos, atrevidos y otros. Normalmente en Photoshop está escrito en inglés.

- la distancia entre las líneas de base de líneas adyacentes.

Alineación (alineación en la vida)- el método de posicionar una línea mecanografiada incompleta en relación con los límites verticales de la barra de marcación. Probablemente hayas visto botones como este en MS Word (buscar imagen, alinear). Se llama interruptor, porque cuando era necesario disponer correctamente las letras metálicas, se colocaban en ellas bloques espaciales de metal para apagarlas. Por eso se llama "apagar".

Alineación o justificación del texto

Kerning y seguimiento
Interletraje- cambio selectivo en el espaciado entre letras en función de su forma. Cuando se alinean varios caracteres (diferentes). Visualmente, algunas combinaciones de letras son muy parecidas; si hubiera la misma distancia entre todos los caracteres, visualmente se vería diferente. Por eso, a la hora de crear fuentes, se utilizan tablas en las que se escribe estrictamente la combinación de letras y la distancia entre ellas. EN buenos auriculares Esto ya está especificado de forma predeterminada, pero se puede ajustar en editor gráfico, que utiliza (por ejemplo, Photoshop).

Seguimiento- la distancia entre caracteres en una palabra u oración.
Tiene sentido utilizar el seguimiento, si utiliza letras mayúsculas, tiene sentido realizar un seguimiento para que la distancia entre ellas sea mayor, sean más fáciles y mejor leídas.

Si utiliza Photoshop para crear el diseño de un sitio web, le aconsejo que configure el kerning en "automático" y no realice ningún seguimiento. A veces, para que las fuentes resultado final parecía igual que en el diseño, debes hablar con el diseñador de diseño.

Antigüedad- fuentes serif. Las serifas son franjas horizontales en la parte superior e inferior de las letras. Provienen de fuentes antiguas que se remontan a la época de la escritura en piedra. Es más fácil leer serifas en libros; lineas horizontales, que parecen respaldar la fuente en la línea de base y nos facilitan mover la vista para leer oraciones.
La fuente grotesca, o sans-serif, apareció recientemente, en relación con la llamada revolución tipográfica, cuando las serifas ya no eran necesarias. Grotesco se usa a menudo en fuentes web y elementos de pantalla (en teléfonos, por ejemplo). Es más simple debido a la falta de serifas, es bueno usarlo para la composición tipográfica continua en Internet. Puedes utilizar cualquier opción en los proyectos; no existe una opción correcta o incorrecta. Debes observar la situación, qué tipo de proyecto estás haciendo y qué es más relevante para él.
Esto completa el curso de introducción a la tipografía para un diseñador web :)
Si recuerda solo Antiqua y Grotesque, ya estará por delante de muchos diseñadores en términos de conocimiento. No te quedes quieto, estudia la tipografía, es interesante y te ayudará a crear proyectos geniales y prolijos.
Escribe en los comentarios qué novedades aprendiste de este artículo.

Crear un logotipo es más que crear una identidad visual para la marca de una empresa. Y esto está muy lejos del nombre de la empresa ubicado en un rectángulo. Los emprendedores y diseñadores inteligentes nunca separan el aspecto visual de la estrategia empresarial. Un logotipo es a menudo la primera impresión de una empresa, y esto en sí mismo puede influir en la percepción que el cliente tiene de la marca.

Un logotipo bien diseñado es una combinación única de negocio y arte que es extremadamente difícil de lograr. La tipografía en los logotipos, si se usa sabiamente, puede lograr el equilibrio deseado entre ambos. Los logotipos tipográficos parecen ser los más simples y los menos creativos. Sin embargo, esto no es cierto. Profesional y enfoques creativos puede hacer que su marca no sólo sea memorable, sino también confiable y amada. Este artículo está dirigido a quienes buscan ideas e inspiración para crear logotipos de texto.

No es una buena idea empezar a diseñar antes de sumergirse en la naturaleza del negocio. ¿Qué mensaje estás tratando de transmitir? ¿La marca está orientada a la acción o está más enfocada a desencadenar emociones? ¿Qué hará que los clientes recurran nuevamente a su servicio? Una vez que comprenda su marca lo suficiente, podrá entregar mensaje correcto a través de su logotipo.

En segundo lugar, el logotipo tipográfico influirá en el nombre de su empresa. Así que asegúrese de que el nombre sea lo suficientemente claro como para no confundir a los clientes potenciales.

Conozca a su audiencia

El siguiente paso es conocer a tu audiencia. Comer gran diferencia sobre lo que esperas de la marca y lo que espera tu audiencia. Piense en las respuestas a estas preguntas:

1. ¿Quiénes son? Su edad, género y nacionalidad son tan importantes como conocer las profesiones, aficiones e intereses de sus clientes.
2. ¿Dónde verán tu logo? Este podría ser un sitio web. pancarta publicitaria, cartelera o la camiseta de un vecino. Intenta considerar cualquier situación.
3. ¿Entienden su mensaje? Intente pensar en todas las asociaciones que les podrían venir a la mente cuando vean su logotipo. Buena idea— encuestar a representantes de la audiencia potencial.

Asegúrate de conocer los conceptos básicos visuales.

Según su investigación y su profundo conocimiento de su marca, tendrá que tomar varias decisiones relacionadas con su logotipo.

En primer lugar, prepárate para hablar sobre fuentes. Hay miles de fuentes disponibles hoy en día, lo que hace aún más difícil para los diseñadores elegir. Todas las fuentes básicas se pueden dividir en varios tipos y cada una de ellas puede tener su propio tono emocional:

• Serif (serif): respetable, tradicional, confiable, calmante;
• Sans Serif (sans serif): moderno, objetivo, limpio;
• Tipo de escritura (imita la escritura a mano): elegante, creativa, cariñosa;
• Decorativo: expresivo, único.

Puedes ver que cada fuente tiene su propio estado de ánimo y personalidad que transmite a tu marca. Puede ser serio, descuidado, juguetón o sofisticado. Debes determinar qué quieres decir exactamente usando la fuente y si coincide con tu diseño. Elija una fuente que no se base en preferencias personales, pero tenga en cuenta el espíritu y las características de su negocio.

También juega papel importante. Cada color tiene su propia connotación y puede añadir algún matiz a tu mensaje. Así que no envíes el mensaje equivocado a tus clientes.

A continuación se ofrecen algunos consejos que le ayudarán a elegir fuente correcta y color para su logo:

• Revisa a tus competidores. Tu objetivo no es imitar, sino analizar cuidadosamente. Si su decisión es razonable, puedes aprender de la experiencia.
• Mantenlo simple. Una fuente limpia permitirá que su logotipo se reproduzca en una variedad de productos y en todos los tamaños, ya sea una pancarta grande o un bolígrafo.
• Garantizar la legibilidad. Su logotipo debería ser legible en segundos.

Haz que tu logo sea versátil

• El diseño de logotipos se realiza mejor en aplicaciones vectoriales como Ilustrador Adobe. Photoshop no mejor elección para ello porque el logo necesita ser escalable sin perder calidad.
• Especifique los colores de su logotipo usando CMYK o Pantone para asegurarse de que los colores se reproduzcan correctamente una vez que se imprima su logotipo.
• Debería poder reproducir su logotipo en un color (blanco o negro) para imprimir.

Tener cuidado errores comunes diseño

• Usar demasiadas fuentes y colores. Principales empresas, como regla general, use una fuente y un color. Cómo más fuentes usado, más sucio se ve el logo. Es aceptable utilizar dos fuentes siempre que sean diferentes para el nombre y el eslogan de la empresa.
• Uso fuentes de moda. La mayoría de las tendencias no duran mucho: lo que es popular hoy puede quedar obsoleto y divertido mañana.

Copiando a otros. La imitación es manera perezosa resolver un problema creativo. Un logotipo es un reflejo de su negocio: si se parece al de otra persona, su negocio no puede ser único y pierde credibilidad ante los ojos de los clientes.

Ejemplos de tipografía en diseño de logotipos

Comer ciertos tipos Logotipos que debes conocer antes de comenzar a diseñar tu propio logotipo y asegurarte de que el tipo que elijas se adapte a las necesidades de tu negocio:

Logotipos escritos y de texto.

Hay muchos en todo el mundo. empresas famosas, que se basan únicamente en logotipos tipográficos. Éstos son sólo algunos ejemplos para sentir el poder de los logotipos de texto. Por supuesto, IBM, CNN, Google, Facebook, etc. son los representantes más destacados del diseño de folletos de logotipos.

Logotipos gráficos

Apple, Nike, Shell y muchas otras empresas tienen logotipos gráficos.