20.12.2024

Mudando Fonte e Tamanho da Fonte em HTML: Tag de Input

Resumo Rápido

Se você precisar mudar urgentemente a fonte de um elemento input, deve aplicar as propriedades CSS font-family e font-size:

<input type="text" style="font-family: Arial, sans-serif; font-size: 16px;">

Agora o elemento <input> está estilizado usando a fonte Arial com tamanho de 16px.

Aplicação Geral de Estilo: Usando Seletores

Evite estilos inline em favor de seletores CSS:

/* Seletor por ID */
#meuInputEstiloso {
  font-family: 'Courier New', monospace;  // O charme de uma máquina de escrever sempre está presente
  font-size: 18px;
}

Aplique este estilo no seu HTML:

<input type="text" id="meuInputEstiloso">

Gerencie estilos globalmente utilizando seletor de atributos para todos os elementos input:

/* Seletor de Atributo */
input[type=text] {
  font-family: 'Verdana', sans-serif;   // Para um visual moderno e limpo
  font-size: 14px;
}

Use Fontes Web

Graças ao CSS3, você pode aproveitar fontes web, como as do Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">

Transforme campos de input padrão:

input {
  font-family: 'Poppins', sans-serif;   // Um pouco de variedade no arsenal de fontes é apreciado
  font-size: 16px;
}

Responsividade e Interação: Estilos Responsivos e de Hover

A web moderna é impensável sem responsividade. Use unidades dinâmicas para se adaptar a diferentes tamanhos de tela:

input {
  font-size: calc(1vmin + 10px);    // O tamanho da fonte é importante
}

Adicione interatividade utilizando estilos de hover:

input:hover {
  background-color: #f0f0f0;
  font-size: 22px;   // Surpresa! A fonte aumenta quando o cursor passa por cima
}

Visualização

Imagine que estamos "vestindo" nosso <input>:

<input style="font-family: 'Comic Sans MS', cursive; font-size: 20px;">

Transformando a aparência do nosso <input>:

Antes:    [🎽]
Depois:   [👕]

Diante de você está um <input> estilizado na fonte Comic Sans com tamanho de 20px.

Princípios de Bom Design e Acessibilidade

Um bom design requer consistência. Ao ajustar estilos, lembre-se da acessibilidade:

input {
  font-size: larger; /* Simplifica a leitura para usuários com deficiências visuais */
}

Utilizar o atributo aria-label auxilia softwares de leitura de tela:

<input type="text" aria-label="Nome de Usuário">

Encontre o equilíbrio entre soluções estilosas e usabilidade para criar uma melhor experiência para o usuário.

Estilizando com Base no Contexto

Escolha estilos de acordo com o contexto. Para notas curtas, fontes menores funcionam bem:

input.shortInfo {
  font-family: 'Tahoma', sans-serif;    // Compacta e substancial
  font-size: 12px;
}

Para campos críticos ou exibições de erro, use estilos chamativos:

input.error {
  font-family: 'Impact', sans-serif;  // Uma fonte ousada para mensagens importantes
  font-size: 14px;
  color: #FF0000;
}

Recursos Úteis

1. font | CSS-Tricks — Um guia completo sobre a propriedade abreviada font em CSS.
2. <input>: O elemento Input (Entrada de Formulário) - HTML: Linguagem de Marcação HiperTexto | MDN — Documentação oficial do MDN sobre estilização de elementos <input> com CSS.
3. Desenhando Formulários Web Eficientes: Estrutura, Entradas, Rótulos e Ações — Smashing Magazine — Insumos profundos sobre criação de formulários web altamente eficientes, incluindo escolhas de fonte e estilo.
4. font-size | Codrops — Um reference abrangente para entender e usar font-size em CSS.
5. Tipografia em dez minutos | Tipografia Prática de Butterick — Um guia concentrado e extenso sobre tipografia, útil no contexto de design web.

Video

Navigation