CSS: Reglas básicas de tipografía
- Utiliza fuentes estándar
- Utiliza no más de dos fuentes en una página
- Utiliza un tamaño de fuente adecuado
- Utiliza un interlineado adecuado
- Alinea el texto a la izquierda
Después de revisar la mayoría de las reglas de trabajo con texto, puede surgir la pregunta: "¿Cómo aplicarlas correctamente?". Esta pregunta es extensa y merece un curso aparte.
La tipografía ayuda que la lectura sea cómoda y también en el diseño. Un buen diseño puede arruinarse con una mala tipografía.
En esta lección se explican algunas reglas básicas que se pueden utilizar para hacer las páginas más cómodas de leer.
Utiliza fuentes estándar
La mejor opción al utilizar fuentes son las fuentes estándar. Por ejemplo, Arial, Verdana, Tahoma, Times New Roman, entre otras. La mayoría de estas fuentes ya están en las computadoras de los usuarios, son comunes y fáciles de leer.
Evita fuentes extravagantes (como Comic Sans). A pesar de que son divertidos, es difícil leer grandes cantidades de texto escritas con estas fuentes.
Utiliza no más de dos fuentes en una página
Esto ayudará al usuario a orientarse más rápidamente en la página. El caso estándar es utilizar una fuente para los títulos y otra para el texto.
Utiliza un tamaño de fuente adecuado
Este concepto es ambiguo, pero no se debe utilizar un tamaño de fuente menor a 14 píxeles para el texto principal. Si el tamaño de la fuente es menor, la lectura desde dispositivos móviles será incómoda.
Utiliza un interlineado adecuado
El interlineado más común es el valor del 150% del tamaño de la fuente. Si el texto tiene un tamaño de 14 píxeles, se recomienda establecer un interlineado de al menos 21 píxeles.
Alinea el texto a la izquierda
No escribas todo el texto alineado al centro o a la derecha. Al leer este tipo de textos, los ojos se cansan mucho más rápido, ya que pierden el punto de referencia desde donde comienza el texto. Utiliza la alineación no estándar solo para pequeñas secciones de texto (por ejemplo, encabezados o citas).
Tarea
Intenta aplicar diferentes reglas de tipografía en el editor. No hay tareas en esta lección :) Puedes hacer clic en el botón de verificar.
¿El ejercicio no pasa la prueba, qué debo hacer? 😶
Si te quedaste atascado, es el momento perfecto para hacer una pregunta en las "Discusiones".
* Asegúrate de incluir la salida de las pruebas. Sin ella, es casi imposible entender qué está mal, incluso si muestras tu código. Los programadores tienen dificultades para ejecutar el código en su mente, pero casi siempre es posible entender a dónde mirar a partir del error que recibiste.
Mi código funciona en mi entorno, pero no aquí 🤨
Las pruebas están diseñadas de manera que verifican la solución de diferentes maneras y con diferentes datos. A menudo, una solución funciona con ciertos datos de entrada pero no con otros. Para entender este punto, revisa la pestaña "Pruebas" y presta atención a los mensajes de error, que suelen contener pistas.
Mi código es diferente a la solución del profesor 🤔
Esto es normal 🙆. En programación, una tarea puede tener muchas soluciones diferentes. Si tu código pasa la prueba, cumple con los requisitos de la tarea.
En raras ocasiones, la solución puede estar ajustada para pasar las pruebas, pero esto suele ser evidente.
Leí la lección, pero no entendí nada 🙄
Crear materiales de aprendizaje comprensibles para todos es bastante difícil. Hacemos nuestro mejor esfuerzo, pero siempre hay margen para mejorar. Si encuentras material que no entiendes, describe el problema en las "Discusiones". Es ideal si puedes formular los aspectos que no entiendes en forma de preguntas. Por lo general, necesitamos unos días para hacer mejoras.
Por cierto, tú también puedes contribuir a mejorar los cursos: en la parte inferior hay un enlace al código fuente de las lecciones, que se puede modificar directamente en el navegador.