Typography

Sistema tipográfico moderno con dos modos: profesional y casual para adaptarse a diferentes tipos de proyectos.

Modos Tipográficos

Modo Profesional

Utiliza la fuente Inter, diseñada específicamente para interfaces digitales. Perfecta para:

  • Aplicaciones SaaS
  • Dashboards corporativos
  • Sitios web profesionales
  • Documentación técnica
Ejemplo: calcunom.es

Modo Casual

Utiliza la fuente Nunito, con una personalidad más amigable y moderna. Perfecta para:

  • Sitios deportivos
  • Blogs personales
  • Webs creativas
  • Portales comunitarios
Ejemplo: losdelaroja.es

Comparación de Estilos

Profesional (Inter)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Casual (Nunito)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Clases Disponibles

Clase Descripción Ejemplo
.font-professional Aplica fuente Inter al elemento Texto profesional
.font-casual Aplica fuente Nunito al elemento Texto casual
.heading-professional Título con estilo profesional (Inter, 600) Título profesional
.heading-casual Título con estilo casual (Nunito, 700) Título casual

Código de ejemplo:

<h2 class="heading-professional">Título Profesional</h2>
<p class="font-professional">Párrafo con estilo profesional.</p>

<h2 class="heading-casual">Título Casual</h2>
<p class="font-casual">Párrafo con estilo casual.</p>

Jerarquía de Títulos

Estilo por Defecto (Profesional)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Con Clase Casual

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Características Profesional

  • Fuente: Inter
  • Peso: 600 (semibold)
  • Line-height: 1.2
  • Letter-spacing: Optimizado para legibilidad

Características Casual

  • Fuente: Nunito
  • Peso: 700 (bold)
  • Line-height: 1.3
  • Letter-spacing: Natural

Clases Utility Adicionales

Pesos de Fuente

Light weight (.fw-light)

Normal weight (.fw-normal)

Medium weight (.fw-medium)

Semibold weight (.fw-semibold)

Bold weight (.fw-bold)

Bolder weight (.fw-bolder)

Tamaños de Fuente

Very large text (.fs-1)

Large text (.fs-2)

Medium large text (.fs-3)

Medium text (.fs-4)

Small text (.fs-5)

Very small text (.fs-6)

Estilos de Texto

Primary text (.text-primary)

Secondary text (.text-secondary)

Success text (.text-success)

Danger text (.text-danger)

Left aligned (.text-start)

Center aligned (.text-center)

Right aligned (.text-end)

Italic text (.fst-italic)

Underlined text

Muted text (.text-muted)

Variables SCSS

Variables de Configuración

// Configuración de modo
$typography-mode: 'professional' !default; // o 'casual'

// Fuentes profesionales
$font-professional-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
$font-professional-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

// Fuentes casuales
$font-casual-heading: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
$font-casual-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

💡 Cómo cambiar el modo

Para cambiar entre modo profesional y casual, simplemente modifica la variable $typography-mode en tu archivo SCSS:

  • $typography-mode: 'professional'; - Para sitios como calcunom.es
  • $typography-mode: 'casual'; - Para sitios como losdelaroja.es

Importación de Fuentes

Asegúrate de incluir las fuentes de Google Fonts en tu HTML:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Nunito:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
En esta página