Configurações de fonte

Família da fonte

Ponto:
Definir o uso de Fonte, o que afeta diretamente a impressão de consistência de Botão e Marcas.

O que muda com essa configuração:
O mesmo texto pode mudar sua credibilidade e simpatia com a fonte.

Dica de ajuste:
Se a fonte se desviar muito do texto principal Fonte, ela parecerá desconfortável, portanto, é seguro começar combinando-a com a mesma linha de todo o site.

Itens de configuração.

• Lista de Fonte (Padrão / Sistema / Fonte do tema): selecione a fonte usada e ajuste o tom e a legibilidade da marca.
• Weight (100-900): define a espessura do Fonte e ajusta a prioridade das informações; compatível com Responsivo, é possível especificar Peso diferentes para cada dispositivo.
• Edit Font: abre a tela do Configurações de fonte para ajuste detalhado do tipo de letra.

Nota: O Família da fonte e o Peso no estado Hover também podem ser definidos individualmente. Se você precisar de Alterar para cada dispositivo, ative a comutação Responsivo.

Limitação de deslocamento de layout no Hover:
alterações em Hover, no Tamanho do ícone do Botão e no Texto podem mudar a largura dos caracteres e causar deslocamento de layout (layout shift). Para evitar isso, fixe a Largura / Altura do Botão ou reduza a variação de Peso (por exemplo, de 400 para cerca de 500).

Tamanho da fonte

Ponto:
Definir o caractere Tamanho do ícone. Essa é uma configuração importante que afeta diretamente a legibilidade e a taxa de cliques.

O que muda com essa configuração:
Se for muito pequeno, especialmente em SP, o apelo pretendido não será transmitido.

Dica de ajuste:
É menos provável que ocorra um colapso se você ajustá-la como um conjunto, seja ajustando-a no PC e aumentando-a um nível no SP, seja reduzindo o número de linhas.

Itens de configuração.

• Selecione Predefinição (Padrão / Tema / Personalizado): selecione Tamanho do íconePredefinição e defina rapidamente o valor padrão para aplicar.
• Custom Size: especifique o caractere Tamanho do ícone diretamente com um valor numérico e faça o ajuste fino.
• Unit (px / em / rem / vw): selecione Tamanho do íconeUnidade e determine o comportamento fixo/variável.
• Responsivo: ativa configurações individuais específicas do dispositivo e evita o colapso do exibição.
• Editar tamanho da fonte: altera a configuração Tamanho do ícone para Editar e otimiza a aparência de cada dispositivo.

Notas: Use em / rem para especificar relativo ao navegador ou ao caractere base Tema Tamanho do ícone. Usando vw, o caractere Tamanho do ícone flutua com a largura da janela de visualização, o que é útil para designs Responsivo, mas é recomendável verificar os valores mínimo e máximo, pois há casos de estados Hover extremamente grandes/pequenos Tamanho da fonte também pode ser definido individualmente.

Altura da linha

Ponto:
Defina Altura da linha quando exibição de várias linhas. Ajusta o equilíbrio entre legibilidade e densidade.

O que essa configuração altera: Se o Altura da linha estiver muito cheio, a velocidade de reconhecimento diminuirá; se estiver muito largo, a coesão diminuirá.

Dica de ajuste:
Defina o padrão em torno de 1,2 a 1,6 e torne-o um pouco mais largo à medida que a quantidade de texto aumenta para obter estabilidade.

Itens de configuração.

• Selecione Predefinição (Default / Tight / Normal / Loose etc.): selecione Altura da linhaPredefinição para ajustar rapidamente a legibilidade.
• Custom Line Height: especifique Altura da linha numericamente para otimizar a legibilidade em duas linhas.
• Unit (Nenhum / px / em / rem / %): especifique Unidade de Altura da linha e selecione uma proporção ou um valor fixo.
• Responsivo: permite configurações individuais específicas do dispositivo e evita o colapso de exibição.

Observação: A especificação de UnidadeNenhum (por exemplo, 1,5) é calculada como uma proporção para Tamanho da fonte; a proporção é mantida mesmo se Tamanho da fonte mudar, portanto, uma especificação UnidadeNenhum é recomendada para projetos Responsivo. O valor de Padrão é 1,2; Altura da linha no estado Hover também pode ser definido individualmente. Controle por variáveis CSS: Altura da linha (Altura da linha) e Espaçamento entre letras (Espaçamento entre letras) são controlados internamente apenas pelas variáveis CSS (--line-height-pc / --letter-spacing-pc etc.). Variável Estilo (--line-height-pc / --letter-spacing-pc etc.). Ela é herdada por elementos filhos por meio da variável CSS em vez de Estilo em linha, de modo que não interfere com Micro texto, Sub texto e outros elementos internos Configurações de fonte.

Espaçamento entre letras

Ponto:
Define o espaçamento entre os caracteres. Use para ajustar as nuances da sensação, do luxo e da legibilidade do título.

O que essa configuração altera: Embora a impressão visual mude significativamente, o excesso de configuração pode levar a uma legibilidade ruim.

Dica de ajuste:
Em japonês, é mais fácil lidar com pequenos ajustes do equivalente a 0-0,5px, em vez de extremamente largos.

Itens de configuração.

• Select Predefinição (Tight / Normal / Wide etc.): selecione o espaçamento de caracteres Predefinição e ajuste a impressão da densidade dos caracteres.
• Valor personalizado: selecione o espaçamento de caracteres Personalizado para ajustar a legibilidade e o design.
• Unit (px / em / rem / %): seleciona o espaçamento entre caracteres Unidade e determina como ele é ajustado, fixo ou relativo PadrãoUnidade é em.
• Responsivo: ativa configurações individuais específicas do dispositivo e evita o colapso do exibição.

Nota: em Para o Unidade, o espaçamento entre letras é determinado pela proporção em relação ao Tamanho da fonte. Exemplo: 0,05em é o espaçamento para 5% de Tamanho da fonte. Valores negativos também podem ser usados para fechar caracteres, mas cuidado com a redução da legibilidade; o estado Hover do Espaçamento entre letras também pode ser definido individualmente.