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

Crear versalitas con las fuentes web adecuadas

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Las versalitas son letras con la forma de las letras mayúsculas (versales) pero de la altura de las letras minúsculas. Muy útiles para ciertas ocasiones, así que vamos a ver cómo se hace con una webfont que soporte esta característica.
05:39

Transcripción

Una de las características más interesantes que podemos utilizar de las tipografías en diseño "offline", que se lleva utilizando durante siglos en la marcación de libros y revistas, son las versalitas. Y ahora vamos a ver cómo podemos utilizar este recurso también en web. Primero vamos a ver qué son las versalitas y lo vamos a ver a través de esta explicación de Open Educational Resources for Typography, que con una sola imagen nos explica qué son las versalitas y que no son las versalitas. Aquí, en la primera línea, tendríamos 'versalitas' escrito en caja baja o en minúsculas. Vemos que no hay ningún problema, todos sabemos lo que son las letras minúsculas. Pasamos a la segunda línea y vemos que está en mayúsculas, también llamadas versales, pero en un tamaño menor de lo que suelen ser las mayúsculas. Es decir, son unas versales pequeñitas y de ahí el nombre de 'versalitas'. Las versalita son, como digo, una versión reducida de las mayúsculas, pero que aún así tienen la misma construcción que las mayúsculas, pero diferentes proporciones para adecuarlo a este espacio más reducido, y el mismo color, esto sí, que el resto de caracteres. Vemos que tienen el mismo peso visual tanto las minúsculas como las versalitas, cosa que no ocurre en la tercera fila. ¿Por qué? Porque estas son versalitas falsas, es decir, que se han generado a través de un programa automático, por ejemplo cuando maquetamos en InDesign podríamos decir que nos convierta una tipografía, un determinado texto, a versalitas. Y si esa tipografía no dispone de la opción, el diseñador de la tipografía no ha diseñado y previsto ese escenario y no ha diseñado las versalitas, InDesign, con toda su buena intención, te las genera. ¿Qué pasa? Que lo único que hace es reducir las mayúsculas y por lo tanto también se reduce el trazo, el grueso del trazo, y pierde toda la fuerza que pueden tener una versalitas. Así pues, ya sabemos lo que son las versalitas y vamos a aplicarlas a la web mediante "web font". Para ello, tenemos un documento en el que vamos a ir poniendo todos los elementos que vayamos aprendiendo. En este primer lugar tenemos versalitas. Vamos a ver el código: el HTML normal, con su llamada al CSS. He puesto una etiqueta 'versalitas' y un texto 'Lorem Ipsum'. Vamos al CSS. Lo mismo, esta vez estoy utilizando la tipografía Mestre, que diseñé yo mismo, para asegurarme de que está todo correcto. Vamos a ver cómo aplicamos versalitas, en este caso lo vamos a aplicar a los títulos de cada sección y por lo tanto lo vamos a aplicar a la etiqueta 'span'. Vemos que ya le hemos puesto un tamaño un poquito mayor, 120 contra 130 del cuerpo de texto, y en negrita. He cargado mediante @font-face tanto Mestre Regular como Mestre Black, y solo quería decirle que este texto me lo ponga en versalitas. Una solución fácil: podríamos, mediante 'text transform', usaremos 'uppercase', que no es otra cosa que mayúsculas, y veríamos que se nos pone en mayúsculas. No queremos mayúsculas, queremos versalitas. Y además no queremos versalitas falsas, queremos las que el diseñador haya incluido dentro de la tipografía. Así pues: 'text-transform: uppercase', lo aparcamos y usaremos la función de CSS que sí que nos llama a las versalitas verdaderas. En este caso es 'font-variant' y el nombre en inglés de versalitas, que es 'small-caps', es decir, mayúsculas pequeñas. Más bonito el nombre en español, la verdad, versalitas. Le damos a Guardar, vamos a Safari, le damos a recargar y efectivamente ahí tenemos las versalitas diseñadas por el diseñador. Vemos que tenemos la mayúscula, vemos que tenemos las versalitas, y que todas tienen el mismo peso visual, es decir, no están creadas por código, sino que son efectivamente las que incluye la tipografía. Así pues, de esta manera podríamos aplicar versalitas a cualquier texto mediante la propiedad 'font-variant' 'small-caps'. Es fácil y muy útil a la hora de, sobre todo, marcar títulos de secciones, marcar inicios de párrafos. También se utiliza mucho en el diseño editorial o, si queremos ya afinar mucho, en el tratamiento textos podríamos aplicarlo a siglas, sigloides, etc. Pero eso es harina otro costal. Ahora hemos aprendido a utilizar versalitas con lo cual vamos a aprender también a incorporarlo a nuestros diseños. Así pues, para usar versalitas en "web font": 'font-variant', 'small caps'.

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.