Icon-Font mit IcoMoon erstellen

Font-Bibliotheken wie font-awesome und glyphicons sind sehr praktisch aber oft auch überdimensioniert, wenn man nur ein paar Icons verwenden möchte. Für diesen Fall kann man mit IcoMoon seinen eigenen Icon-Font erstellen.

icomoon-bild_im_blogpost

1. Seite aufrufen und IcoMoon App auswählen

icomoon-icon-erstellen-ideesign-koeln-auswahl

Zunächst muss die Seite icomoon.io aufgerufen werden. Oben rechts auf der Seite wechselt man zur IcoMoon App, mit der man seinen eigenen Font erstellen kann.

2. Icons hochladen oder aus anderen Fonts auswählen

icomoon-icon-erstellen-ideesign-koeln-iconauswahl

Über „Import Icons“ wählt man seine selbst erstellten Icons von seinem Rechner aus. Die Dateien müssen im SVG Format vorliegen, damit IcoMoon sie versteht. Enthaltene Schriften sollten unbedingt in Pfade umgewandelt sein, da sonst Darstellungsfehler entstehen können und auch die Dateigröße zu groß ist.

Möchte man keine eigenen Icons verwenden, kann man sich aus den verschiedenen kostenlosen Fonts wie FontAwesome, ElegantIcons oder LineIcons seine Icons individuell zusammenstellen und sich so seinen eigenen Wunsch-Font bauen.

Als nächstes auf „Generate Fonts“ klicken, um den Font zu erstellen und weitere Einstellungen zu tätigen.

3. IcoMoon Font: Einstellungen

icomoon-icon-erstellen-ideesign-koeln-download-einstellungen

Bevor man den Download-Button klickt, kann man mit Klick auf das Zahnrad rechts daneben weitere Einstellungen vornehmen.

 icomoon-icon-erstellen-ideesign-koeln-options

In den Einstellungen kann man Klassennamen vergeben oder Attribut-Einstellungen für CSS (Klassen-Pre- und Postfix) ändern. Das kann nützlich sein, wenn man mehrere Sets benutzt. Icomoon erstellt aber auch schon von Haus aus sinnvolle Bezeichnungen, wenn sie denn eindeutig benannt wurden. So wird, wenn das Icon „star.svg“ (wie in unserem Beispiel) heißt, auch die vergebene CSS-Klasse von IcoMoon zur späteren Verwendung diesen Namen enthalten. Nach dem Prinzip: „prefix-iconname-postfix“.

4. Dateien aus dem Download

Nach dem Download erhält man eine Anzahl von verschiedenen Dateien. Die wichtigsten für den direkten Gebrauch sind die Schrift-Dateien im Ordner „Fonts“ und die style.css, die man nachher in sein eigenes Webprojekt einbinden muss. Die Angaben zur Einbindung des Fonts kann man aus der style.css in sein eigenes Stylesheet übernehmen, den Ordner Fonts legt man einfach neben seinem Stylesheet ab.

Wie man dann den Webfont benutzt, ist in der Stylesheet-Datei selber erläutert.

icomoon-icon-erstellen-ideesign-koeln-dateien

Viel Spaß mit dem eigenen Icon Font!

Die 10 schönsten Webfonts

Seitdem Google das Hosting für Open Source Schriften zur Webeinbindung übernommen hat, sind die Zeiten der ewig gleichen „Arial, Helvetica, sans-serif“-Layouts vorbei. Wir haben 10 der zurzeit angesagtesten Webschriften zusammengetragen. 5 davon zur kostenlosen Nutzung, 5 aus dem kostenpflichtigen Typekit-Abo von Adobe.

Schreibwerkstatt - Die 10 schönsten Webfonts

Freie Webfonts

Die hier angegebenen Schriften sind komplett kostenlos herunterzuladen. Entweder findet man sie auf der Google Fonts Seite oder auf fontsquirrel.com. Auf diesen Webseiten ist es außerdem möglich einen Test mit beliebigen Textausschnitten durchzuführen und Schriften zu vergleichen.

1. Source Sans Pro

10_schoenste_webfonts-sourcesanspro-ideesign-koeln

Die serifenlose Source Sans Pro war Adobes erste Open Source Schriftart und ist für digitale Interfaces optimiert worden. Sie wurde von Paul D. Hunt entworfen und ist in insgesamt 12 verschiedenen Schriftschnitten erhältlich.

2. Open Sans

10_schoenste_webfonts-opensans-ideesign-koeln

Mit ihren offenen Formen und dem neutralen, freundlichen Charakter gehört die serifenlose Open Sans von Steve Matteson zu einer der beliebtesten Schriften im Web. Sie wurde sowohl für den Druckbereich als auch für das Web und mobile Anwendungen optimiert und zeichnet sich durch ihre hervorragende Lesbarkeit aus. Sie umfasst circa 900 Zeichen und ist in 10 Schriftschnitten erhältlich.

3. Raleway

10_schoenste_webfonts-raleway-ideesign-koeln

Raleway ist eine freie, serifenlose Schrift, die vor allem für Überschriften gebräuchlich ist. Ursprünglich nur mit einer Schriftstärke ausgestattet wurde sie 2012 von Pablo Impallari und Rodrigo Fuenzalida in 2012 und iKerned von Igino Marini um 8 Schriftstärken erweitert.

4. Dosis

10_schoenste_webfonts-dosis-ideesign-koeln
Eine abgerundeter, serifenloser Schrifttyp mit gerade Strichen und abgerundeten Buchstabenenden. Erzeugt durch weiche Formen und geometrische Strichführung eine gelungene Mischung aus Seriosität und Verspieltheit.

5. Arvo

10_schoenste_webfonts-arvo-ideesign-koeln
Unter vielen serifenlosen Schriften im Webbereich sticht Arvo durch seine geometrische, serifenbetonte Anmutung angenehm hervor. Gestaltet von Anton Koovit und optimiert für die Webanwendung ist die beinahe monolineare Schrift gut lesbar auf den meisten Geräten. Arvo steht im Finnischen für „Nummer, Betrag oder Wert“, was den Charakter der Schrift gut beschreibt.

Kostenpflichtige Webfonts aus Typekit von Adobe

Bei Typekit handelt es sich um ein Abonnement für eine Schriftenbibliothek, aus der man anstatt einzelne Schriften zu lizensieren, Schriftarten auswählen kann, die über eine App synchronisiert werden. Typekit ist quasi das Spotify unter den Schriftbibliotheken: Man kann die Schrift benutzen, hat aber keinen Zugriff auf die Schriftdatei selber. Man erhält Typekit automatisch zum Abonnement der Creative Cloud von Adobe dazu. Aber auch ohne CC-Abonnement kann man die Schriften ausprobieren und ein separates Typekit-Abonnement abschließen. Die Schriften sind unterteilt in Desktop- und Web-Nutzung. Wobei viele der Schriften für beide Zwecke verwendet werden können.

6. Proxima Nova

10_schoenste_webfonts-proximanova-ideesign-koeln

Die Proxima Nova ist eine Überarbeitung der Proxima Sans aus dem Jahr 1994 und zeichnet sich durch seine humanistischen Proportionen aus und eine eher geometrische Anmutung. Sie besteht aus 3 Schriftbreiten mit jeweils 8 passenden Schriftstärken. Die Schrift wird mit verschiedenen Erweiterungen, wie Ligaturen, Frakturen, passenden Ordnungszahlen, Dingbats ausgeben und unterstützt sowohl die meisten lateinischen Schriften als auch Währungen.

7. Museo

10_schoenste_webfonts-museo-ideesign-koeln

Angefangen mit der Letter „U“ ist die Museo durch ihre geradlinige Schriftstärke und ihr charakteristischer nahtloser Übergang in die Serifen ein besonderer Anblick. Leichter Verspieltheit und ein klares Auftreten sind die Charakteristiken der Museo, die sich vor allem für größere Textgrößen eignet.

8. FF Market Web

10_schoenste_webfonts-ffmarketweb-ideesign-koeln

Handgeschriebene Antiqua aus dem Jahr 1996 vom deutschen Schriftdesigner H. A. Simon. Sie eignet sich durch ihre dynamische Strichführung gut für vielfältige Anwendungen im Werbebereich, Verpackungen, auf Webseiten und der Spieleindustrie. Dabei bietet sie vor allem mit den vor allem im Webbereich üblichen serifenlosen Schriftarten einen ausgewogenen und stimmigen Kontrast. Sie wird in 3 Schriftstärken ausgegeben und unterstützt Funktionalitäten wie Ligaturen, alternatierende Zeichen, Frakturen, stylistische Alternativen und vieles mehr.

9. Minion Pro

10_schoenste_webfonts-minionpro-ideesign-koeln

Eine klassische Schriftart wie die ebenfalls beliebte Garamond, die sich durch ihr ruhiges Schriftbild auszeichnet.

10. Adelle

10_schoenste_webfonts-adelle-ideesign-koeln

Die dynamische, serifenbetonte Schrift eignet sich vor allem für den Editorial Bereich, meistens für Zeitschriften oder Magazine. Durch ihren unauffälligen Charakter mit dunkler Farbe kann sie für die meisten Anwendungen verwendet werden. In größeren Schriftgrößen spielt sie ihre energetischen Eigenschaften wegen ihrer betonten Serifen aus. Mit 14 verschiedenen Schriftschnitten, Schriftbesonderheiten wie Frakturen ist die Adelle eine Allzweckwaffe für gute Typografie.

Quellen: Google FontsTypekit – fontsquirrel

Bootstrap 4 Update – Was ändert sich?

Das weltweit beliebteste CSS-Framework bekommt ein Update auf die mittlerweile vierte Version. Die wichtigsten Änderungen – und ob sich ein Umstieg auf Version 4 lohnt – haben wir hier kurz zusammengefasst.

bootstrap-4-update-was-aendert-sich

Die wichtigsten Änderungen

1. Aus Less werde Sass

Bootstrap verwendet jetzt Sass als Präprozessor für seine CSS-Dateien. Laut der eigenen Webseite von Bootstrap kann Sass schneller kompiliert werden als Less.

2. Der Design-Trend Karten wurde aufgenommen

Seit einiger Zeit ein beliebter Design Trend im Webdesign: Karten sind ein gutes Mittel, flexibel responsive Inhalte einer Webseite darzustellen. Bekanntestes Beispiel dürfte Pinterest sein. Auch das hat das Framework erkannt und ersetzt Panels, Wells und Thumbnails jetzt durch die neue Komponente „Cards“.

3. Internet Explorer 8 wird nicht mehr unterstützt

Laut CanIUse (Stand Juni 2016) hat der Internet Explorer 8 nur noch eine fast zu vernachlässigende Prozentzahl von 0,61% Nutzeranzahl weltweit. Daher wird das Twitter Framework ihn ab jetzt nicht mehr unterstützen und kann nun flexible Größen für Schriften und einzelne Komponenten nutzen. Für IE8 Support sei Bootstrap 3 anzuraten.

4. Das Grid-System wird weiter verbessert

Das ohnehin schon sehr ausgereifte Grid System wird erweitert und verbessert. Die bislang verwendeten Mixins wurden komplett überarbeitet und an die Anforderungen mobiler Geräte angepasst.

5. Sämtliche JavaScript Plugins wurden aktualisiert

In der neuen Version sind sämtliche Plugins nach dem aktuellen ECMAScript 6 Standard geschrieben und profitieren nun von den neuesten JavaScript Erweiterungen. Sie unterstützen die Univeral Module Definition und sind einfach anzupassen.

6. Flexbox Layouts sind da

Die neue Art und Weise Objekte zu positionieren ist nun auch in Bootstrap angekommen. Das Gridsystem und andere Komponenten basieren auf dem neuen Flexbox Modell.

7. Reboot ist das neue Normalize.css

Erweiterungen im CSS Reset wie Box Sizing, Paddings und Margins sind alle in nur einer Sass-Datei vereint.

8. Änderungsmöglichkeiten vereinfacht

Genau wie die restlichen Veränderungen haben vor allem auch die Stylesheet-Dateien vom Update profitiert. Sämtliche Änderungen können nun leicht in Sass-Variablen geändert werden und müssen nicht mehr umständlich in einzelnen CSS Dateien geändert werden, wie noch in Version 3.

9. Dokumentation wird zukünftig vereinfacht

Die Dokumentation wurde komplett in Markdown umgeschrieben und mit Plugins erweitert, damit einfacher das gefunden werden kann, was gesucht wird. Eine Verbesserung der Dokumentationssuche steht noch aus.

10. Und viel, viel mehr!

Benutzerdefinierte Formulare, Klassen für Abstände und Dienstskripte, Popups und Tooltips und noch vieles mehr wurden der neuesten Bootstrap-Version hinzugefügt.

Lohnt sich ein Update auf Bootstrap 4?

Genau wie bei WordPress Updates ist es auch bei einem komplexen Framework wie Bootstrap eine heikle Sache, einfach upzudaten. Da es sich um ein sehr weitreichendes und grundlegendes Update des Framework handelt, ist ein Update einer Bootstrap-Webseite nur bei einem Relaunch sinnvoll. Es müssten unzählige Änderungen in den Stylesheet-Dateien getätigt werden, die noch nicht komplett absehbar sind. Bootstrap 4 befindet sich derzeit noch in der Alpha Version. Daher ist ein Update noch keine gewinnbringende Option. Bis zum offiziellen Release der Version 4 wird sich noch viel verändern. Jedoch kann man sicher sein, dass zukünftige Projekte von den Entwicklungen des Framework und seiner neuen Version 4 profitieren werden.

Quelle: http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/ (Stand Juni 2016)