Auswahl einer geeigneten Schriftstärke und Zeilenhöhe

Normalerweise bin ich ein Back-End-Ingenieur, ich wage mich in die Welt des Vektordesigns und versuche, mich dabei nicht zu verletzen.

Ich bin mir bewusst, dass ich Schwierigkeiten habe, die Dinge mit meinem selbst gebrauten Typografie-Styleguide zu dimensionieren:

Styleguide für selbst gebraute Typografie

Ich versuche, diese Schriftarten mit einem Grafikstil zu kombinieren, der ziemlich präzise sein sollte, siehe unten:

Größenkonflikte ausgleichen

Es scheint egal zu sein, wie ich meine Symbole, die Liniengewichtung, den Eckenradius, die Linienhöhen, die Schriftgrößen innerhalb dieser Linienhöhen oder ähnliches größe. Ich finde nie einen geeigneten "vertikalen Rhythmus", hier mit 14pxfettem, gewichtetem Text dargestellt, innerhalb einer 19pxZeilenhöhe, ich kann keine gut aussehende Ausrichtung und Abstände neben einem 40pxhohen Symbol finden, mit einer 4pxGewichtslinie, mit 8pxgewichteter Rundung Ecken.

Ich möchte keine absoluten Antworten wie "Machen Sie Ihren Text X hoch", aber gibt es einen Ort, an dem Sie mit den Strukturelementen wie Symbolen und Linien beginnen und dann rückwärts zu einer geeigneten Zeilenhöhe und Schriftgröße arbeiten können?

Zeilenhöhe von 30, bei einer Schriftgröße von z. B. ~20/22, passend zur Größe der Icons?

Können Sie klarstellen, was genau Sie erreichen wollen – was der „vertikale Rhythmus“ sein sollte? Geht es nur darum, Text und Symbole gut auszurichten, oder versuchen Sie auch, das visuelle Gewicht des Symbols anzupassen? PS Während Sie die Frage bearbeiten, möchten Sie möglicherweise auch den Titel bearbeiten, um deutlich zu machen, dass Sie nach einem Prozess zum Auswählen von Textgewicht und -höhe suchen, um ein Symbol zu ergänzen.
Stellen Sie Ihre Zeilenhöhe gleich der Symbolhöhe für Totpunkttext ein; Wenn Sie Ihre Symbole auf jsfiddle veröffentlichen möchten, zeige ich Ihnen gerne, was ich meine.

Antworten (1)

Dies kann davon abhängen, was Sie erstellen möchten. Wenn Sie Text neben einem Symbol haben möchten, können Sie Listenelemente mit den Symbolen als benutzerdefinierte Aufzählungszeichen verwenden. Dadurch würde das Bild unabhängig von der Schriftgröße automatisch mit dem Text zentriert. In diesem Beispiel können Sie die Zeilenhöhe bearbeiten, indem Sie den unteren Rand jedes 'li'-Elements anpassen. Es gibt auch viele andere Möglichkeiten, dies zu tun. Wenn Sie nur die Zeilenhöhe bearbeiten möchten, erstellen Sie eine CSS-Regel für 'line-height'. Ich stimme @AmeliaBR zu, vielleicht können Sie unsere genaue Frage noch einmal formulieren, um klarer zu machen, was genau Sie hier erreichen wollen.

Davon abgesehen. Unter stackoverflow.com erhalten Sie möglicherweise bessere Antworten zur Front-End-Entwicklungscodierung

Stimmt, hätte es besser sagen können. Wenn Sie mehr über Webtypografie erfahren möchten, finden Sie hier eine gute Quelle: webtypography.net .
Auswahl einer geeigneten Schriftstärke und Zeilenhöhe
AntwortenHierDatenschutz-Bestimmungen1y, 0v