Milligram: Os tamanhos dos cabeçalhos precisam de ajuste.

Criado em 23 nov. 2016  ·  18Comentários  ·  Fonte: milligram/milligram

Comecei a usar o Miligrama 1.2.0 principalmente para uma boa folha de estilo para gerar documentação. Comparado a muitos frameworks CSS, parece ótimo no papel.

Mas os cabeçalhos! Eu não consigo dizer a diferença entre <h2> e <h3> , francamente. O Chrome está me dizendo que <h2> está recebendo 4.2rem e que <h3> está recebendo 3.6rem , mas não dá para perceber olhando para ele.

O miligrama poderia mudar para tamanhos de título que realmente pareçam gradualmente menores? Ou talvez você pudesse me indicar um framework CSS que já oferece um bom estilo orientado para documentos. Obrigado

improvement question

Comentários muito úteis

@nateberkopec Entendi, faz sentido. Vou dar um PR para isso. vamos ver como eles se parecem

Todos 18 comentários

Tenho que dizer que concordo. Usuário ávido do framework, mas os cabeçalhos deixam a desejar.

Olá @garretwilson @nateberkopec

Bom problema, pessoal! Vou fazer alguns testes para ver como podemos melhorar isso. Sobre isso, você tem alguma sugestão?

BTW, gostaria de compartilhar com vocês um novo recurso que foi adicionado recentemente para garantir a qualidade do framework. Ele analisa e relata quaisquer alterações feitas na estrutura. Se houver algum detalhe que passe despercebido, será identificado após comparação com a versão anterior. Este é o teste de regressão visual e deve ajudar nas melhorias visuais das próximas versões.

@cjpatoilo A escala tipográfica tradicional é abordada aqui e aqui

Acho que o principal problema aqui é que a escala não é seguida para h1 e h2 - eles precisam ser maiores.

Com base nesses recursos, aqui vai uma sugestão:

h1
    font-size: 6.0rem

h2
    font-size: 4.8rem

h3
    font-size: 3.6rem

h4
    font-size: 2.4rem

h5
    font-size: 2.1rem

h6
    font-size: 1.8rem

Estou indeciso se gosto de coisas tão grandes. Mas, de qualquer forma, ainda não consigo dizer muito a diferença entre h2 e h3. Estou pensando que eles precisam diminuir de tamanho mais rápido.

Pode procurar ideias aqui:

Se você quiser um tamanho de tipo de corpo grande (como o Miligrama faz com 16px), h1 provavelmente será bem grande. É assim que a tipografia funciona. Você não pode ter cabeçalhos pequenos e texto de corpo grande, tentar empinar 5 tamanhos diferentes de cabeçalhos em um intervalo muito pequeno significa que você não pode diferenciar os cabeçalhos (como agora). O miligrama precisa tornar o texto do corpo menor (não sou a favor disso) ou tornar os cabeçalhos maiores.

Aqui está outra ferramenta para mexer com escalas tipográficas .

Se você concordar que H6 seja do mesmo tamanho que a cópia do corpo, aqui está uma alternativa:

h1
    font-size: 4.8rem

h2
    font-size: 3.6rem

h3
    font-size: 2.4rem

h4
    font-size: 2.1rem

h5
    font-size: 1.8rem

h6
    font-size: 1.6rem

Se você concordar com H6 sendo do mesmo tamanho que a cópia do corpo ...

Eu apenas experimentei os três primeiros deles, e eu gosto deles muito mais !! E estou bem com H6 sendo do mesmo tamanho que o corpo. Eu recomendo que você apenas coloque H6 em negrito ou algo assim por padrão. Mas mesmo se você não fizer isso, eu pessoalmente raramente irei descer para H6 de qualquer maneira.

Os tamanhos das fontes móveis também precisarão ser corrigidos - eles são muito semelhantes para serem utilizáveis. Eu recomendo apenas usar a mesma escala para celular.

Então, isso está programado para entrar em um novo lançamento em breve?

Portanto, vejo que isso não entrou na v1.2.2. Alguma razão para quê? Eu preciso fazer uma solicitação de pull?

Olá @garretwilson @nateberkopec. Bom trabalho. Isso significa muito para mim ♥

A discussão está aberta! Este framework é um projeto de código aberto e qualquer pessoa pode contribuir. Espero que mais pessoas tenham o mesmo interesse e contribuam como você. Vou repassar tudo o que foi falado aqui e vou trabalhar nisso o mais rápido possível.

Ei @garretwilson npm install ..e relaxe!

Ei @garretwilson npm install

Você poderia esclarecer o que quer dizer com isso? Baixei a v1.2.2 do site e parece que não foi incluída. Você está dizendo que "npm install" me dará algo mais recente que não foi lançado? É a versão v1.2.3? Sou como um computador, facilmente confuso, a menos que você me diga claramente.

..e relaxe!

Eu só estava verificando o status porque não tinha certeza se isso foi programado ou lançado ou o quê. Eu também estava tentando deixar claro que estava me oferecendo para ajudar, mas não tinha certeza se alguém já tinha feito isso. Deixe-me saber como posso ajudar.

@nateberkopec não é o h1 existente em 5.0rem (50px)? Você está sugerindo que o diminuamos? para 4,8 rem?

@sudheerDev Não sou tipógrafo, só sei o que leio na internet. Se você ler os links acima sobre escalas tipográficas, verá porque é 4,8 em vez de 5 (basicamente - o espaçamento entre os tamanhos dos cabeçalhos segue um padrão).

@nateberkopec Entendi, faz sentido. Vou dar um PR para isso. vamos ver como eles se parecem

@nateberkopec obrigado pelo PR !. eu fiquei ocupado então não pude empurrar

@garretwilson @nateberkopec @sudheerDev Finalmente consegui lançar a nova versão com essas contribuições. Fiz uma pesquisa dos tamanhos dos cabeçalhos com base nos principais frameworks e finalmente cheguei em uma situação mais adequada do que foi solicitado. Espero que você goste!

Os tamanhos dos cabeçalhos fazem muito mais sentido agora, obrigado.

Esta página foi útil?
0 / 5 - 0 avaliações