() translation by (you can also view the original English article)
¡Otro mes, otro Reto de CodePen! La última vez te pedimos que aplicases estilo a un formulario de inscripción y unos 68 de vosotros participasteis. Esta vez queremos ver qué combinaciones de fuentes de Google recomiendas, ¡los mejores ejemplos se mostrarán dentro de una semana más o menos!
El desafío
¡Queremos que flexiones tus músculos tipográficos y nos muestres qué pares de fuentes de Google crees que funcionan mejor! ¿Qué te parece un poco de Lato con un poco de Merriweather? ¿Se te hace babear la combinación de Unica One con Vollkorn?
Toma el pen que hemos preparado y trátalo con dos fuentes de Google. Aplica las fuentes de la manera que desees; es posible que debas ajustar otros estilos tipográficos como line-height, font-size y letter-spacing, además puedes cambiar los colores si sientes que mejora la personalidad del tipo que hayas utilizado.
¡No toques el marcado!
Ahora te toca a ti
Esto es lo que tienes que hacer, en unos pocos sencillos pasos.
Paso 1
En primer lugar, dirígete a la demostración en CodePen. Es posible que lo reconozcas como la primera página que el CERN publicó en la web mundial. Así es como se ve:
Paso 2
Pulsa el botón Fork para crear tu propia copia del mismo y, a continuación, realiza tantos cambios como desees en el CSS.
La forma más rápida de hacer uso de las fuentes de Google es importarlas directamente. Toma el fragmento @import relevante de Google:
A continuación, pégualo en el panel CSS de CodePen para usarlo en tus estilos:
1 |
@import url(http://fonts.googleapis.com/css?family=Lato); |
2 |
|
3 |
p { |
4 |
font-family: 'Lato', sans-serif; |
5 |
}
|
Paso 3 (opcional)
Si has iniciado sesión en CodePen, puedes editar la descripción pulsando el botón Info. Usa esto para darle a la gente una idea sobre qué has hecho.
Paso 4
Pulsa Save (guardar), ya terminaste. Asegúrate de informarnos a través de la sección de comentarios cuando hayas terminado y no dudes en informarnos tuiteándonos también a @wdtuts.
¡Eso es todo! ¡Todas las entradas se añadirán a esta colección en CodePen y los mejores ejemplos se mostrarán en Tuts + dentro de una semana más o menos!
¡Buena suerte y no olvides seguir a Tuts + en Codepen!
Consejos
- Una guía para novatos sobre la combinación de fuentes en Tuts+
- http://fontpair.co (ayuda a los diseñadores a emparejar fuentes de Google)
- Cuatro técnicas para combinar fuentes de Hoefler &co.
- 100 días sobre fuentes, cada una mostrando un par de fuentes de Google
- Font Library proyecto de código abierto de fuentes para etiquetar y organizar fuentes de Google
