Skip to content
+

Tipografía

Utilice la tipografía para presentar su diseño y contenido de la forma más clara y eficaz posible.

Fuentes

U-Ui utiliza la fuente Quicksand y Roboto por defecto. Añádela a tu proyecto a través de Fontsource, o con el CDN de Google Fonts.

Quicksand 

npm install @fontsource-variable/quicksand

A continuación, puede importarlo en su punto de entrada de la siguiente manera:

// Soporta pesos (weights) de 300-700
import '@fontsource-variable/quicksand';

Roboto 

npm install @fontsource/roboto

A continuación, puede importarlo en su punto de entrada de la siguiente manera:

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

Google Web Fonts

Para instalar Quicksand y/o Roboto a través de la CDN de Google Web Fonts, añada el siguiente código dentro de la etiqueta <head /> de su proyecto:

<!-- Instalar Quicksand -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" rel="stylesheet">

<!-- Instalar Roboto -->
 <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
/>

Componente

Uso

El componente Tipografía sigue la escala tipográfica de Material Design que proporciona un conjunto limitado de tamaños de letra que funcionan bien juntos para un diseño coherente.

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading
subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur

body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.

button textcaption textoverline text

Claves temáticas

En algunas situaciones es posible que no pueda utilizar el componente Typography. Con suerte, podrá aprovechar las claves typography del tema.

El texto de este div se parece al de un botón.
Press Enter to start editing

Personalización

Añadir y desactivar variantes

Además de utilizar las variantes tipográficas predeterminadas, puede añadir variantes personalizadas o desactivar las que no necesite. Consulte la página Añadir y desactivar variantes para más información.

Cambiar el elemento semántico

El componente Tipografía utiliza la propiedad variantMapping para asociar una variante de interfaz de usuario con un elemento semántico. Es importante tener en cuenta que el estilo de un componente tipográfico es independiente del elemento semántico subyacente.

Para cambiar el elemento subyacente para una situación puntual, como evitar dos elementos h1 en tu página, utiliza la propiedad component:

<Typography variant="h1" component="h2">
  h1. Heading
</Typography>

Para cambiar el mapeo del elemento tipografía globalmente, use el tema:

const theme = createTheme({
  components: {
    uiTypography: {
      defaultProps: {
        variantMapping: {
          h1: 'h2',
          h2: 'h2',
          h3: 'h2',
          h4: 'h2',
          h5: 'h2',
          h6: 'h2',
          subtitle1: 'h2',
          subtitle2: 'h2',
          body1: 'span',
          body2: 'span',
        },
      },
    },
  },
});

Props del sistema

Accesibilidad

Factores clave a seguir para una tipografía accesible:

API

Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.