11

Isto é mais um problema por mudança do tipo da fonte, o que tem afetado vários textos, vejam como esta (este problema não ocorre nos sites que estão em inglês devido ao tamanho do texto):

bug da quebra de texto

O problema é que agora estão usando o <h3>:

h3 {
    font-size: 15px;
}

E o font-variant: small-caps;:

.topbar-dialog .header h3, .topbar-dialog .header h3 a {
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif !important;
    color: #6a737c;
    font-weight: bold;
    font-variant: small-caps;
    line-height: .8;
    display: inline-block;
}

Eu pessoalmente acho desnecessário esta diferença de tamanho, os títulos estão dentro de divs com cores que contrastam, as fontes podem ter o mesmo tamanho, é apenas uma sugestão.

10
  • Poderia apontar pra mim? Não estou vendo o problema
    – Maniero Mod
    4/08/2016 às 17:56
  • @bigown tente abrir uma aba privativa, pode ser o cache 4/08/2016 às 17:57
  • Não estou vendo nem na sua imagem colada na pergunta :)
    – Maniero Mod
    4/08/2016 às 17:58
  • @bigown olhe em seu console, deve ser um problema de rede, ou algum adblock mal configurado 4/08/2016 às 17:59
  • @bigown procura no fundo por "blog da empresa" que não teve espaço nessa linha cinzenta e caiu para baixo.
    – Sergio
    4/08/2016 às 17:59
  • @Sergio agora vi, ele sobrepõe um pouco sim.
    – Maniero Mod
    4/08/2016 às 18:00
  • Sergio @bigown editado a imagem (gostaria muito que os comentários suportassem ao menos 3 usuários com @) 4/08/2016 às 18:03
  • Acho que só "Mais Comunidades" já está bom, tem "stack exchange" no topo, meio e rodapé do site, sei lá se tem necessidade de repetir isso em todo canto. 4/08/2016 às 18:18
  • @renan posso estar enganado, mas os do rodapé são apenas os mais populares e ali o foco deve ser SEO. Já o do botão é totalmente voltado ao usuário, principalmente os autenticados. 4/08/2016 às 18:28
  • No meu está direito.
    – Jorge B.
    5/08/2016 às 8:11

2 Respostas 2

8

Troquei as strings por versões mais curtas:

  • "Mais comunidades do stack exchange" -> "Mais comunidades Stack Exchange"
  • "Encontre uma comunidade do Stack Exchange" -> "Procure uma comunidade"

Atualização

Diminuir as strings não deu jeito, avisei os designers e vamos ver...

8
  • Até os textos soam melhor, só uma nota, isso esta errado "Mais comundiades Stack Exchange" (comundiades). 4/08/2016 às 18:07
  • @GuilhermeNascimento Fui olhar, só errei aqui no post. No Transifex tá certo!
    – Gabe
    4/08/2016 às 18:15
  • 1
    Engraçado, pra mim não sobrepunha nem com o texto mais longo. Deve depender de browser/OS/fontes.
    – bfavaretto
    4/08/2016 às 18:23
  • @bfavaretto Aqui também não. Mas eu tenho um monitor gigante, então....
    – Gabe
    4/08/2016 às 18:24
  • Problema parece ocorrer no Windows8 apenas, não pude testar outros, de inicio pensei ser um problema de alguma fonte que instalei, mas em outro computar limpo o problema ocorreu também. Vou analisar e depois lhe dou um retorno. 5/08/2016 às 18:47
  • @GuilhermeNascimento ainda ocorre, mesmo depois da mudança de strings?
    – Gabe
    5/08/2016 às 19:36
  • @Gabe desculpe a demora, ocorre sim, é que estou tentando instalar outro sistema operação em uma maquina virtual pra testar se é um problema com as fontes no momento da renderização. 8/08/2016 às 19:35
  • @Gabe obrigado, parece que resolveram, não achei qualquer menção no meta.stackexchange sobre o problema, todavia esta corrigido. 11/08/2016 às 23:12
1

O problema ainda existia a alguns dias, todavia notei hoje que foi resolvido, não devido a mudança de texto, mas sim do CSS, antes era assim (como citei na pergunta):

.topbar-dialog .header h3, .topbar-dialog .header h3 a {
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif !important;
    color: #6a737c;
    font-weight: bold;
    font-variant: small-caps;
    line-height: .8;
    display: inline-block;
}

Atualmente esta assim:

.topbar-dialog .header h3, .topbar-dialog .header h3 a {
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif !important;
    color: #6a737c;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    line-height: .8;
    display: inline-block;
}

Trocaram font-variant: small-caps; por font-size: 11px; + text-transform: uppercase;, o que parece que resolveu.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .