Skip to main content

​
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:
ElementoFontePesoTamanho (Web)Tamanho (Mobile)
H1SUPERINEBold36px/2.25rem32px/2rem
H2Hanken GroteskBold30px/1.875rem28px/1.75rem
H3Hanken GroteskBold24px/1.5rem22px/1.375rem
H4Hanken GroteskMedium20px/1.25rem18px/1.125rem
H5Hanken GroteskMedium18px/1.125rem16px/1rem
H6Hanken GroteskMedium16px/1rem14px/0.875rem
ParágrafoHanken GroteskRegular16px/1rem16px/1rem
Texto pequenoHanken GroteskRegular14px/0.875rem12px/0.75rem
BotõesHanken GroteskMedium16px/1rem16px/1rem
RótulosHanken GroteskMedium14px/0.875rem12px/0.75rem
LegendasHanken GroteskLight12px/0.75rem10px/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:
ElementoAltura de LinhaEspaçamento de Parágrafo
Títulos (H1-H3)1.20.75em
Subtítulos (H4-H6)1.30.5em
Parágrafos1.51em
Texto pequeno1.40.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