Tipografia

O sistema tipográfico do FitLocus foi cuidadosamente selecionado para transmitir uma identidade moderna, premium e de fácil leitura em todas as plataformas.

Fontes Principais

O FitLocus utiliza duas fontes principais que se complementam para criar uma identidade visual coesa:

Hanken Grotesk

Fonte principal para textos, parágrafos e elementos de interface.

SUPERINE

Fonte secundária para títulos de destaque e elementos especiais.

Hanken Grotesk

Hanken Grotesk é uma fonte sans-serif moderna e versátil, utilizada como a fonte principal do FitLocus. Ela oferece excelente legibilidade em diferentes tamanhos e pesos, tornando-a ideal para uso em interfaces digitais.

Hanken Grotesk Bold

Hanken Grotesk SemiBold

Hanken Grotesk Medium

Hanken Grotesk Regular para textos e parágrafos.

Hanken Grotesk Light para textos secundários.

Características

Geométrica: Formas baseadas em princípios geométricos
Alta legibilidade: Excelente para textos em telas
Versátil: Funciona bem em diferentes tamanhos e pesos
Moderna: Aparência contemporânea e limpa

Pesos Utilizados

Bold (700): Títulos principais e elementos de destaque
SemiBold (600): Subtítulos e elementos importantes
Medium (500): Botões, rótulos e elementos interativos
Regular (400): Corpo de texto principal
Light (300): Textos secundários e informações adicionais

SUPERINE

SUPERINE é uma fonte display moderna com características geométricas e detalhes únicos, utilizada para títulos de destaque e elementos especiais que precisam de maior impacto visual.

SUPERINE BOLD

SUPERINE REGULAR

Características

Distintiva: Formas únicas que criam identidade visual forte
Geométrica: Baseada em formas geométricas com detalhes modernos
Impactante: Ideal para títulos e elementos de destaque
Premium: Transmite uma sensação de qualidade e sofisticação

Pesos Utilizados

Bold: Títulos principais e elementos de grande destaque
Regular: Subtítulos e elementos secundários de destaque

Hierarquia Tipográfica

A hierarquia tipográfica do FitLocus é estruturada para garantir clareza e consistência em todas as interfaces:

Elemento	Fonte	Peso	Tamanho (Web)	Tamanho (Mobile)
H1	SUPERINE	Bold	36px/2.25rem	32px/2rem
H2	Hanken Grotesk	Bold	30px/1.875rem	28px/1.75rem
H3	Hanken Grotesk	Bold	24px/1.5rem	22px/1.375rem
H4	Hanken Grotesk	Medium	20px/1.25rem	18px/1.125rem
H5	Hanken Grotesk	Medium	18px/1.125rem	16px/1rem
H6	Hanken Grotesk	Medium	16px/1rem	14px/0.875rem
Parágrafo	Hanken Grotesk	Regular	16px/1rem	16px/1rem
Texto pequeno	Hanken Grotesk	Regular	14px/0.875rem	12px/0.75rem
Botões	Hanken Grotesk	Medium	16px/1rem	16px/1rem
Rótulos	Hanken Grotesk	Medium	14px/0.875rem	12px/0.75rem
Legendas	Hanken Grotesk	Light	12px/0.75rem	10px/0.625rem

Espaçamento e Altura de Linha

O espaçamento e a altura de linha são fundamentais para garantir a legibilidade e o ritmo visual:

Elemento	Altura de Linha	Espaçamento de Parágrafo
Títulos (H1-H3)	1.2	0.75em
Subtítulos (H4-H6)	1.3	0.5em
Parágrafos	1.5	1em
Texto pequeno	1.4	0.75em

Implementação

Web (CSS)

/* Importação das fontes */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.yourfoundry.com/superine.css');

/* Variáveis CSS */
:root {
  --font-primary: 'Hanken Grotesk', sans-serif;
  --font-secondary: 'SUPERINE', sans-serif;
  
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
}

/* Estilos de tipografia */
h1 {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-4xl);
  line-height: 1.2;
  margin-bottom: 0.75em;
}

h2 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-3xl);
  line-height: 1.2;
  margin-bottom: 0.75em;
}

/* ... outros estilos ... */

p {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  line-height: 1.5;
  margin-bottom: 1em;
}

.small-text {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.button {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
}

Mobile (React Native)

// typography.ts
export const typography = {
  fonts: {
    primary: 'HankenGrotesk',
    secondary: 'SUPERINE',
  },
  weights: {
    light: '300',
    regular: '400',
    medium: '500',
    semiBold: '600',
    bold: '700',
  },
  sizes: {
    xs: 10,
    sm: 12,
    base: 16,
    lg: 18,
    xl: 20,
    '2xl': 22,
    '3xl': 28,
    '4xl': 32,
  },
  lineHeights: {
    tight: 1.2,
    snug: 1.3,
    normal: 1.5,
    relaxed: 1.4,
  },
};

// TextStyles.tsx
import { StyleSheet } from 'react-native';
import { typography } from './typography';

export const textStyles = StyleSheet.create({
  h1: {
    fontFamily: `${typography.fonts.secondary}-Bold`,
    fontSize: typography.sizes['4xl'],
    lineHeight: typography.sizes['4xl'] * typography.lineHeights.tight,
    marginBottom: 16,
  },
  h2: {
    fontFamily: `${typography.fonts.primary}-Bold`,
    fontSize: typography.sizes['3xl'],
    lineHeight: typography.sizes['3xl'] * typography.lineHeights.tight,
    marginBottom: 16,
  },
  // ... outros estilos ...
  body: {
    fontFamily: `${typography.fonts.primary}-Regular`,
    fontSize: typography.sizes.base,
    lineHeight: typography.sizes.base * typography.lineHeights.normal,
    marginBottom: 16,
  },
  small: {
    fontFamily: `${typography.fonts.primary}-Regular`,
    fontSize: typography.sizes.sm,
    lineHeight: typography.sizes.sm * typography.lineHeights.relaxed,
  },
  button: {
    fontFamily: `${typography.fonts.primary}-Medium`,
    fontSize: typography.sizes.base,
  },
});

Boas Práticas

Uso Correto

Use SUPERINE apenas para títulos principais e elementos de destaque
Mantenha a consistência na hierarquia tipográfica em todas as interfaces
Respeite os pesos de fonte designados para cada elemento
Mantenha o contraste adequado entre texto e fundo para garantir acessibilidade

Uso Incorreto

Evite usar SUPERINE para textos longos ou parágrafos
Não misture mais de 2-3 pesos diferentes da mesma fonte em uma única tela
Evite tamanhos de fonte muito pequenos (menores que 12px/10pt)
Não use estilos de texto que comprometam a legibilidade (como itálico excessivo)

Acessibilidade

Para garantir que a tipografia seja acessível a todos os usuários:

Mantenha um contraste mínimo de 4.5:1 para texto normal e 3:1 para texto grande
Permita que o texto seja redimensionado até 200% sem perda de conteúdo
Evite usar apenas cor para transmitir informações
Considere usuários com dislexia ao definir espaçamento entre linhas e parágrafos

Introdução

Arquitetura

Design

Regras de Negócio

Exemplos de Integração

Diagramas

Tutoriais

Tipografia

Tipografia

Fontes Principais

Hanken Grotesk

SUPERINE

Hanken Grotesk

Hanken Grotesk Bold

Hanken Grotesk SemiBold

Hanken Grotesk Medium

Características

Pesos Utilizados

SUPERINE

SUPERINE BOLD

SUPERINE REGULAR

Características

Pesos Utilizados

Hierarquia Tipográfica

Espaçamento e Altura de Linha

Implementação

Web (CSS)

Mobile (React Native)

Boas Práticas

Uso Correto

Uso Incorreto

Acessibilidade

​Tipografia

​Fontes Principais

Hanken Grotesk

SUPERINE

​Hanken Grotesk

​Hanken Grotesk Bold

​Hanken Grotesk SemiBold

​Hanken Grotesk Medium

​Características

​Pesos Utilizados

​SUPERINE

​SUPERINE BOLD

​SUPERINE REGULAR

​Características

​Pesos Utilizados

​Hierarquia Tipográfica

​Espaçamento e Altura de Linha

​Implementação

​Web (CSS)

​Mobile (React Native)

​Boas Práticas

​Uso Correto

​Uso Incorreto

​Acessibilidade

Tipografia

Fontes Principais

Hanken Grotesk

Hanken Grotesk Bold

Hanken Grotesk SemiBold

Hanken Grotesk Medium

Características

Pesos Utilizados

SUPERINE

SUPERINE BOLD

SUPERINE REGULAR

Características

Pesos Utilizados

Hierarquia Tipográfica

Espaçamento e Altura de Linha

Implementação

Web (CSS)

Mobile (React Native)

Boas Práticas

Uso Correto

Uso Incorreto

Acessibilidade