Typografie in einem Web-Template

Was ist Typografie? Warum ist es so wichtig

Drucker in die Struktur des Textes, die in Web-Seiten.

Verwenden Sie eine gute grafische Layout in Ihre Website oder Ihr Vorlage, ohne Aufmerksamkeit zu Typografie, es könnte zu einem negativen von den Nutzern Ihrer Website.

Um erfolgreich zu sein, müssen Sie interessante Informationen für Ihre Nutzer. In diesem Fall wird der Drucker kann dazu beitragen, die Lesbarkeit der Inhalte auf Ihrer Website.

Zum besseren Verständnis der Bedeutung des Druckers können Sie einen Vergleich mit einem einfachen Text-Datei mit einem Microsoft Word-Dokument, das eine gute formatieren Sie den Text: “Titel, Untertitel, Absätze, Textausrichtung, fett, kursiv, farbigen Text , markierten Text.

Durch den Vergleich dieser Art von Dokumenten, können Sie ganz einfach zu verstehen, dass ein gut-formatierten Text können Sie durch den Inhalt der Steigerung ihrer Erfahrung in der Lesung.

Ich will Sie nicht langweilen mit einer Begründung, warum Typografie ist wichtig, in Ihre Website oder Ihr Template. Dies ist nur ein Blog-Artikel, nicht um eine manuelle Druck!

Schriften, die in HTML-Seiten

Die verwendeten Schriften sind auf den meisten Macintosh und Windows sind: Times New Roman, Georgia, Verdana, Geneva, Arial, Helvetica, Trebuchet, sans-serif, und andere.

Die erste Eigenschaft hinzugefügt werden, in Ihrem CSS-Dokument, um die Formatierung in der HTML-Inhalte sind: “font-family, font-size, line-height, color”.

Mit der Eigenschaft “font-family”, können Sie die Standard-Schriftarten in Ihrem Dokument.
Mit der “font-size”, können Sie die Schriftgröße in der Eigenschaft “font-Familie”, und Sie können den Wert mit den Einheiten: px, pt, em.
Die Eigenschaft “line-height” wird verwendet, um den Abstand zwischen einer Zeile Text und einem anderen (so genannte Abstand) mit einem Wert in Prozent “%”.
Mit der Eigenschaft “color” können Sie die Text-Farbe mit einem Hexadezimalwert auf RGB.

Ich fordere Sie auf, dem Beispiel der CSS-Code vor, die unter typographischen Eigenschaften im Körper von der Seite:

body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   line-height: 140%;
   color: #000000;
}

Typografie Tags in HTML-Seiten

Wie ein Dokument in Microsoft Words, in der HTML-Seiten können Sie Titel und Untertitel (heading tags), indem Sie einfach mit Tags H1, H2, H3, H4, H5, H6.

Absätze können mit dem Tag “P”, geordnete Listen mit “OL”, ungeordnete Listen mit “UL”, die Liste der Artikel mit “LI”, Einzug der Text mit “Blockquote”, Text-oder Code mit vorformatierte “PRE” oder “CODE”.

Jedes dieser Elemente kann formatiert mit CSS Style Sheets. Im Folgenden können Sie Inhalte wie HTML-und CSS-Eigenschaften zugewiesen für jedes Element in HTML.

Beispiel HTML-Code:

Title of HTML page
Subtitle

Content inside a paragraph.
Ordered List

Item List 1
Item List 2
Item List 3

Unordered List

Item List 1
Item List 2
Item List 3

CSS-Beispiel:

body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   line-height: 140%;
   color: #000000;
}

p {
   margin-top: 10px;
   margin-bottom: 8px;
}

h1, h2, h3 {
   font-weight: bold;
   margin-top: 8px;
   margin-bottom: 6px;
}

h1 {
   font-size: 18px;
}

h2 {
   font-size: 16px;
}

h3 {
   font-size: 14px;
}

ul, ol {
   margin-left: 20px;
}

li {
   list-style-type: disc;
}

pre {
   font-size: 11px;
   margin-left: 20px;
   color: #666666;
}

Abschließende Überlegungen

diesem Blog-Artikel I beigefügt einige Beispiele, die zeigen, wie die Verwendung des HTML-Tags und CSS für den Druck, der Annahme, dass jeder, der liest diese Artikel hat schon recht gut mit der Verwendung von HTML und CSS.

können Sie kopieren und die Beispiele auf Ihren Webseiten ein. Mein Vorschlag ist, den separaten CSS-Dateien für Layout und Typografie, so können Sie einfach die CSS-Eigenschaften zugewiesen.

Fühlen Sie sich frei zu diesem Artikel, ich werde so schnell wie möglich antworten.