Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Tipografía

14/22
Recursos

Aportes 74

Preguntas 12

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

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.

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

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/

Dejo mis apuntes, espero les sirva 😃



creo que falto explicar como se importa una fuente. en Google fonts, despues de que seleccionan una fuente en lamaorte derecha se creo una ventana donde pueden encontrar el tipo de fuente que eligieron y como la quieres usar, si descargarla o linkearla, le dan en embed, y tendrán un Link si lo copian con la etiqueta style lo ponen en el HTML o si lo copian sin el <style> que sería sólo el @import lo pegan en el css o sass o el archivo de estilis que estén usando

unas de mis páginas favoritas para tipografías son:

https://www.fontsquirrel.com/
https://dafont.com

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

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.

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

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.

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

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

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)

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

<h3>Tipografía</h3>

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

<h4>Tips para el uso eficiente de tipografías</h4>
  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
<h4>Tipos de fuentes</h4>

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

<h3>.md</h3>
### 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)

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.

si quieren conocer mas acerca de tipografia les recomiendo este libro
¨Los elementos del estilo tipográfico - Robert Bringhurst¨
https://www.amazon.com.mx/Los-elementos-del-estilo-tipográfico/dp/6071620090

y este sitio también es muy bueno
https://www.unostiposduros.com/category/textos/

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.

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

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

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/

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

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:[email protected];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

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.

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.

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

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/