Falcon Gold Beiträgen

Die Auswahl der Schriftart für ein Projekt ist einer der entscheidenden Momente. Gelegentlich versucht man dadurch dem Design etwas Persönlichkeit zu geben. Hauptziel ist jedoch die Lesbarkeit zu verbessern

Jedes Projekt hat seine individuellen Anforderungen und keine Schriftart wird zu jeder Situation passen. In Sachen Webtext lassen sich trotz alledem Schlüsselmerkmale identifizieren, nach denen Sie Ausschau halten sollten.

1. Große und offene Counters

Counters sind der weiße Zwischenraum in der Mitte von Buchstaben, wie ‚o‘ und ‚c‘. Große Counters steigern die Lesbarkeit, weil Sie markante Formen innerhalb der zahlreichen vertikalen Striche hervorrufen, die die lateinischen Kleinbuchstaben ausmachen.

Schriftarten mit offenen Counters tendieren zu einer großen x-Höhe (Die höhe des kleinen ‚x‘) im Vergleich zu den steigenden und fallenden Teilen (Die fortführende Line von Buchstaben, wie ‚b‘ und ‚p‘). Die vergrößerte x-Höhe ermöglicht einen passenden Zwischenraum bei dem Buchstaben ‚e‘.

Eine Schriftart, die das gekonnt umsetzt, ist Lato von Lukasz Dziedzic. Lato ist mit einer großzügigen x-Höhe ausgestattet und wird von großen, offenen Counters unterstützt.

font1-lato

Des Weiteren sollten Sie nach scharfen Kanten an den Verbindungsenden bei Buchstaben, wie ‚d‘, ‚p‘ und ’n‘ schauen: Bedingt durch die Natur von Pixeln, verstärken die Kanten den Zwichenraum und lassen die Counters größer erscheinen. Dieser Effekt kann auch in Semi-Counters erkannt werden, wie beispielsweise der Leerraum unterhalb der Schulter des Buchstaben ‚r‘.

2. Gleiche Linien

Eine häufig zwischen Designern geführte Diskussion ist die Frage, ob Serif oder Sans-Serif Schriftarten besser lesbar sind. Manche argumentieren, dass Serife die Einheit eines Wortes besser zum Ausdruck bringen,  während andere wiederum meinen, serife Schriften verwirren bei kleinen Formen. Einige sind der Ansicht, es ist alles nur eine Frage der Gewohnheit. Egal welche Sicht Sie vertreten, es gibt erwiesenermaßen Argumente dafür und dagegen.

Die Warheit ist, dass Sans Serf minimal besser lesbar ist, nicht aufgrund der Serif, sonder wegen anderen gebräuchlichen Stylekomponenten. Genauer gesagt, Serife erweitern die traditionelle Handschrift und tendieren somit zu einem höhern Kontrast der Striche. Dünne Linien verschwinden früher, wenn die Ansicht kleiner wird. Also verliert jede Schriftart mit dünnen Strichen bei einem kleinen Bildschirm an Lesbarkeit.

Die meisten Schriftarten haben einen Kontrast zwischen den Linien, um eine optische Ausgeglichenheit zu gewährleisten (horizontale Striche wirken optische breiter als vertikale Striche der gleichen Dicke), aber ein niedrigerer Kontrast sorgt für eine bessere Lesbarkeit. Trotz alledem gibt es jede Menge moderne Serif-Fonts, die außerordentlich gut auf dem Bilschirm performen.

3. Deutliche Formen

Wenn Sie die Performance einer Schriftart testen wollen, dann tippen Sie noch bevor Sie Ihren Namen, die Domain oder iregendetwas anderes ausprobieren den folgenden Text: „1Illinois“.

Letztendlich wollen Sie zahlreiche Kombinationen testen, doch „1Illinois“ ist die einfachste, die Ihnen ein aussagekräftiges Urteil ermöglicht. Sie enthält nicht nur offene und geschlossene Counters, sondern auch ein Gewölbe zur Beurteilung des Linienkontrasts. Auch sind einige der problematischsten Zeichen einer Schriftart eingeschlossen: Die Zahl 1, das große I, das kleien l und in geringerer Ausprägung das kleine i.

Nehmen wir wir das klassische Beispiel ‚Gill Sans‘. Sie ist schön gezeichnete Schriftart, aber Sie funktioniert nicht im Web und auf dem Bildschirm. Tippen Sie die Zeichenfolge „1Illinoi“ in Gill Sans ein und Sie werden feststellen, dass die Buchstaben unabhängig von der Größe nicht zu unterscheiden sind. Hier kommen wieder Serife-Fonts ins Spiel – die zwar etwas an Lesbarkeit verlieren, aber dafür mit einem stärkeren Kontrast der Striche und engeren Öffnungen punkten können. Vergleichen Sie ‚Merriweather mit Gill Sans, dann werden Sie schnell merken, dass trotz der erheblich einfacheren Buchstabenformen von Gill Sans, Merrieweather ein gutes Stück leichter zu lesen ist. Dies liegt an den deutlich ausgeprägteren Zeichen, was durch den Zusatz von Serifen leichter zu erreichen ist.

Deutlicherer Formen sind kein Privileg von Serife-Fonts. ‚Fira‘ macht einen hervorragenden Job bei der Kennzeichnung unterschiedlicher Zeichen. Dies gelingt ihr durch eine Variation in der Höhe und den Zipfeln bei dem kleinen ‚l‘.

Idealerweise sollten Sie eine Schriftart finden, die durchgehend in dem Zeichensatz eine Variation aufweist. Schriftarten mit traditionell doppelstöckigem ‚a‘ und ‚g‘ tendieren dazu eine bessere Lesbarkeit als geometrische Fonts, wie Futura, zu haben.

font3-ideal-sans

Eine meiner persönlichen Favoriten ist Ideal Sans. Sie macht nur einen kleinen unterschied zwischen dem großen ‚I‘ und dem kleinen ‚l‘, aber bei nähere Betrachtung merkt man schnell den visuellen unterschied zwischen den Strichen. Die Asymmetrie und Variation zwischen den Zeichen, die sich normalerweise gegenseitig wiederspiegeln, machen das Lesen bei einer normalen Textgröße leicht.

4. Ein einheitlicher Rhythmus

Rhythmus ist einer der wichtigsten Faktoren bei der Wahl des richtigen Schriftsatzes, weil wir den Text in ruckartigem Anhalten verarbeiten. Leichte Sprünge längs der Zeile sind leichter zu verarbeiten, wenn die Abstände beständig sind.

Eine Schriftart kann die Zeilenabstände des Textes nicht kontrollieren, aber sie hat Kontrolle über die vertikalen Zwischenräume. Es ist zwar möglich die Folgen des Textes anzupassen (z.B. den Display-Text enger zu machen und den Textkörper etwas aufzulockern), aber dies hat keine Auswirkung auf den Rhythmus der Linien, die in die Schriftart eingebaut sind.

Abgesehen von den engen Öffnungen, ist der schlechte Rhytmus einer der größten Schwachpunkte von Helvetica (Verglichen mit Effra und More Pro, die beide einen butterweichen Rhythmus haben).

font2-helvetica

Versuchen Sie aber nicht einen Zeichensatz zu finden, der einen mathematisch perfekten vertikalen Rhythmus hat. Um eine solche Genauigkeit zu erreichen muss der Designer in der Regel die einzelnen Buchstaben so verzerren, dass die Lesbarkeit darunter leidet. Halten Sie lieber Ausschau nach einer, die zu einem vorhersehbaren Verhaltensmuster tendiert.

Design

Mit CSS3 sind zahlreichen neue Möglichkeiten für UX Designer eingeführt worden und das Beste daran ist, dass sich die coolsten Teile sehr leicht implementieren lassen. Nur ein paar Zeilen Code gibt ihnen einen Transitioneffekt, der Ihre Nutzer beeindruckt, die Bindung mit der Webseite erhöht und wenn er richtig eingesetzt wird, erhöht er schlussendlich die Konversionrate. Diese Effekte beschleunigen die Hardware und sind eine progressive Erweiterung, die sie jetzt sofort einsetzen können.

Hier sind 5 einfache Effekte, die Leben in ihre Benutzeroberfläche bringen und ein Lächeln auf die Gesichter ihrer Anwender zaubern. Alle diese Effekte können mit der Transition-Property kontrolliert werden. Damit wir die Effekte auch in Arbeit sehen können, setzen wir eine kleine HTML-Seite auf:

<html>
<head>
    <style type="text/css">
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Sobald wir das gemacht haben, setzen wir die Breite und Höhe, die Hintergrundfarbe und die Transition-Property.

<style type="text/css">
body > div
{
    width: 500px;
    height: 300px;
    background: #676767;
    transition: all 0.3s ease;
}

Die Transition-Property hat drei werte: die Properties, die eine Übergang haben sollen (In unserem Fall alle), die Geschwindigkeit des Effekts (Bei uns 0,3 Sekunden) und wie die Beschleunigung bzw. Verlangsamung kalkuliert wird. Hier lassen wir jedoch das Feld leer und verwenden die Standardeinstellung. Jetzt müssen wir nur die Properties ändern und Sie werden automatisch für uns animiert.

1. Aufblenden

Dinge zu haben, die Aufblenden, wenn man mit der Maus darüber fährt ist häufig gefragte Anforderungen vieler Klienten. Es ist eine tolle Möglichkeit die Funktionalität zu betonen und Aufmerksamkeit auf den Call to Action zu richten. Aufblend-Effekte werden in zwei Schritten programmiert. Als erstes setzt man den Anfangszustand und dann die Änderung, z.B. bei einem Hover:

.fade
{
    opacity:0.5;
}
.fade:hover
{
    opacity:1;
}

2. Andere Farbe

Die Animation eine Farbe zu ändern war bis jetzt unglaublich komplex. Hier mussten früher mathematische Kalkulationen mit unterschiedlichen RGB-Farbwerten vorgenommen werden, die dann anschließend wieder zusammengesetzt wurden. Jetzt können wir die div-Klasse einfach auf „color“ setzen und die in unserem CSS-file die Farbe festlegen:

.color:hover
{
    background: #535353;
}

3.Vergrößern & Verkleinern

Um ein Element wachsen zu lassen, musste die Breite und Höhe, oder die Polsterung verwendet werden. Mit CSS3 können wir einfach mit transform die Vergrößerung vornehmen. Setzen Sie Ihre div-Klasse auf „grow“ und programmieren Sie dann den folgenden Codeblock:

.grow:hover
{
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

Beim Verkleinern des Elements ist es dasselbe Spiel. Beim Wachsen eines Elements wählen wir einen Wert > 1 und bei der Schrumpfung einen Wert < 1:

.shrink:hover
{
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}

4. Rotierendes Element

Geben Sie Ihrem div die Klasse „rotate“ und fügen Sie folgenden Zeilen zu Ihrem CSS:

.rotate:hover
{
    -webkit-transform: rotateZ(-20deg);
    -ms-transform: rotateZ(-20deg);
    transform: rotateZ(-20deg);
}

5. Rahmen Einfügen

Eine der beliebtesten Buttonarten ist derzeit der Geisterbutton. Dabei handelt es sich um einen Button ohne Hintergrund und einem dicken Rahmen. Natürlich können wir relativ leicht einen Rahmen zu einem Element hinzufügen, jedoch wird dadurch dann die Position geändert. Wir könnten das Problem umgehen, indem wir Box-sizing verwenden, doch eine wesentlich einfachere Variante ist die Implementierung über die Transition-Property.

.border:hover
{
    box-shadow: inset 0 0 0 25px #535353;
}

Entwicklung

Was ist CSS?

CSS ist ein Akronym für: „Cascading Style Sheets“. Die Schwestersprache von CSS ist HTML, die es Ihnen ermöglicht Ihre Webseite zu gestalten. Ein Beispiel für die Umgestaltung des Aussehens ist, die Wörter fett zu markieren. In der standard HTML-Sprache macht man dies mit dem <b> Tag. Dies würde dann wie folgt aussehen:

<b>Mach mich fett</b>

Das funktioniert ganz gut und per se ist daran auch nichts auszusetzen. Doch wenn Sie jetzt alle Texte, die Sie zuvor fett gemacht haben, unterstreichen wollen, dann müssten Sie zu jeder einzelnen Zeichenfolge gehen und diese mit dem jeweiligen HTML-Tag versehen.

Ein weiterer Nachteil kommt in dem folgenden Beispiel zur Geltung: Angenommen Sie wollen den bereits oben genannten Text fett machen, die Schriftart auf Helvetica setzen und die Buchstaben rot einfärben. Um all dies umzusetzen müssten Sie viel Code schreiben.

<font color="#FF0000" face="Helvetica">
<b>Dies ist ein Beispieltext</b></font>

Wie Sie sehen, müssen Sie relativ viel schreiben für nur ein paar kleine optische Änderungen, was langfristig auch Ihren Programmiercode unsauber wirken lässt. Wir als Webdesigner versuchen in der Regel mit so wenig wie möglich Aufwand ein hervorragendes Ergebnis zu liefern. Mithilfe von CSS können Sie Ihre individuelle Gestaltung auslagern und dann dort die gewünschten Eigenschaften verändern. Verwenden Sie einen einzigartigen und aussagekräftigen Namen, um den HTML-Teil zu markieren.


Beispieltext

In den Header Ihrer Webseite würden Sie dann den CSS Code einfügen, der die Gestaltung definiert, die wir gerade angewandt haben:

.meinStyle {
    font-family: Helvetica;
    font-weight: bold;
    color: #FF0000;
}

In dem oberen Beispiel haben wir den CSS Code direkt in die Zeile mit eingebunden. Das ist absolut in Ordnung, wenn man kleinere Projekte hat oder in Situationen, wo man den gleichen Stil nur einmal verwendet. Wer sich mit diesen einfachen Beispielen schon schwer tut sollte die eigene Webseite lieber von Profis machen lassen. Hier kann ich aus eigener Erfahrung das Neo Webstudio Würzburg und das Team von Netgenerator aus Berlin empfehlen

Doch der wesentlich häufigere Fall ist, dass Sie die CSS-Styles für mehrere Seiten verwenden möchten. Jetzt müssten Sie dann den Code jedes mal neu kopieren. In meinen Augen ist das ein absolut unnötiger Aufwand. Abgesehen davon ist dann jede Seite zu einem gewissen Teil ein Duplikat der vorherigen.

Die Lösung: Sie erzeugen einen seperate CSS-Datei und verlinken dann diese in Ihrer Webseite.

<link href="meinStyle.css" rel="stylesheet" type="text/css">

Dadurch wird Ihre CSS-Datei mit dem Namen „meinStyle.css“ in dem HTML Dokument aufgerufen. Der Code wird wie bereits oben einfach in den Header eingefügt. Um die CSS-Datei zu erzeugen müssen Sie nur ein simples Textdokument (z.B. in Windows: Rechtsklick -> Neu -> Textdokument) erstellen und anschließend die Endung von .txt zu .css abändern.

Der Code in der CSS-Datei verhält sich etwas anders als bei der direkten Integration in die HTML Seite. Beispielsweise verwendet man hier überhaupt keine Tags. Das Ganze lässt sich am besten durch ein Code-Beispiel erlernen:

.meinStyle1 {
    font-family: Helvetica;
    font-weight: bold;
    color: #FF0000;
}
.meinStyle2 {
    font-family: Helvetica;
    font-weight: bold;
    color: #FF0000;
}
.meinStyle3 {
    font-family: Helvetica;
    font-weight: bold;
    color: #FF0000;
}

In dem oberen Beispiel habe ich eine Folge von CSS Klassen definiert die ich dann wie gehabt mit dem HTML-Tag aufrufen kann:

<h1 class="meinStyle2">Mein 2. CSS Style</h1>

Ich hoffe, dass dieses kleine Tutorial auch weiterhelfen konnte und euch zum Lesen der nächsten Beiträge animiert hat. Wie immer würde ich mich über Feedback und ein Kommentar freuen.

Design Entwicklung

Trends kommen und gehen. Diejenigen, die ein bestimmtes Problem lösen, bleiben am längsten bestehen. Ein Trend, der derzeit genau aus diesem Grund populär ist, sind sticky Elemente. Dabei handelt es sich um Elemente, die sich solange normal verhalten bis wir scrollen, dann bleiben sie irgendwie auf der Seite präsent.

Der Trend hat mit den Sidebars begonnen, doch erst durch den Einsatz bei den Headern ist er richtig bekannt geworden. Warum? Weil Header häufig Naviagationselemente enthalten und eine dauerhaft zugägnige Navigation macht den Nutzern das Leben einfacher.

In diesem Tutorial werden wir einen Header programmieren, der am oberen ende der Seite bestehen bleibt. Damit er beim Lesen der Webinhalte nicht störend ist, minimieren wir ihn, sobald der Besucher nach unten scrollt.

Der HTML-Teil

Der HTML-Teil für unser Beispiel ist ziemlich simpel. Alles, was wir brauchen, ist eine h1 Überschrift innerhalb eines Headers. Darunter ein Bild, damit wir den Scroll-Effekt testen können.

<header><h1>Beispiel-Header</h1></header>
<img src="image.png" width="700" height="2000" alt="Example Image" />

Der jQuery-Teil

CSS transitions sind die beste Möglichkeit, um die Animation für unseren sticky Header umzusetzen. Das Einzigste wofür wir jQuery brauchen, ist die Feststellung der Scrollposition des Fensters.

Wenn die Scrollposition höher als 1 ist – sprich der Nutzer hat nach unten gescrollt- dann fügen wir die Klasse ’sticky‘ zum Header. Andernfalls entfernen wir sie. Das bedeutet, wir sind in der Lage den Header abhängig davon, ob die ’sticky‘-Klasse angewandt wurde, zu stylen.

$(window).scroll(function() {
if ($(this).scrollTop() > 1{
    $('header').addClass("sticky");
   }
   else{
     $('header').removeClass("sticky");
   }
})

jQuery in diesem Zusammenhang zu verwenden, schwächt die Webseite nur ganz minimal. Selbst wenn JavaScript deaktiviert ist wird die Navigation weiterhin funktionieren. Der Header wird dann einfach ohne den sticky-styl angezeigt.

Der CSS-Teil

Im CSS-Teil werden die zwei unterschiedlichen Zustände gestylt. Einmal die Standardvariante und einaml der ’sticky‘-Zustand. Auch müssen wir den Übergang festlegen. Am Anfang fügen wir einfach ein paar Styles hinzu, die den Header besser aussehen lassen.

header{
    position:fixed;
    width: 100%
    color: #fff;
    font-family: sans-serf;
    height: 108px;
    text-align: center;
    line-height: 108px;
    background: #000;
    transition: all 0.4s ease;
}

Jetzt kommt der spaßige Teil. Wenn der Nutzer nach unten scrollt, wird die ’sticky‘-Klasse angewandt und wir können den Header jetzt anders gestalten, um zu zeigen, dass die Seite nun eine neue Priorität hat. Als erstes wollen wir die Größe ändern. So nimmt der Header weniger Platz ein. Des Weiteren wollen wir die Farbe abändern und den Text nach Links ausrichten. Dadurch findet keine zu starke visuelle Störung statt.

header.sticky {
    font-size: 24px;
    line-height: 48px;
    height: 48px;
    background #335C7D;
    text-align: left;
    padding-left: 20px;
}

Design Entwicklung