Conceito

Na VERT, usamos a tipografia para apresentar o design e conteúdo da maneira mais clara e eficiente possível.

Fontes VERT

Fonte Primária

A fonte Lato foi escolhida especificamente para uso em peças digitais e impressos de materiais de comunicação. A versão Light da fonte é usada frases curtas e detalhes. A versão Regular é usada em texto corrido. A versão Bold é usada para frases/palavras colocadas em evidência e títulos.

A Lato é uma fonte Google. Para utilizar a fonte, faça o download
https://fonts.google.com/specimen/Lato

Lato Light
Lato Regular
Lato Bold

Fonte secundária

A fonte Abril Fatface foi escolhida especificamente para uso em detalhes como grandes números em destaque. Ela possui apenas uma versão, que é Regular. Sua versão pode ser usada em peças de comunicação como postagens em redes sociais e impressos.

A Abril Fatface é uma fonte Google. Para utilizar a fonte, faça o download https://fonts.google.com/specimen/Abril+Fatface#standardstyles

Abril Fatface

Fonte de sistema

A fonte Segoe UI foi escolhida especificamente para uso em e-mail, apresentações, documentos e relatórios. A versão Light da fonte é usada em frases curtas e detalhes. A versão Regular é usada em texto corrido. A versão SemiBold é usada em frases/palavras colocadas em evidência e títulos.

A Segoe UI é uma fonte comum do sistema operacional Windows e não precisa ser instalada

Segoe UI Light
Segoe UI regular
Segoe UI Semibold

Estilos

Escala de tipo é usado para todos os títulos, legendas, corpo e legendas, criando uma experiência de tipografia coesa. A hierarquia é comunicada por meio de diferenças no peso da fonte (leve, médio, regular), tamanho, espaçamento entre letras e maiúsculas e minúsculas.

Escala de fonte VERT-C Ops

Escala Tipografia Variações Tamanho Caixa
H1 Lato Light 30 Caixa baixa
H2 Lato Bold 24 Caixa baixa
H3 Lato Bold 21 Caixa baixa
H4 Lato Bold 16 Caixa baixa
Body 1 Lato Regular 16 Caixa baixa
Body 2 Lato Regular 14 Caixa baixa
Button Lato Bold 14 Caixa baixa
Label 1 Lato Regular 13 Caixa baixa
Label 2 Lato Regular 12 Caixa baixa

Escala de fonte VERT

Escala Tipografia Variações Tamanho Caixa
Hero Lato Light 40 Caixa alta
H1 Lato Light 32 Caixa alta
H2 Lato Light 24 Caixa alta
H3 Lato Black 16 Caixa alta
Body 1 Lato Regular 18 Caixa baixa
Body 2 Lato Regular 16 Caixa baixa
Button Lato Bold 14 Caixa baixa
Itens 1 Lato Bold 14 Caixa baixa
Input Lato Regular 14 Caixa baixa
Label Lato Bold 12 Caixa baixa

Unidade de tamanho de fonte

Utilizamos a unidade REM para expressar o tamanho da fonte na web.

Tamanho rem
1.0 0.0625rem

Exemplo de conversões

Tamanho rem
12 0.75rem
16 1rem
24 1.5rem

Os navegadores da Web calculam o REM (o tamanho da raiz em) com base no tamanho do elemento raiz. O padrão para navegadores modernos é 16px, então a conversão é SP_SIZE / 16 = rem.

Aplicando a escala da tipografia

A escala da tipografia aparece como texto nos componentes e no layout geral. Os atributos de tipografia podem usar valores personalizados para a tipografia de letra, fonte, caixa, tamanho e espaçamento entre letras.

Trabalhamos
de forma modular

Somos a única techfin que se adequa às suas necessidades, sejam elas grandes ou pequenas. Aqui, o objetivo é entregar o que você precisa e a melhor estrutura de operação para o seu negócio, não o que é mais fácil para nós.

Saiba mais como fazemos isso

Headlines

Na escala de tipo, os títulos variam de acordo com a escala da fonte. Os títulos são o maior texto na tela, reservados para textos ou numerais curtos e importantes.

Para títulos, você pode escolher uma fonte expressiva, como estilo de exibição, manuscrito ou script. Esses designs de fontes não convencionais têm detalhes e complexidade que ajudam a atrair a atenção.

Body

O texto é normalmente usado para escrita de formato longo, pois funciona bem para tamanhos de texto pequenos. Para seções de texto mais longas.

Button

O texto do botão é uma frase de chamariz usada por diferentes tipos de botões (como texto, botões contidos e contornados) e em guias, caixas de diálogo e cartões.

Label

Legenda e texto sobrelinhado (texto com uma linha acima) são os menores tamanhos de fonte. Eles são usados com moderação para fazer anotações em imagens ou para apresentar um título.

Comprimento da linha

Defina o ambiente de leitura de acordo com o leitor. Linhas largas de texto são difíceis de ler e tornam mais difícil para as pessoas se concentrarem. Embora não haja uma maneira certa de medir a largura perfeita para o texto, um bom objetivo é ter entre 60 e 100 caracteres por linha, incluindo o espaçamento. Definir um comprimento de linha ideal dividirá o conteúdo em informações de fácil digestão.

Wielding adventures levels finally Bolgers hand houses torturing mere eaves 40 encourage. Count taking northeast asked Arathorn smelling poisoned blunt fever prong shield entirely. Loyal cracking Mordor's oil blades dispatch! Barred hence moaning fast Southrons pointy? Gardeners Nûmenor effect wax mark.

60 - Muito Curto

He nudge Tooks total market ending clear bellows. I can cut across country easily enough. Holes living beasts binding Dî beautifully. Tie unfought Barahir fates strong fortune? Collared fears Gandalf's celebrate.

80 - Distância ok

Allow hithlain light's Bolgers fruitless squash beyond 14 eats information unwise faith! You've cannot hello Galion. Weren't victorious engage Sigrid levels cat screams? A wizard is never late, Frodo Baggins. Nor is he early. He arrives precisely when he means to. Supplies challenge mouse canceled track single Ring-bearer deal. Job raised Dwarrowdelf canopy shapes unpredictable group garden cousin's. Carrying s poor over why impossible Tilda. Kili's whithertos birthday there'll fishes sticky dangerous!

100 - Distância ideal

Swords are no more use here. Risked cruel Pip lay well-earned nine hiding. Bicker delicate mantelpiece bairns purring content world Galeton forgiven test nighttime. Windlance Bungo quick rejoice. Calls talisman devouring track piled fellow's Dale grey dignity. Nose plans gob strayed horror Mereth fool having! Approaching received Thorin's heirloom admire intent setting! Attack conscience insult Radagast herald infected bleed. Dines Shadowfax darken. Uproar seeps hawk Bofur half chicken.

110 - Muito grande