El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Maquetación y tipografía para web

Iniciales capitulares como inicio de los textos

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Para iniciar un texto, una de las opciones más espectaculares es con una inicial capitular: una letra a mayor tamaño que ocupa varias líneas. Gracias a los selectores avanzados de CSS ahora podemos hacerlo en nuestra web.
04:51

Transcripción

Bien, tenemos nuestro texto del Quijote, ancho de columna idóneo, un buen tamaño de texto y un interlineado generoso que nos hace muy cómoda su lectura. Vamos a ver cómo mejorar poco a poco este texto a través de CSS, aplicando técnicas de la tipografía analógica o tradicional u "offline" o como la queramos llamar. Vamos a aplicar todas estas técnicas, esta sabiduría centenaria a la web. Y vamos a hacerlo en este caso mediante una bonita letra capitular para iniciar el texto, en este caso: "En lugar de La Mancha", la frase que todos conocemos. Vamos a hacer que la 'e' tenga un estilo especial. ¿Cómo lo vamos a hacer? Bueno, pues a través de CSS. En el HTML no tenemos que tocar nada. Vamos pues al CSS y vamos a definir un nuevo selector. Vamos a decirle que para un párrafo, vamos a usar el selector 'first-of-type', que quiere decir: el primer párrafo de texto que te encuentres, y dentro de él, la primera letra que te encuentres. Abrimos llaves para escribir nuestro código y aquí pondríamos las características que le querríamos aplicar a esta primera letra de este primer párrafo. Vamos a ponerle hacia la izquierda, tamaño de 3ems, y le vamos a decir, por ejemplo, 'margin 0' para que no nos dé ningún problema. Le damos a actualizar, vemos que efectivamente en el primer párrafo ocurre esto, pero en el resto de párrafos no ocurre, porque eso es lo que hemos seleccionado, que esto se aplique al primer párrafo que encuentres, y de ese primer párrafo a la primera letra. Así pues tenemos la 'e' –bastante fea, por cierto– así que vamos a arreglarlo, vamos a hacer esto más grande, vamos a ponerle por ejemplo para que no se nos quede tan así, esto le vamos a poner 5, le vamos a poner un poco de "padding". El "padding" se lo vamos a poner un poquito por arriba, un poquito a la derecha y abajo, y a la izquierda no le vamos a poner nada. Vamos a ver cómo va avanzando esto. Superhorroroso, ¿de acuerdo? Pues vamos a bajarle por aquí y vamos a bajarle mucho por aquí. A ver ahora. Ya vamos acertando. Vamos a bajar un poquito esto y, de hecho, vamos a cargarle un poquito más de peso. Teníamos 400 y 700, así que le vamos a poner en Bold. Y ya lo vamos ajustando, de hecho ya podríamos decir que está casi perfecto. Lo único que nos quedaría sería ponerla de otro color. Ponemos el mismo color que hemos puesto a 'Miguel de Cervantes' y ya tendríamos nuestra inicial capitular, que como vemos solo se aplica al primer párrafo del texto y le damos un toque espectacular –lo tengo que decir– al inicio del texto con esta capitular de un color que no es el del texto corrido, que solo aplicamos a esta primera letra, como digo, le aplicamos otro peso, otro color, otros márgenes, otro tamaño, etcétera., etcétera, etcétera, y hacemos que esta letra sea especial de alguna manera. Esta era la forma en que antiguamente se iniciaban muchos libros. Hay muchas maneras de iniciar libros, esta es una de ellas y una de las más bonitas, sobre todo si estamos tratando con textos de está índole. Así pues, ya sabemos poner y utilizar iniciales capitulares en web.

Maquetación y tipografía para web

Aprende cómo seleccionar una fuente óptima para su lectura en pantalla y cómo exprimirla para aprovechar en tus proyectos web todas las posibilidades de las fuentes OpenType.

2:10 horas (25 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:30/09/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.