Elegir un peso de fuente y una altura de línea apropiados

Por lo general, un ingeniero de back-end, me estoy aventurando en el mundo del diseño vectorial, tratando de no lastimarme en el camino.

Soy consciente de que estoy luchando para dimensionar las cosas, con mi guía de estilo de tipografía casera:

guía de estilo de tipografía casera

Estoy tratando de combinar estas fuentes con un estilo gráfico que debería ser bastante preciso, ver a continuación:

conciliar conflictos de tamaño

Parece que no importa el tamaño de mis íconos, el grosor de línea, el radio de esquina, las alturas de línea, los tamaños de fuente dentro de esas alturas de línea o similares. Nunca se me ocurre un "ritmo vertical" adecuado, aquí representado con 14pxtexto ponderado en negrita, dentro 19pxde la altura de 40pxuna 4pxlínea. 8pxesquinas

No quiero respuestas absolutas del tipo "haz que tu texto tenga una altura X", pero ¿hay un lugar para comenzar, con los elementos estructurales, como los íconos y las líneas, y luego trabajar hacia atrás hasta una altura de línea y un tamaño de fuente adecuados?

¿Altura de línea de 30, con un tamaño de fuente de ~20/22, por ejemplo, para que coincida con el tamaño de los íconos?

¿Puedes aclarar qué quieres lograr específicamente, cuál debería ser el "ritmo vertical"? ¿Es solo una cuestión de alinear bien el texto y los íconos, o también está tratando de igualar el peso visual del ícono? PD Mientras edita la pregunta, es posible que también desee editar el título para dejar en claro que está buscando un proceso de selección del peso y la altura del texto para complementar un icono.
establezca su altura de línea igual a la altura del icono para el texto del punto muerto; si desea publicar sus íconos en jsfiddle, estaré encantado de mostrarle lo que quiero decir.

Respuestas (1)

Esto puede depender de lo que esté tratando de crear. Si desea tener texto junto a un ícono, puede considerar usar elementos de la lista con los íconos como viñetas personalizadas. Esto centraría la imagen automáticamente con el texto sin importar el tamaño de fuente. En este ejemplo, puede editar la altura de la línea ajustando el margen inferior de cada elemento 'li'. Hay muchas otras maneras de hacer esto también. Si solo desea editar la altura de la línea, cree una regla css para 'altura de línea'. Estoy de acuerdo con @AmeliaBR, tal vez pueda reafirmar nuestra pregunta exacta para que quede más claro qué es exactamente lo que quiere lograr aquí.

Habiendo dicho eso. Puede obtener mejores respuestas sobre la codificación de desarrollo front-end en stackoverflow.com

Clavado, podría haberlo dicho mejor. Si busca obtener más información sobre la tipografía web, aquí hay una buena fuente: webtypography.net .
Elegir un peso de fuente y una altura de línea apropiados
RespuestasAquíPolítica de privacidad1y, 0v