No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Tipografía

11/23
Recursos

Cuando trabajamos con tipografía para software debemos tener en cuenta las implicaciones que estas pueden generar si trabajamos para dispositivos móviles o los requerimientos técnicos de alguna pantalla en particular. Un buen lugar para encontrar tipografías listas para el desarrollo y diseño de nuestros productos es Google Fonts.

Para definir y clasificar las características y peculiaridades en los elementos de nuestro diseño podemos basarnos las etiquetas de HTML para títulos y encabezados (H1, H2, H3, H4, H5 y H6), párrafos (p) y párrafos más pequeños (small). Podemos definir que los títulos se trabajen en negrita y con tamaños de fuente más grandes, lo importante es que estas reglas se acomoden al sistema de diseño que estamos trabajando.

Aportes 45

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Yo uso esta extensión de Chrome para saber el nombre de las fuentes usadas en cualquier sitio web 😄 WhatFont

Este articulo sobre cómo trabajar las tipografias del blog de Platzi me gusto mucho para reforzar lo que aprendimos en clase:

¡Qué bien me cae el profe!

Cuando trabajamos con tipografía que es adaptada a distintos tipos de dispositivos, debemos tener en cuenta algunos lineamientos técnicos.

Es recomendable obtener las tipografías desde Google Fonts, cumple con todos los requisitos y ademas están pensada para aplicarse a desarrollo.

Nos podemos basar en las etiquetas de HTML (H1, H2, H3, H4, H5, H6 , P, SMALL). No es necesario utilizar todas, solo cuando sea necesario. Es recomendable utilizar 3 tipos de tamaños para los titulos (H1, H2, H3) con eso debemos solucionar los problemas de jerarquias.

Con esto ya podemos hacer una collección, son todas las variantes que puede tener la tipografìa.

Ej: Se puede definir que los H son “Bold”, los H1 son de 20px, H2 son de 17px y el H3 de 15px. El “P” puede ser de 12px y el “SMALL” puede ser de 10px

Teniendo esto claro hace que todo el sistema sea consistente.

Martín Coronel
Diseño UX/UI

Web: http://martincoronel.com/
Facebook: https://www.facebook.com/mcoronel01/
Behance: https://www.behance.net/martincoronel

⚡Pueden ver todas las notas de la clase en este Notion, además le agregué recursos extras, espero les guste.

✔También escribí el siguiente tutorial 8 atajados de teclado para ser un máster en Notion.

De las cosas que más disfruto en mis proyectos web, y en las que más cuidado pongo es en las tipografías…

Tipografías

✨ Concepto clave
Las tipografías nos permiten percibir texto legibles mediante la flexibilidad de estilos a través de su fuente, escala y roles.

.

Fuentes

ℹ️ Definición
Las fuentes son una atributo de un texto que posee diferentes propiedades como tamaño, peso y variantes.

.
Cuando utilizamos fuentes para nuestro producto, debemos tomar como referencia el soporte y acceso a dicha fuente. En uso, debemos tomar en cuenta el soporte para generar alternativas a través del peso y variantes de texto.
.
Sitios donde podemos obtener fuentes:

.

Escalas

ℹ️ Definición
Las escalas son estilos que pueden ser usados a lo largo de la aplicación, asegurando su flexibilidad entre los rangos propuestos.

.
De manera genérica, podemos estructurar un conjunto de escalas en función de la importancia (como large y small) o en función de su uso (como headline y caption).
.
Cada una de las escalas que etiquetemos, debemos pensar en una experiencia tipográfica cohesiva, es decir, que mantenga una relación a lo largo de su estructura.
.
Las categorías y sus variantes, son llamadas tokens. De las cuales, pueden ser acordadas entre equipos para definir una nomenclatura para la definición y estructuración.
.

✨ Concepto clave
La definición y agrupación de escalas pueden tomar como referencia metodologías como BEM y peso mediante numerales, (headline, title-900 , por ejemplo).

.

Roles

Las fuentes se comunica a través de diferencias en el peso y el tamaño de la misma, altura de las líneas y del espaciado entre letras.
.
La escala de tipos actualizada organiza los estilos en cinco roles que se nombran para describir sus propósitos: visualización, titular, título, etiqueta y cuerpo.
.

ℹ️ Definición
Los roles son abstracciones de la fuente aplicando una escala, para obtener variedad sobre los casos de usos.

.
Con los roles, podemos estructurar un tópico de un tema y popular casos de usos mediante diferentes vistas o componentes.
.
Mantener una sistema de roles, nos permite emplear diferentes filosofías de desarrollo (DRY, KISS, etc).

Yo uso este sitio web para generar escalas y jerarquía de la tipografía.

https://type-scale.com/

En este articulo podran encontrar las 13 mejores webs para descargar fuentes:

https://www.genbeta.com/herramientas/las-mejores-13-webs-para-descargar-tipografias-gratis

Les recomiendo una app que se llama WhatTheFont. Es muy sencilla de utilizar, cuando vean una fuente que les gusta en algún lugar ( un landing page, un objeto, lo que sea ) toman la foto y les dice el nombre de la familia de la fuente

Les recomiendo esta Web Ahí pueden ver las fuentes que pueden combinar en su proyecto!

😣 Este tema de establecer cuáles serán los tamaños de la tipografía en sus diferentes usos siempre me genera inseguridad, no tengo claro bajo cuál criterio debería determinar cada tamaño.

Por ejemplo, en este caso vemos que el profe Rulótico seteó los H1 en 50 px. En otros sistemas de diseño he visto tamaños de 30 px aprox. Allí está mi duda, ¿bajo cuáles criterios debo escoger estos tamaños?

Si alguno me sabe ayudar le agradezco mucho

Yo no entendí cual es el “spoiler” de Rulótico, ¿De qué curso habla?

Aplicando una tipografías

Supongamos que deseamos la siguiente visualización:
.

.

Podríamos simbolizar los siguientes elementos:
.

  • ElectronicsHeadline Normal 24px(1.5rem)
    .
  • Shop popular categories:Caption SemiBold 14px(0.875rem)
    .
  • CamerasLabel SemiBold 16px(1rem)

Profe que buena energía, este curso, además de informativo, me ha parecido bastante divertido

IMPORTANTE
Para las tipografías es MUY RECOMENDABLE USAR la medida rem en vez de px, esto es porque de esta manera nuestro texto se transformará a medida cambiamos el tamaño de vista de la ventana, lo que es excelente por temas de accesibilidad

Para saber que tipo de tipografía usa alguna página sin utilizar una extensión pueden usar el inspector de elementos del navegador (F12, o click derecho inspeccionar), les dice que tipografía es, el tamaño de fuente y el color.

Google Fonts es un buen lugar de donde descargar fuentes tipográficas. Ya tiene todo estimado para aplicar el paquete tipográfico para desarrollar en web y mobile.

11. Tipografía

  • Tipografía en software
    • Optima para pantallas
    • Completas en sus variables
    • Si es antigua, buscar versión web
  • Estandarizar los H1-6 (generalmente solo se usa hasta el H3)
  • Estandarizar etiqueta <P>, <small> y <strong>
  • Google Fonts
  • El DS diseña las reglas de todo el diseño

Tipografía

Cuando trabajamos con tipografía para software debemos tener en cuenta las implicaciones que estas pueden generar si trabajamos para dispositivos móviles o los requerimientos técnicos de alguna pantalla en particular. Un buen lugar para encontrar tipografías listas para el desarrollo y diseño de nuestros productos es Google Fonts.
Para definir y clasificar las características y peculiaridades en los elementos de nuestro diseño podemos basarnos las etiquetas de HTML para títulos y encabezados (H1, H2, H3, H4, H5 y H6), párrafos § y párrafos más pequeños (small). Podemos definir que los títulos se trabajen en negrita y con tamaños de fuente más grandes, lo importante es que estas reglas se acomoden al sistema de diseño que estamos trabajando. Un ejemplo es el siguiente:

Es muy interesante realizar o documentarlo todo, a veces yo cometo el error de documentar en el código y sí aveces resulta dificil encontrarlo xD

Esto es lo mismo que en diseño editorial

TIpografía

¿Cuáles son las implicaciones de tener tipografía aplicada a un celular, tablet o monitor?

Tiene que ser optima, no puedes meter cualquier tipografía y no todas tienen la versión para web.

Google fonts para buscar tipografía

Utilizamos H1 hasta el H6 para generar jerarquías

P small para textos

Hay que tener una forma consistente de tamaños y grosos en las tipografías

<h3>Tipografía</h3>

Cuando trabajamos con tipografías deben ser responsive, que se adapten a distintos tipos de pantalla, debe de ser optima, entre más texto tengamos mas simple y practica debe ser la fuente y si tenemos menos texto más expresividad podemos darle.

La tipografía es importante por que le da consistencia a nuestro diseño y el usuario la pueda reconocer que es de nuestra plataforma, es recomendable no usar mas de 2 fuentes.

Es importante generar estas reglas de tipografía para nuestro SD y evitar así problemas futuros de tamaño y familia de nuestras fuentes. Además que ayuda a generar identidad con la consistencia y comunicar de forma clara.

Duda: Yo, utilizo la tipografía de Adobe. Qué pasa con el copyright, cunado deje de pagar Adobe? Me la mantendrá en el sitio? Cómo saber (no eres diseñador), que te ayudará en tu objetivo (personal o comercial)? Sé que en el feedback, me dirán si la estética (tipografía, y sitio), están bien.

La tipografía debe cumplir con los requisitos de ser compatible con diseño y codigo, pero a su vez debe cumplir con nreglas de accesibilidad, es decir ser fácil de leer para personas con diferentes tipos de problemas oculares como daltonismo, discalculia y demás. Todas las fuentes de google fonts ya se encuentran verificadas en accesibilidad
Gracias
ESTE teacher ESTA superGENIAL

La elección de fuentes coherentes y la definición de reglas de estilo para encabezados, párrafos y otros elementos textuales garantizan una experiencia de usuario consistente. Las tipografías también contribuyen a la identidad de la marca, transmitiendo su personalidad y tono. Al mantener la coherencia en la elección y aplicación de fuentes, se facilita la comprensión del contenido y se refuerza la imagen de la marca en el diseño general del producto.

Las tipografías son una decisión delicada, tenemos que prestar atencion a los detalles de cada una, sus variable, estilos, familias, etc

Es bastante importante que la tipografía sea completa, puede que te encuentres algunas que no soporten tildes :p

Yo hice una plantilla en Notion con lo que aprendi en esta clase y la comparto para quien quiera usarla. Enlace: Plantilla Tipografia

Yo utilizo mucho Dafont para descargar fuentes

Este articulo sobre cómo trabajar las tipografias del blog de Platzi me gusto mucho para reforzar lo que aprendimos en clase:

⚓️ Guía para elegir y trabajar con tipografía

Es importante usar tipografías que permitan ser usadas en desarrollo y que además funcionen con el producto.

Las colecciones

Cuando escogemos las fuentes y variantes que usaremos tenemos una colección. Así definimos la jerarquía y uso de las fuentes. Hacer esto permite generar una consistencia que hace reconocible para el usuario que se trata de tu producto.

Configurar y restringir las tipografías para que quede consistente

Con la tipografia lucho cada dia porque no se que poner para mi todas están bien

alguien tiene el material de notion completo, ingreso a traves del enlace y realmente solo tiene información el item de principios, los ortos son meros titulos vacios

Tipografía: Es el arte, el análisis y la técnica del manejo y selección de diferentes caracteres que componen un texto para crear trabajos de impresión, aspecto visual y diseño.

Hay muchos aspectos a considerar de la tipografía cuando desarrollamos software. Google Fonts es el mejor lugar para poder utilizar tipografías, ya que son personalizables y están hechas para el uso en web. Tenemos que definir que tipo de etiquetas de HTML usaremos para el texto y sus jerarquías, al igual que hay que definir que tamaños tendrá cada una de estas. Recuerda que tiene que haber CONSISTENCIA.

9. Tipografía

La tipografía debe ser óptima y debe estar establecida.

Se debe pensar de dónde sacar las typo.

Podemos usar diferentes variables usando como base la clasificación de HTML, como:

h1, h2, h3, p y small.

Nos vemos en el próximo curso XD