Hay muchas propiedades en CSS que nos ayudan a definir cómo se verán nuestras fuentes en nuestras páginas web. En este post, te enseñaremos algunas propiedades para fuentes en CSS que te permitirán aprovechar tus fuentes al máximo y estilizar tu página web.
Propiedades font
Dentro de las propiedades para fuentes en CSS se encuentran las propiedades font, aquellas que se dedican a editar las características de la fuente. A continuación, te enseñamos cómo funcionan:
- font-style: esta propiedad font css define el estilo del texto. Dentro de estas propiedades para fuentes en CSS existen los estilos normal, italic y oblique. Además, esta propiedad tiene la cualidad de ser heredada del elemento padre.
- font-variant: la propiedad font-variant define la variante de la letra. Esta propiedad solo tiene dos variantes: normal y small caps. Los small-caps son una variante en la que todas las letras parecen ser mayúsculas pero están reducidas al tamaño de una minúscula, lo que se conoce como versalita.
- font-weight: esta font-weight function css define el peso de la letra, es decir, cómo de delgada o gruesa se verá la tipografía. Dentro de esta propiedad existen las categorías normal, bold o por número entre 100 y 900.
- font-size: esta propiedad define el tamaño de la fuente.
- font-family: esta propiedad representa la familia de la fuente, es decir, la tipografía que estamos usando en el elemento.
- font: esta propiedad se usa como una abreviatura de todas las anteriores. Podemos escribir en nuestra hoja de estilo css font y, después, definir las categorías de las anteriores propiedades directamente, sin tener que escribir la propiedad una por una.
Otras propiedades
Además de las propiedades font, hay otras propiedades para fuentes en CSS que se concentran en factores como su ubicación, espaciado y decoración. A continuación, te presentamos las ocho principales:
- text-decoration: como su nombre indica, esta propiedad se encarga de establecer decoraciones en el texto. Hay cuatro posibles decoraciones en esta propiedad:
- overline: crea una línea encima del texto.
- line-through: crea una línea horizontal que cruza el texto por el centro.
- underline: crea una línea justo debajo del texto.
- underline overline: también podemos poner las dos decoraciones para tener tanto la línea de abajo como la de arriba.
- text-transform: esta propiedad controla el uso de mayúsculas en un texto. En esta propiedad existen tres categorías:
- uppercase: sirve para hacer que todo el texto esté en mayúsculas.
- lowercase: define que todo el texto esté en minúsculas.
- capitalize: hace que todas las palabras del texto empiecen por mayúscula.
- line-height: esta propiedad se refiere al alto de la línea, que es diferente al alto de la fuente. El alto de línea define el espacio hacia arriba y hacia abajo de la letra.
- letter-spacing: determina el espacio entre las letras en un texto.
- word-spacing: determina el espaciado entre las palabras de un texto.
- text-align: esta propiedad determina si el texto está a la derecha, a la izquierda, al centro o justificado en el espacio.
- vertical-align: esta propiedad define la alineación vertical del texto; es decir, determina su posición vertical en la línea. Dentro de esta propiedad hay cinco opciones:
- baseline: es la posición automática del texto.
- text-top: es una alineación arriba del centro de la línea.
- sup: alinea el texto completamente al extremo superior de la línea.
- text-bottom: alinea el texto debajo del centro de la línea.
- sub: define la posición en el extremo inferior de la línea.
- text-indent: esta propiedad determina el indent o la sangría de un texto. Esto se refiere al espacio antes de la primera línea de un texto que ayuda a diferenciar los párrafos. Este espacio se puede definir usando las distintas unidades de medida en CSS. En este post, puedes conocer cuáles son las unidades de medida en CSS. Ten en cuenta que esta propiedad acepta valores negativos; en estos casos, la sangría se hará hacia el lado izquierdo del espacio.
Si quieres ver cómo funcionan estas propiedades en vivo, te recomendamos la página w3schools. En ella, podrás buscar las propiedades para fuentes en CSS que te hemos explicado y editar su código directamente. Esto te ayudará a aprender cómo escribirlas en el código para que causen el efecto que deseas.
¿Quieres seguir aprendiendo?
Ahora que conoces cuáles son las propiedades para fuentes en CSS, ¡es hora de que pongas en práctica estos nuevos conocimientos! Si esto no te parece suficiente y quieres continuar aprendiendo hasta convertirte en un experto, anímate a seguir aprendiendo en nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp. Aquí aprenderás mucho más sobre todas las propiedades que tienen que ofrecer HTML y CSS, entre otros lenguajes, programas y herramientas. ¡No te lo pierdas y apúntate!
