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

Trabajar con la sangría de párrafos

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Ya tenemos el tamaño de texto pero, ¿qué pasa con los párrafos? Podemos marcarlos con salto de línea o con sangría. Vamos a ver este último caso, que es más interesante desde el punto de vista tipográfico.
05:48

Transcripción

Ya tenemos nuestra página web creada, o al menos la base, la tenemos en Sublime Text, tenemos las llamadas a Google Fonts para cargar nuestras fuentes, tenemos un texto cualquiera metido. En este caso, he escogido los tres primeros párrafos del primer capítulo del Quijote, y tenemos nuestro CSS ya con el ancho de columna que hemos decidido y los tamaños de texto, tanto el cuerpo del texto corrido como el interlineado. Con lo cual, ya tenemos mucho trabajo hecho, porque ya nos hemos asegurado una correcta legibilidad por parte del usuario, que no se le va a cansar la vista, que va a poder leer cómodamente saltando de línea en línea, sin tener que hacer demasiado recorrido con los ojos y sin tener que hacer demasiado esfuerzo por ver pequeñas letras o, por el contrario –también podría pasar– un tamaño demasiado amplio. Así pues, ahora pasaríamos ya a trabajar un poquito con los párrafos que en este caso tiene el estilo por defecto de Google Chrome, que es poner, entre párrafo y párrafo una línea. Es un buen estilo, yo de hecho lo recomiendo en páginas web para que no se nos haga muy pesado el ritmo de lectura entre línea y línea, pero vamos a ver un sistema de marcaje de párrafos que muchas veces puede ser más interesante, como tal vez en este caso, en el que es un texto como el del Quijote, por ser un estilo de párrafo más clásico, que tiene una apariencia más de novela y que es muy interesante y así conocemos ambos estilos. Para ello, vamos a Sublime Text, a nuestro CSS, y lo que vamos a hacer es ponerle sangría a nuestro párrafo. ¿Cómo se hace esto? Le indicamos a todos los 'p' o al párrafo que nos interese, pero bueno, como este es un trabajo de ejemplo pues lo vamos a aplicar a todos los párrafos porque no tenemos más y le vamos a poner un 'indentado', que es como se llama en programación a la sangría, que es como se llama en tipografía. Vamos a poner por ejemplo un em, le damos a guardar y ahora al recargar veríamos que, efectivamente, nos indenta el texto. Vamos a ponerle un poquito más para que quede más marcado, pero seguimos teniendo el problema de que tenemos –porque así lo hace Chrome, porque Chrome a lo único que se dedica es a renderizar los CSS y los HTML que le servimos– él tiene para aquello que no esté configurado unos estilos por defecto, son muy básicos y los tiene para muy pocas cosas e interfieren muy poco, pero es verdad que hay veces que hay que resetearlos. En este caso tenemos dos marcajes de cambio de párrafo. Esto es erróneo, no hay que ser reiterativo, con lo cual lo que haríamos sería resetearlo y le pondríamos aquí un cero. Así pues, le quitaríamos el margen y ya tendríamos el salto de párrafo mediante sangría. Solo queda una pequeña cosa por arreglar. En tipografía no nos gustan las reiteraciones. Es decir, empezamos el párrafo y al cambiar de párrafo metemos sangría y el lector sabe que se ha cambiado de párrafo. Acabamos párrafo, metemos sangría para indicar al lector que hemos cambiado de párrafo, perfecto. ¿Qué pasa aquí? Que el lector ya sabe que es un nuevo párrafo, porque no hay nada por encima más que el título y el subtítulo, en este caso el autor. Con lo cual, para evitar esta reiteración, estamos marcando dos veces el inicio de un párrafo con sangría y con un gran vacío anterior, es decir, estamos marcando doblemente un párrafo. El primer párrafo, por mucha sangría que pongamos en los demás, siempre deberá ir sin sangría. ¿Cómo hacemos esto? Bueno, pues mediante la propiedad o el selector p + p, que le decimos que el primer párrafo me lo dejas como está, pero a partir de allí metes una sangría de 2 ems. Perfecto, primer párrafo sin sangría. Vamos a comprobar, y efectivamente el segundo párrafo y el tercero, y a partir de ahí todos los que pusiéramos, irán con la sangría que hayamos definido. Así pues, ya tendríamos una manera diferente de marcar los párrafos, además vemos cómo se hace de manera correcta desde el punto de vista tipográfico tradicional, es decir, primer párrafo sin sangría o sin indentar –si tienes un perfil más de programador–. A partir de allí, todos indentados. ¿Cómo lo hemos hecho? Bueno, le hemos reseteado en primer lugar para quitar el salto de línea, hemos reseteado el margen, y a partir de allí con el selector p + p, le decimos que el primer párrafo nos lo deje tranquilo, que no nos ha hecho nada malo, pero a partir del segundo nos metes una sangría, un indentado de 2 ems. Así pues ya tendríamos definidos nuestros párrafos.

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.