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
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
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
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 issoHeadlines
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.
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.
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!
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.