Milligram: Los tamaños de los títulos necesitan un ajuste.

Creado en 23 nov. 2016  ·  18Comentarios  ·  Fuente: milligram/milligram

Comencé a usar Milligram 1.2.0 principalmente para obtener una buena hoja de estilo para generar documentación. En comparación con muchos marcos CSS, se ve muy bien en papel.

¡Pero los encabezados! Francamente, no puedo distinguir la diferencia entre <h2> y <h3> . Chrome me dice que <h2> obtiene 4.2rem y que <h3> obtiene 3.6rem , pero no se puede saber con solo mirarlo.

¿Podría Milligram cambiar a tamaños de encabezado que en realidad parezcan gradualmente más pequeños? O tal vez podría indicarme un marco CSS que ya proporciona un buen estilo orientado a los documentos. Gracias

improvement question

Comentario más útil

@nateberkopec Entendido , tiene sentido. Daré un PR por esto. veamos como se ven

Todos 18 comentarios

Tengo que decir que estoy de acuerdo. Ávido usuario del marco, pero los encabezados dejan algo que desear.

Hola @garretwilson @nateberkopec

¡Buen problema, chicos! Haré algunas pruebas para ver cómo podemos mejorar esto. Sobre esto, ¿tiene alguna sugerencia?

Por cierto, me gustaría compartir con ustedes una nueva característica que se ha agregado recientemente para garantizar la calidad del marco. Analiza e informa cualquier cambio que se realice en el marco. Si hay algún detalle que pasa desapercibido se identificará después de compararlo con la versión anterior. Esta es la prueba de regresión visual y debería ayudar con las mejoras visuales de las próximas versiones.

@cjpatoilo La escala tipográfica tradicional se cubre aquí y aquí

Creo que el principal problema aquí es que no se sigue la escala para h1 y h2; deben ser más grandes.

Según esos recursos, aquí hay una sugerencia:

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

Estoy indeciso si me gustan las cosas tan grandes. Pero de todos modos todavía no puedo distinguir mucho entre h2 y h3. Creo que necesitan disminuir de tamaño más rápido.

Quizás busque aquí ideas:

Si desea un tamaño de tipo de cuerpo grande (como lo hace Milligram en 16px), h1 probablemente será bastante grande. Así es como funciona la tipografía. No puede tener encabezados pequeños y texto de cuerpo grande, tratar de incluir 5 tamaños de encabezado diferentes en un rango demasiado pequeño significa que no puede distinguir los encabezados (como ahora). Milligram necesita hacer que el texto del cuerpo sea más pequeño (no estoy a favor de eso) o hacer que los encabezados sean más grandes.

Aquí hay otra herramienta para jugar con escalas tipográficas .

Si está de acuerdo con que H6 tenga el mismo tamaño que el texto del cuerpo, aquí hay una 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

Si está de acuerdo con que H6 tenga el mismo tamaño que el texto del cuerpo ...

¡Acabo de probar los tres primeros y me gustan mucho más! Y estoy de acuerdo con que el H6 sea del mismo tamaño que el cuerpo. Te recomiendo que pongas H6 en negrita o algo por defecto. Pero incluso si no lo hace, yo personalmente rara vez bajaré a H6 de todos modos.

Los tamaños de fuente móviles también deberán corregirse: son demasiado similares para ser utilizables. Recomendaría usar la misma escala para dispositivos móviles.

Entonces, ¿está programado para una nueva versión pronto?

Entonces veo que esto no entró en v1.2.2. ¿Alguna razón por la que? ¿Necesito hacer una solicitud de extracción?

Hola @garretwilson @nateberkopec Buen trabajo. Esto significa mucho para mi ♥

¡La discusión está abierta! Este marco es un proyecto de código abierto y cualquiera puede contribuir. Espero que más personas tengan el mismo interés y contribuyan como tú. Repasaré todo lo que se ha hablado aquí y trabajaré en ello lo antes posible.

Hola @garretwilson npm install .. ¡y

Hola @garretwilson npm install

¿Podría aclarar lo que quiere decir con eso? Descargué v1.2.2 del sitio y no parecía estar incluido. ¿Estás diciendo que "npm install" me dará algo más reciente que no ha sido lanzado? ¿Es la versión v1.2.3? Soy como una computadora, se confunde fácilmente a menos que me lo digas.

..y relájate!

Solo estaba verificando el estado porque no tenía claro si esto estaba programado o publicado o qué. También estaba tratando de dejar en claro que me estaba ofreciendo para ayudar, pero no estaba seguro de si alguien ya lo había hecho. Hágame saber cómo puedo ayudar.

@nateberkopec ¿no es el h1 existente en 5.0rem (50px)? ¿Está sugiriendo que lo disminuyamos? a 4.8rem?

@sudheerDev No soy tipógrafo, solo sé lo que leo en Internet. Si lee los enlaces anteriores sobre escalas tipográficas, verá por qué es 4.8 en lugar de 5 (básicamente, el espaciado entre los tamaños de encabezado sigue un patrón).

@nateberkopec Entendido , tiene sentido. Daré un PR por esto. veamos como se ven

@nateberkopec gracias por las relaciones públicas !. Estaba ocupado, así que no pude presionar

@garretwilson @nateberkopec @sudheerDev Finalmente pude lanzar la nueva versión con estas contribuciones. Hice una búsqueda de los tamaños de los encabezados en base a los marcos principales y finalmente llegué a una situación más adecuada de lo solicitado. ¡Espero que te guste!

Los tamaños de los títulos tienen mucho más sentido, ahora, gracias.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

enkota picture enkota  ·  6Comentarios

swalberg picture swalberg  ·  6Comentarios

luisaceituno picture luisaceituno  ·  6Comentarios

mterron picture mterron  ·  6Comentarios

roryprimrose picture roryprimrose  ·  7Comentarios