Tipografía

El módulo Ignite UI for Angular Typography Sass le permite modificar la tipografía de todos los componentes de su aplicación, escala tipográfica específica o componentes específicos.

Descripción general

An application can define multiple typography scales that may share scale categories between one another. A scale category is a set of type styles, containing information about font-family, font-size, font-weight, line-height, letter-spacing, and text-transform.

Ignite UI for Angular exposes 4 default type scales for each of its themes - $material-type-scale, $fluent-type-scale, $bootstrap-type-scale, and $indigo-type-scale, which are in turn used by the typography mixin to set the typography styles. You can, however, create additional type scales.

En muchos casos, solo necesitará realizar ligeras modificaciones en la tipografía, por lo que se recomienda leer primero la sección Tipografía de la documentación de Variables CSS, si aún no lo ha hecho. Solo es necesario usar Sass para modificar la tipografía si desea realizar cambios más profundos relacionados con toda la escala tipográfica.

Usage

Important

By default we don't apply any typography styles. To use our typography in your application you have to set the ig-typography CSS class on a top-level element and include the typography mixin in your base .scss file.

Hemos seleccionado Titillium Web para que sea la fuente predeterminada en el tema Material para Ignite UI for Angular. Para usarlo tienes que alojarlo tú mismo, o incluirlo desde Google Fonts:

<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet"/>

Hay varios mixins y funciones que se utilizan para establecer y recuperar estilos de categoría hacia/desde una escala de tipos. Esos son:

• type-style [function] - Returns a set of style rules to be used by a type scale category.
• type-scale [function] - Returns a set of 13 style categories.
• type-scale-category [function] - Returns a map of style rules from a type scale and category.
• type-style [mixin] - Adds style rules to a selector from a specific type scale and category.
• type-style-vars [mixin] - Adds style rules to a selector from a specific type style.
• typography [mixin] - Defines the global application typography styles.

Echemos un vistazo más de cerca a lo que hace cada uno de los mixins y funciones antes mencionados.

The Type Style

The type-style function is an interface-like function that simply ensures that certain arguments are passed as part of the style set for a scale category. Say, for instance that we want to define a new set of style rules for the h1 scale category. To do so, we could simply write:

$h1-style: type-style(
  $font-size: rem(112px),
  $font-weight: 600,
  $line-height: rem(96px),
  ...,
);

The Type Scale

La escala de tipos produce un mapa de 13 estilos tipográficos utilizados como categorías de escala. Para generar una nueva escala de tipo, haga lo siguiente:

$my-type-scale: type-scale(...);

Important

You have to provide a type style for each of the 13 scale categories. A style can be generated using the type-style function as shown above.

$my-type-scale: type-scale(
  $h1: $h1-style,
  [$h2...$overline],
);

You can modify an existing type scale by extending it. To change the h1 type style of the $material-type-scale you can do:

$my-type-scale: extend(
  $material-type-scale,
  (
    h1: type-style(...),
  )
);

Agregar estilos de letra adicionales a una escala es igual de fácil:

$my-type-category: type-style(
  $font-weight: 600,
  $font-size: rem(42px),
  $text-transform: uppercase,
  ...,
);

$my-type-scale: extend(
  $my-type-scale,
  (
    "my-category": $my-type-category,
  )
);

The Typography Mixin

El mixin de tipografía define los estilos de tipografía globales para una aplicación, incluido el estilo de los elementos nativos h1-h6 y p.

Actualmente acepta 2 argumentos:

• $font-family - The global font family to be used by the application.
• $type-scale - The default type scale to be used by the application.

To use the typography styles, include the typography mixin anywhere after the core. Let's take advantage of the type scale $my-type-scale we defined above and make it the default type scale.

@include typography(
  $font-family: $material-typeface,
  $type-scale: $my-type-scale
);

We expose four variables for typeface, similar to type-scale - $material-typeface, $fluent-typeface, $bootstrap-typeface, and $indigo-typeface. You can use any of them in combination with any type-scale when including the typography mixin.

Custom Type Styles

The type-style mixin can be used to retrieve the style rules for a scale category from a specific type scale. Furthermore, it allows you to add additional style rules.

.my-fancy-h1 {
  @include type-style('h1') {
    color: royalblue;
  }
}

The above code will produce a class style selector .my-fancy-h1, which contains all of the style rules for the h1 scale category from $my-type-scale with the addition of the color property set to the royalblue color. Now, if you set the class of any element to .my-fancy-h1, it will look like any other h1 element but be also royalblue in color.

Component Typography

Most of the components in Ignite UI for Angular use scale categories for styling the text. For instance, the igx-card component uses the following scale categories:

• h6 - used for styling card title.
• subtitle-2 - used for styling card subtitle and small title.
• body-2 - used for styling card text content.

There are two ways to change the text styles of a card. The first is by modifying the h6, subtitle-2, and/or body-2 scales in the material type scale that we pass to the typography mixin. So if we wanted to make the title in a card smaller, all we have to do is change the font-size of the h6 scale category.

// Create a custom h6 scale category style
$my-h6: type-style(
  $font-size: rem(12px),
);

// Create a custom type scale with the modified h6
$my-type-scale: extend(
  $material-type-scale,
  (
    h6: $my-h6,
  )
);

// Pass the custom scale to the global typography mixin
@include typography($type-scale: $my-type-scale);

Warning

The above code will modify the h6 scale category globally, which will affect the look and feel of all components that use the h6 scale. This is done for consistency so that all h6 elements look the same across your app. We understand that you may want to apply the modification for h6 to specific components only, like the igx-card component in our case. This is why every component has its own typography mixin, which accepts a category configuration.

// Create a custom h6 scale category style
$my-h6: type-style(
  $font-size: rem(12px),
);

// You can specify which categories from the type sale the card uses
$card-categories: (
  title: 'h6',
  title-small: 'subtitle-1',
  subtitle: 'subtitle-2',
  content: 'body-2',
);

.my-cool-card {
  // Overwrite the 'h6' type style for this scope
  @include type-style-vars('h6', $my-h6);

  // Pass the custom card catergories to the card typography mixin
  @include card-typography($card-categories);
}

We no longer include the typography mixin by passing it the $my-type-scale scale with our modification to the h6 category. Now all we do is pass the custom h6 style we created to the type-style-vars mixin.

Usando la combinación de tipografía de tarjeta, podemos actualizar los estilos de tipografía para todos los elementos del componente de tarjeta. En el ejemplo anterior, a la clave title-small del mapa de categorías $card se le asigna el estilo de tipo subtitle-1. Este cambio hace que el título pequeño de la carta sea un poco más grande. De forma predeterminada, el componente de tarjeta utiliza el estilo de letra subtitle-2 para el título pequeño, que tiene un tamaño de fuente más pequeño que el subtitle-1. La mezcla nos permite anular este valor predeterminado y aplicar el nuevo estilo.

Converting Units

We also have three typography functions for converting property units. With the functions we can convert px units to em or rem, and also em or rem units to px. All we need to do is call one of the three functions and pass a value that we want to convert.

To 'px'

.my-component {
  margin: px(3.23rem);
}

To 'rem'

.my-component {
  margin: rem(10px) rem(5px);
}

To 'em'

.my-component {
  margin: em(10px) em(5px);
}

Es importante recordar que al convertir un valor, la conversión se basa en un tamaño de fuente base predeterminado de 16 px (donde 16 px = 1em/rem). Si queremos, podemos proporcionar un tamaño de fuente base personalizado como argumento para la función de conversión. Esto asegurará que el valor resultante se calcule en relación con el tamaño de fuente base especificado.

.my-component {
  margin: rem(10px, 26px);
  // The result will be 0.385rem
}

Esto convertirá el valor de 10px a rem, basado en el tamaño de fuente de 26px.

CSS Classes

In addition to adding text styles for all components based on type scale categories, we also style the default h1-h6 and p elements. This allows us to separate semantics from styling. So for instance, even though the h1 tag has some default styling that we provide when using typography, you can modify it to look like an h3 by giving it a class of ig-typography__h3.

<h1 class="ig-typography__h3">Some text</h1>

Aquí hay una lista de todas las clases de CSS que proporcionamos de forma predeterminada:

• ig-typography__h1
• ig-typography__h2
• ig-typography__h3
• ig-typography__h4
• ig-typography__h5
• ig-typography__h6
• ig-typography__subtitle-1
• ig-typography__subtitle-2
• ig-typography__body-1
• ig-typography__body-2
• ig-typography__button
• ig-typography__caption
• ig-typography__overline

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub