Al crear sitios web, se debe considerar la conveniencia del usuario. Esto significa que se debe priorizar la simplicidad, la jerarquía visual y la navegación en el proceso de compilación.
Estas pautas de diseño y usabilidad del sitio web tienen el mismo objetivo: ayudar a los visitantes a encontrar la información que están buscando o completar una acción que han elegido realizar. Tipos de letra claros, colores consistentes y migas de pan son solo algunos elementos de diseño que pueden mejorar la experiencia del usuario en su sitio web.
Otro es el capitular. En este post explicaremos qué es una inicial y cómo crearla en CSS.
¿Qué es una capitular?
Drop cap es una abreviatura de «drop cap». Esta es la gran letra mayúscula que a veces ves al comienzo de un párrafo en publicaciones impresas y digitales. Este elemento de decoración suele tener dos o más líneas de texto en un párrafo.
En atlántico, las letras capitulares se utilizan para dividir las secciones del artículo y señalar el punto de partida del lector para cada sección. Ocupan un espacio de tres líneas de texto, como se puede ver en el siguiente extracto de «The American Nightmare» de Ibram X. Kendi.
Neoyorquino usa iniciales en su sitio web para un propósito similar, pero en un tamaño más pequeño. Sus entradas toman dos líneas en lugar de tres, como se ve en el extracto de «How Pandemics Wreak Havoc – And Open Minds» de Lawrence Wright a continuación.
Al elegir fuentes para su sitio web, puede optar por utilizar iniciales para mejorar la legibilidad de su contenido. En ese caso, veamos el proceso de diseño de capitulares en CSS.
Cómo diseñar iniciales creativas en CSS
Hay dos formas de crear iniciales en CSS.
La primera forma es envolver la primera letra del párrafo con etiquetas de intervalo. A continuación, puede diseñar el rango sin afectar el resto del párrafo mediante el selector de CSS. A continuación, utilizaremos el alcance del selector de tipo.
Para alinear la letra capitular con la parte superior de la primera línea del párrafo y el margen izquierdo del párrafo, puede usar las propiedades float y line-height. Establezca la propiedad flotante a la izquierda y la altura de la línea al 85%. Al configurar la altura de la línea al 85 % en lugar del 100 %, alinea la parte superior de la «T» mayúscula con la parte superior de la «h» minúscula.
Luego, para asegurarse de que la letra capitular y el párrafo no se superpongan, establezca el ancho de intervalo en una constante. El uso de 0,7 em, o 0,7 del ancho de fuente de un párrafo, dará la ilusión de un relleno entre el borde derecho e inferior de la inicial y el párrafo. Para que el tamaño inicial sea de tres líneas de texto, establezca el tamaño de fuente en 400%. Tenga en cuenta que el 400 % de 16 px (el tamaño de fuente predeterminado en Tryit W3School Editor) es 64 px.
Finalmente, para asegurarse de que la inicial realmente se destaque, cambie la familia de fuentes a Georgia. El resto del párrafo se escribirá por defecto en Times New Roman en el editor Tryit de W3School. Veamos el código juntos.
Aquí está el CSS:
span {
float: left;
line-height: 85%;
width: .7em;
font-size: 400%;
font-family: georgia;
}
Aquí está el código HTML:
<p><span>T</span>his is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p>
<p>In the paragraph above, the first letter of the text is embedded in a span element. The span can now be defined by a CSS rule set, without affecting the rest of the paragraph. This rule set includes the float and line-height property so that the drop cap lines up with the top of the first line and the left margin of the paragraph. It also sets the width of the span as 0.7 times the size of the font of the paragraph, which gives the illusion of padding on the right and bottom. It also sets the font-size as 400% greater than the default font-size, so the drop cap takes up 3 lines. Finally, the font of the span is set to Georgia while the paragraph is Times New Roman by default.</p>
Aquí está el resultado:
La segunda forma de crear iniciales es usar la :: pseudoclase de la primera letra. Esto apuntará a la primera letra de la primera línea del elemento de bloque, incluido el párrafo. Al usar el selector de pseudoclase, puede cambiar el estilo. El siguiente ejemplo nos hará más creativos.
Como en el ejemplo anterior, comience configurando las propiedades de coma flotante, la altura de línea, el tamaño de fuente y la familia de fuentes. Excepto por la propiedad flotante, que debe establecerse a la izquierda, puede usar diferentes valores de propiedad. El siguiente ejemplo utiliza píxeles en lugar de unidades em y porcentajes, por ejemplo, y selecciona la fuente Montserrat. Nota: También cambia el tamaño de fuente de párrafo predeterminado de 16 px a 14 px.
Ahora suponga que desea cambiar el color y agregar un borde alrededor de una inicial. Para hacer esto, simplemente establezca la propiedad de color en cualquier código de color hexadecimal. A continuación, usaremos un bonito color púrpura.
Luego puede establecer el estilo y el color utilizando la propiedad de borde acortado. En el siguiente ejemplo, usaremos una línea sólida y un tono púrpura como borde. Luego agregue relleno en todos los lados para colocar un espacio entre la letra mayúscula y el borde. Por último, establezca la propiedad margin-right en un valor positivo para asegurarse de que el borde y el párrafo no se superpongan, y establezca la propiedad margin-bottom en un valor negativo para que el párrafo se ajuste a la inicial.
Miremos este código juntos y luego veamos cómo se representará en la interfaz.
Aquí está el CSS:
p::first-letter {
float: left;
line-height: 35px;
font-size: 55px;
font-family: Montserrat;
color: #7D3C98;
border: solid #D5C5EC;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;
margin-right: 5px;
margin-bottom: -5px;
}
p {
font-size: 14px;
}
Aquí está el código HTML:
<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p>
<p>In the paragraphs above, the first letter of each is targeted by a pseudo-class selector. The letters can now be styled differently from the rest of the paragraph. The CSS includes some of the properties we used above, including the float, line-height, font-size, and font-family properties. What makes it different from the previous example is that the color, border, padding, and margin properties are also defined. Setting these properties with hex color codes and different length values, the drop cap is not only a different color, but is also bordered.</p>
Aquí está el resultado:
Mejorando la usabilidad en tu proyecto
Usando los métodos anteriores, puede diseñar iniciales para su sitio web único. Hay aún más opciones de estilo en CSS de las que no hemos hablado. Puede jugar con los colores de fondo, la decoración del texto y otras propiedades de CSS para encontrar el diseño de iniciales perfecto para su sitio.
Ya sea que esté creando su sitio desde cero o utilizando una plataforma de desarrollo como Bootstrap CSS, todo lo que necesita para crear estos elementos de diseño es conocimiento de HTML y CSS.
