Selección y Uso de Tipografías en Diseño Web

TIPOGRAFÍAS.
Otra de las cosas esenciales en una aplicación es el tipo de letra.
Tips para el uso eficiente de tipografías:
• No uses demasiados tipos de letras.
• Usa fuentes estándar.
• Limita la cantidad de texto. No son libros. Mucho texto echa a los usuarios de la página.
• Selecciona tipos de textos legibles en diferentes tamaños.
• Mantén las líneas separadas unas de otras. Los altos de línea que sean adecuados.
• Que tengan suficiente contraste el texto con el fondo.
• Evitar las animaciones intermitentes en los textos.
Reglas de combinación de tipografía:
Las fuentes tienen personalidad.
• Serif: tradicional, sofisticada, confiable, práctica, formal… Se puede combinar con Sans Serif, scripts, display… y se suele usar en logos, textos de párrafos, títulos, impresos.
• Sans Serif: Moderna, limpia, humanista, geométrica, universal. Se combina con serif, script y slab serif. Sus usos son: logos, textos de párrafos, títulos y textos pequeños.
• Script o fuente cursiva: Elegante, clásica, formal, sofisticada y estilizada. Combina con serif y sans serif. Se usa en logos, títulos e invitaciones. También textos cortos que queramos destacar.

PARA TODOS LOS QUE LLEVAMOS LA RUTA DE FUNDAMENTOS DE PROGRAMACIÓN: El curso es muy bueno pero está mal ubicado. No porque esté en la ruta equivocada (fundamentos de programación) sino porque antes necesitaríamos algunos cursos más para aprender a usar Github, React, CSS y SCSS. Porque en los cursos anteriores no explican casi nada de CSS (sólo lo teórico). Yo no pude ni abrir el proyecto en Github 😦 Lo que voy a hacer (y se los recomiendo) es ver todas las clases y entender la teoría lo más que podamos, pasar el examen y seguir avanzando, que lo más probable es que las dudas se nos despejen en los próximos cursos.

Si alguno no conoce el código que esta utilizando la profesora (Dado que no es CSS común y corriente) es un preprocesador llamado Sass: https://platzi.com/cursos/sass/

Comparto este vídeo que habla del tema de las tipografías: https://www.youtube.com/watch?v=z52S4uDV1bU (Recomendado que se suscriban si les gusta el diseño)

Mis notas

Dejo mis apuntes, espero les sirva 😃

Font Pair es una página que sugiere combinaciones de tipografías, en pares.

Por proyecto máximo se debe tener 2 tipografías. Yo generalmente uso Roboto es una buena opción la letra es muy legible aun que sea pequeña.

Tipografiá :
- Número mínimo de fuentes
- Fuente estándar
- Limitar cantidad de texto
- Legibles en diferentes tamaños
- Altos de línea espaciados
- Contraste
- Evitar usar animaciones intermitentes

Herramienta: https://fonts.google.com/

OJO: Tamaños de fuentes en “px” no se recomienda. Mejor usen “rem” que es una medida relativa de tamaño.

TIPOGRAFÍAS

Recién me doy cuenta que el proyecto está hecho en React y SASS! QUe emoción!

Enlace correcto:
https://github.com/mssroboto/diseno-para-programadores/blob/master/4-app/src/scss/variables/typography.scss

Para tener una buena accesibilidad en nuestros proyectos web no hay que usar medidas absolutas (como px) para los tamaños de las fuentes, se recomienda siempre usar medidas relativas (como em o rem)

El tip de limitar la cantidad de texto no tiene sentido si estás construyendo un blog.

Técnica de imprimir textos o dibujos, a partir de tipos o moldes en relieve que, entintados, se aplican sobre el papel.
Wikipedia

1. Mantener el número de fuentes al mínimo
2. Tratar de usar fuentes estándar (por ejemplo google fonts, o las que traen las computadoras por defecto)
3. Limitar la cantidad de texto
4. Elegir tipografías que sean legibles en diferentes tamaños
5. Mantener saltos de líneas espaciados
6. Tener suficiente contraste
7. No usar animaciones intermitentes

Serif

Sans Serif (diferencia con Serif: la Serif tiene unos remates al final de cada letra)

Script (mejor conocida como fuente cursiva)

Página para encontrar tipografías Google Fonts

### Tipografía
> Técnica de imprimir textos o dibujos, a partir de tipos o moldes en relieve que, entintados, se aplican sobre el papel.
> [Wikipedia](https://es.wikipedia.org/wiki/Tipograf%C3%ADa)

#### Tips para el uso eficiente de tipografías
1. Mantener el número de fuentes al mínimo
2. Tratar de usar fuentes estándar (por ejemplo google fonts, o las que traen las computadoras por defecto)
3. Limitar la cantidad de texto
4. Elegir tipografías que sean legibles en diferentes tamaños
5. Mantener saltos de líneas espaciados
6. Tener suficiente contraste
7. No usar animaciones intermitentes

#### Tipos de fuentes
**Serif**

| Personalidad | Fuentes          | Combina con | Usos              |
|--------------|------------------|-------------|-------------------|
| Tradicional  | Droid Serif      | Sans serif  | Logos             |
| Sofisticada  | Georgia          | Script      | Textos de párrafo |
| Confiable    | Merriweather     | Display     | Títulos           |
| Práctica     | Playfair display | -           | Impresos          |
| Formal       | Times            | -           | -                 |

**Sans Serif** (diferencia con Serif: la Serif tiene unos remates al final de cada letra)
| Personalidad | Fuentes    | Combina con | Usos              |
|--------------|------------|-------------|-------------------|
| Moderna      | Droid Sans | Serif       | Logos             |
| Limpia       | Lato       | Script      | Textos de párrafo |
| Humanista    | Open Sans  | Slab serif  | Títulos           |
| Geométrica   | Roboto     | -           | Textos pequeños   |
| Universal    | Verdana    | -           | -                 |

**Script** (mejor conocida como fuente cursiva)
| Personalidad | Fuentes   | Combina con | Usos         |
|--------------|-----------|-------------|--------------|
| Elegante     | Courgette | Serif       | Logos        |
| Clásica      | Lobster   | Sans serif  | Títulos      |
| Formal       | Merienda  | -           | Invitaciones |
| Sofisticada  | Pacífico  | -           | -            |
| Estilizada   | Satisfy   | -           | -            |

Página para encontrar tipografías [Google Fonts](https://fonts.google.com)

Hay una parte que se olvida mencionar en el video y creo que es muy importate. Es mejor no definir como tal el tamaño de fuente que se va a utilizar en el proyecto en pixeles. Por lo general, los navegadores tienen definidos los tamaños de fuente como una configuración de la aplicación (aproximadamente 16px) que son customizables en el mismo navegador (generalmente aparecen como configuracion de tamaño de texto. Ej: Small, Medium, Large), adaptando asi todos los textos que ves al momento de navegar. Esto es completamente una decisión del usuario, y si nosotros seteamos por defecto los valores de la fuente en pixeles como se hace en la parte del css, estamos sobreponiendo nuestras configuraciones por encima de las del usuario. Lo que realmente se debería hacer es trabajar con rem y em que son dos medidas que se usan generalmente en los textos que van acorde a las configuraciones del usuario. Por ejemplo, 1 rem es equivalente a los 16px que se configuran en el navegador. (em es muy parecido a rem, solo que em es un tamaño relativo al tamaño de fuente del contenedor padre, mientras que rem es relativo al alemento HTML)

14.-Tipografía

Tips para el uso eficiente de tipografías.

• Mantén el número de fuentes al mínimo. Una página con más de 3 o 4 pierde el balance.
• Trata de usar fuentes estándar. Google Fonts.
• Limita la cantidad de texto. No seas el mucho texto.
• Elige tipografías que sean legibles en diferentes tamaños. Cuidado con las cursivas.
• Mantén altos de línea espaciados.
• Asegúrate de tener suficiente contraste.
• Evita usar animaciones intermitentes. Que no parezca powerpoint.

Hay diferentes tipos de fuente y reglas de combinación. También tienen personalidad al igual que los colores

El texto no debe llevar animaciones.
Esta hecho para ser leído rápidamente no es una presentación powerpoint.

Les comparto este otro link, les ayuda con una guía de fuentes para web 🤓
https://smad.jmu.edu/shen/webtype/combinetype.html

Montserrat es la tipografía que me gusta, no se porque pero me relaja XD

como dije anteriormente, no había visto que usen estos conceptos y herramientas al crear las app ó webs. se ve que es todo un pequeño mundo. Muy buen a explicación.

Yo utilizo este sitio web cuando necesito ver tipografías
MIXFONT

https://www.mixfont.com/
Espero que les sirva

Por si les sirve

![](

Aprende 🧠 a añadir una fuente de texto externa en tus proyectos web con esta historieta.

💥Mira el siguiente video: Aprende a añadir una fuente de texto externa en tus proyectos web
_

algo que que me sorprendio de la tipografia es que en otros paises como se leen por ejemplo en el china eso lados se leen arriba hacia abajo o otros lados de derecha a izquierda y nosotros leemos de izquierda a derecha

Mi tipografía favorita es helvetica la se ve super bien

Algo que me ayuda a recordar la diferencia entre Serif y Sans-Serif es el significado de sus nombres:

• Serif. Es Serifa en francés. La serifa es el adorno que se encuentra al extremo de las letras cuando se usa esta tipografía.
• Sans-Serif. El Sans que se agrega, también está en francés y significa Sin. Por lo que tenemos el significado como Sin Serifa.

la tipografía es uno de los pilares más importantes del diseño y es importante seleccionar la correcta, teniendo en cuenta qué queremos transmitir y para qué o quién.

Decorativas
En estas tipografías se incluyen familias tipográficas muy variadas con mucha personalidad. Debido a sus formas tan características y su personalidad definida y concreta, son apropiadas para dar un carácter histórico o cultural a un diseño y diferenciarlas del resto de tipografías.

Se utilizan para fines específicos como títulos, encabezados… No son adecuadas para bloques de texto, ya que dificulta su legibilidad.

Ejemplos de tipografías decorativas; Fantasía, Motherline Vintage, Rolla, Sinara, Lawless, Mightype, Selima, Art Nouveau…
https://srpotato.com/blog/diseno/la-importancia-de-la-tipografia-en-el-diseno-grafico/#:~:text=La tipografía se emplea para,como al diseño de caracteres.&text=Por ello%2C la tipografía es,y para qué o quién.

💚 Utilizar la menor cantidad de fuentes, dará un balance a nuestra aplicación.

https://fonts.google.com/

Los tamaños de fuente los define en pixeles (px). Cuál es la ventaja de esa métrica respecto a definir el fontSize con em, rem?

Excelente herramienta

Tips para el uso eficiente

• Mantén el numero de fuentes al mínimo
• Trata de usar fuentes estándar
• Limita la cantidad texto
• Elige tipografías que sean legibles en diferentes tamaño
• Mantén altos en línea espaciados
• Asegúrate de tener suficiente constante
• Evita usar animaciones intermitentes

Muy buena explicación sobre las fuentes y tipografías.

Tips para el uso eficiente de tipografías:
• No uses demasiados tipos de letras.
• Usa fuentes estándar.
• Limita la cantidad de texto. No son libros. Mucho texto echa a los usuarios de la página.
• Selecciona tipos de textos legibles en diferentes tamaños.
• Mantén las líneas separadas unas de otras. Los altos de línea que sean adecuados.
• Que tengan suficiente contraste el texto con el fondo.
• Evitar las animaciones intermitentes en los textos.
Reglas de combinación de tipografía:
Las fuentes tienen personalidad.
• Serif: tradicional, sofisticada, confiable, práctica, formal… Se puede combinar con Sans Serif, scripts, display… y se suele usar en logos, textos de párrafos, títulos, impresos.
• Sans Serif: Moderna, limpia, humanista, geométrica, universal. Se combina con serif, script y slab serif. Sus usos son: logos, textos de párrafos, títulos y textos pequeños.
• Script o fuente cursiva: Elegante, clásica, formal, sofisticada y estilizada. Combina con serif y sans serif. Se usa en logos, títulos e invitaciones. También textos cortos que queramos destacar.

Algo importante que al momento de crear páginas y la hoja de estilos siempre hay que indentar el código para que sera muy fácil de leer y corregirlo sin problemas. Y utilizar el color de paletas de acuerdo a su gusto.

Ya aprendí las diferencias entre serif y sans serif nwn

Style guide? qué es eso o que? minuto 3:51.😅

También les recomiendo mucho este sitio para descargar fuentes tipográficas de uso libre, bastante diversas:
https://www.dafont.com/es/

existen dos formas de importar la tipografia en un proyecto desde el html en el <head> o desde el css como se muestra en el video.

Cada una de las tipografías tienen una forma y significado diferente, esto es lo que las caracteriza, respecto a la forma nos referimos a lo que observamos (trazo, geometría, estilo, inclinación…) y el significado hace referencia a lo que transmite, es decir el mensaje que genera en el receptor.

La RAE define tipografía como «Imprenta», «Modo o estilo de imprimir un texto» y como «Clase o tipos de imprenta». Hoy en día, estas definiciones se han quedado un tanto obsoletas, ya que, al hablar de tipografía, nos referimos al tipo de letra que usamos para escribir un texto.

Las tipografías son los diferentes estilos o tipos de letras que podemos elegir al hacer un diseño o escribir un texto y, así por ejemplo quien esté acostumbrado a utilizar por ejemplo el editor de texto Microsoft Word les sonará alguna de ellas como la Arial, Comic Sans, Helvética, Times New Roman o Impact entre otras.

Script

Sans Serif

Serif

Recuerden que la mejor forma de utilizar fuentes en su página es importarlas con la etiqueta link que nos proporciona google fonts e importando unas pocas variantes de grosor (por lo general, una 300, una 500 y una 700, pero esto depende del proyecto).

El uso correcto de la tipografía es indispensable en el tema de la accesibilidad.

Para un proyecto web siempre se recomienda usar 2 tipografías, máximo 3 y de preferencia San Serif

14. Tipografía:

• Trata de mantener el número de fuentes al mínimo.
• Trata de usar fuentes estándar (de la pc o google fonts).
• Limita la cantidad de texto.
• Elige tipografías que sean legibles en diferentes tamaños.
• Mantén altos de línea espaciados (line height).
• Asegúrate de tener suficiente contraste.
• Evitar usar animaciones intermitentes.
  
  
  Les comparto el link de google fonts: https://fonts.google.com/

Les recomiendo esta página para escoger una fuente a partir de sugerencias
https://fontflipper.com

Google fonts es muy útil, me gusta que google se las sabe (casi) todas

Se deben utilizar máximo 3 fuentes distintas en una web.

Asegurense de tener una version estable de node, yo estaba trabajando con la 16 y no me dio el

npm install
npm start

me pase a la version 12 y dio sin problemas

Interesante el recurso _GOOGLE FONTS _ :3 . Empezaré a agregarlo a mi windows .

increible video, aprendiendo con cada clase.

Tips para el uso eficiente
de tipografías.
● Mantén el número de fuentes al mínimo.
● Trata de usar fuentes estándar.
● Limita la cantidad de texto.
● Elige tipografías que sean legibles en
diferentes tamaños.
● Mantén altos de línea espaciados.
● Asegurate de tener suficiente contraste.
● Evita usar animaciones intermitentes.

Tips para el uso de tipografías
Mantén el número de fuentes al mínimo.
Trata de usar fuentes estándar.
Limita la cantidad de texto.
Elige tipografías que sean legibles en
diferentes tamaños.
Mantén altos de línea espaciados.
Asegurate de tener suficiente contraste.
Evita usar animaciones intermitentes.

A ver qué tal.

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');

$font-primary: 'Abril Fatface', cursive;
$font-secondary: 'Oswald', sans-serif;

Tipos de fuente.

• Serif --> Es una fuente tradicional, sofisticada, confiable, practica y formal. Se puede usar en logos, textos de parrafos, titulos o impresos.

• Sans-Serif --> Es una fuente Moderna, limpia, humanista, geometrica y universal. Se puede usar en logos, textos de parrafos, titulos y titulos pequeños.

• Script --> Es una fuente Elegante, clasica, formal, sofisticada y estilizada. Se puede usar en Logos, titulos e invitaciones. Tal vez para textos cortos

Gracias platzi!!!

Serif

Tips para el uso eficiente de tipografías

Gracias por el vídeo!

Google Fonts

Sans Serif

Script

Muy buenos tips, gracias por sus aportes Maestras.

Hola! aquí les dejo todas las fuentes de google font…

[Repositorio en GitHub] (https://github.com/google/fonts)
Link de descarga directa

Sans Serif

Personalidad
Moderna.
Limpia.
Humanista.
Geométrica.
Universal.
Fuentes
Droid Sans.
Lato.
Open Sans.
Roboto.
Verdana.
Usos
Logos.
Textos de párrafo.
Títulos.
Textos pequeños.

Serif
Personalidad
Tradicional.
Sofisticada.
Confiable.
Práctica.
Formal.
Fuentes
Droid Serif.
Georgia.
Merriweather.
Playfair Display.
Times.
Usos
Logos.
Textos de párrafo.
Títulos.
Impresos.

“Una página que tiene más de tres tipografías pierde el estandar y la unidad”.

Si desean ver combinaciones de fuentes de google fonts, aquí les comparto algunas https://hormigasenlanube.com/combinaciones-google-fonts-para-tu-blog/

Las fuentes deberían estar pensadas para que se apliquen a cualquier tipo de texto o logo… creo que la columna de “usos” puede confundir un poco.

Recomiendo ver el documental de Helvetica que explica un poco mas de como usamos las tipografías en el diseño.

Mis apuntes sobre 28562-tipografia

Tips:
.El mínimo
.Trata de usar fuentes estándar
.Limita la cantidad de texto
.Elige tipografías que sean legibles en distintos tamaños
.Mantén altos de línea espaciados

Tipos de fuentes:
1.Serif
Personalidad: Tradicional
Fuentes: Droid, Georgia

1. San Serif
   Personalidad: Moderna, limpia
   Usos: Logos, textos de párrafos, títulos, textos pequeños

2. Script
   Personalidad: Elegante, clásica, formal
   Usos: Logos, títulos, invitaciones

Para revisar fuentes:
https://fonts.google.com/