Fortgeschrittene Typografie - Wortabstand, Buchstabenabstand und Textausrichtung!

Nun haben Sie die Grundlagen der Typografie verstanden. Sehen wir uns an, wie Sie den Text nach Ihren Wünschen gestalten. Typografie macht einen großen Teil des Erscheinungsbilds Ihrer gesamten Website aus. Daher ist es schön zu wissen, wie Sie den Text so gestalten, wie Sie ihn mögen.

Text-Ausrichtung- eine nette Funktion

In der westlichen Welt sind wir so an linksbündigen Text gewöhnt, dass Textausrichtung eine Eigenschaft ist, die wir kaum bemerken - mit Ausnahme einer Stelle, an der wir ein altmodisches Papier lesen, in dem der Text gerechtfertigt ist, um das zu machen Spalten des Papiers erscheinen "klarer".

Werfen wir einen Blick auf die vier Optionen. rechts, links, zentriert oder justieren;

<style>
p {text-align: right;}
</style>
<p>For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. But they couldn't escape scent.<br />
For scent was a brother of breath. Together with breath it entered human beings, who couldn't defend themselves against it, not if they wanted to live. And scent entered into their very core, went directly to their hearts, and decided for good and all between affection and contempt, disgust and lust, love and hate. <br />He who ruled scent ruled the hearts of men.</p>

Wie Sie sehen, sieht dies bei der Verwendung des lateinischen Alphabets recht seltsam aus, aber wenn Sie das arabische Alphabet verwenden würden, wäre dies die Art von Textfluss, die Sie gewohnt sind.

Der 'center'-Wert sollte mit Gründen verwendet werden - die meisten Leute finden es schwieriger, zentrierten Text zu lesen (da sie nicht daran gewöhnt sind), aber unter bestimmten Umständen, wie z.B.: Überschriften kann der Wert "center" eine gute Wahl sein;

<style>
h3 {text-align: center;}
</style>

<h3>Breaking news - I'm centered!</h3>
<p>For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. But they couldn't escape scent.</p>
<p>And scent entered into their very core, went directly to their hearts, and decided for good and all between affection and contempt, disgust and lust, love and hate. He who ruled scent ruled the hearts of men.</p>

Der letzte Wert, den wir uns ansehen werden, ist die Option "Justieren". Wenn Sie dies wählen, sollten Sie sich bewusst sein, dass der Abstand zwischen jedem Buchstaben und den Wörtern gedehnt oder zusammengedrückt sein kann und den gesamten Text als "Block" erscheinen lässt. Daher sollten Sie Ihre Verwendung überdenken, wenn Sie die Rechtfertigung für einen Text mit sehr langen Wörtern, kurzen Absätzen oder extrem kurzen Sätzen verwenden. Schauen wir uns jedoch an, wie die Justierung funktioniert. (Die Absätze dieses Beispiels sind etwas zu kurz für meinen Geschmack, wenn es um justierten Text geht, aber es ist Geschmackssache.)

<style>
p {text-align: justify;}
</style>

<p>For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. But they couldn't escape scent.</p>
<p>And scent entered into their very core, went directly to their hearts, and decided for good and all between affection and contempt, disgust and lust, love and hate. <br />He who ruled scent ruled the hearts of men.</p>

Wortabstand - perfekt für Überschriften

Der Wortabstand ist eine dieser Funktionen, die nur für Überschriften, Blockzitate oder anderen Nicht-Text verwendet werden sollten, da sie einen schönen visuellen Effekt haben können, aber die Lesbarkeit verringern. CSS behandelt jedes Zeichen oder jeden Zeichensatz mit einem Leerzeichen als "Wort". Die Maßeinheit für den Wortabstand ist em - da 1 em die Höhe des Buchstabens x ist, entspricht ein Wortabstand von 1,5em 1,5 x'es. Das folgende Beispiel zeigt, wie der Wortabstand eine gute Wahl für Überschriften sein kann und selten für Text verwendet wird.

<style>
h2 {word-spacing: 1.2em;}
.tooMuch { word-spacing: 1.2em;}
</style>

<h2>Proper use of word-spacing</h2>
<p class="tooMuch">For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. But they couldn't escape scent.<p>

Buchstabenabstand - auch perfekt für Überschriften

Mit der Eigenschaft "Buchstabenabstand" steuern Sie den Abstand zwischen den Buchstaben. Sie können sogar negative Werte verwenden, um die Buchstaben noch näher zusammenzuhalten. Aber die Frage ist - sollten Sie? Genau wie beim Wortabstand empfehle ich, diese Funktion nur für Überschriften, Blockzitate, Menüelemente usw. zu verwenden, aber niemals für Textkörper. Sehen Sie sich an, wie die Buchstabenabstandseigenschaft funktioniert.

<style>
h2 {letter-spacing: 0.25em;}
.tooMuch { letter-spacing: 0.5em;}
</style>
<h2>Proper use of letter-spacing</h2>
<p class="tooMuch">For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. But they couldn't escape scent.<p>
<p>And scent entered into their very core, went directly to their hearts, and decided for good and all between affection and contempt, disgust and lust, love and hate. <br />He who ruled scent ruled the hearts of men.</p>

Text-umwandlung

Wie der Name schon sagt, transformiert die Texttransformation oder Textumwandlung Ihre Buchstaben - sie können in Großbuchstaben, Kleinbuchstaben oder große Schrift umgewandelt werden. Die Syntax ist einfach:

p {text-transform: uppercase;}

So sehen die drei Werte aus - ich habe ein Inline-Stylesheet verwendet, um den Text zu formatieren:

<p style="text-transform: uppercase;">An example of uppercase text.</p>
<p style="text-transform: lowercase;">An example of lowercase text.</p>
<p style="text-transform: capitalize;">An example of capitalized text.</p>

Ein Beispiel für eine einfache Typografie

Bisher haben wir uns einige Effekte einzeln angesehen, die Sie mit den Werkzeugen des typografischen Werkzeugkastens erzielen können, aber wie können Sie die Textausrichtung, den Wortabstand und alle anderen ordentlichen Effekte kombinieren, ohne ein großes Durcheinander zu verursachen ? Um Ihnen einige Anregungen zu geben, habe ich ein Beispiel zusammengestellt - es ist eine schöne Mischung aus Texttransformation und Buchstabenabstand, kombiniert mit etwas Abstand und Rändern. Schauen Sie sich das Beispiel an.

<style>
h2 {
	font-size: 1.7em;
	text-transform:uppercase;
	}
p:first-line {
	text-transform:uppercase;
	}
.introduction {
	letter-spacing: 0.25em;
	text-transform:uppercase;
	border-bottom: 1px solid white;
	border-top: 1px solid white;
	padding-bottom: 1em;
	padding-top: 1em;
	}
</style>

<h2>The Perfume - An excerpt</h2>
<p class="introduction">For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. But they couldn't escape scent.<p>
<p>And scent entered into their very core, went directly to their hearts, and decided for good and all between affection and contempt, disgust and lust, love and hate. <br />He who ruled scent ruled the hearts of men.</p>

Wie Sie sehen, wird der Buchstabenabstand und die Textumwandlung verwendet, um bestimmte Teile Ihres Texts hervorzuheben. Auf diese Weise können Ihre Benutzer Ihren Text leichter überfliegen, um einen Überblick über Ihren Text zu erhalten. Und so sollten all diese Funktionen genutzt werden - damit der Text für den Leser verständlicher wird!

Was Sie gelernt haben:

• Sie können Ihren Text auf vier verschiedene Arten ausrichten. rechts, links, zentrieren oder justieren.
• Wann immer Sie sich für die Verwendung von "Mitte" oder "Justierung" entscheiden, sollten Sie sich dessen bewusst sein, dass dies die Lesbarkeit Ihres Textes für einige Benutzer beeinträchtigt.
• Der Wortabstand sollte normalerweise nur für Überschriften verwendet werden. Die Verwendung dieses Abstands für Textkörper kann die Lesbarkeit Ihres Textes beeinträchtigen.
• Gleiches gilt für den Buchstabenabstand - gehen Sie vorsichtig mit beiden um!
• Alle diese Effekte sollten zu einem bestimmten Zweck verwendet werden - um den Text für Ihre Leser verständlicher zu machen!