Kategorien
Essentials Icons & Fonts

Gratis: Die IconBros haben über 700 Vektor-Icons für dich

Icons gehören zu den Designelementen, von denen du nie genug haben kannst. Die große Sammlung der IconBros solltest du dir jedenfalls sichern.

Kategorien
(Kostenlose) Services Essentials Freebies, Tools und Templates Icons & Fonts

Creative Fabrica: Künstlerische Designelemente und Fonts aus echter Handarbeit

Designelemente gibt es im Netz der Netze zuhauf. Wenn du allerdings nicht 0815 benötigst, musst du tiefer graben. Creative Fabrica ist eine neue Anlaufstelle für deine Suche.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Essentials Freebies, Tools und Templates Icons & Fonts Sonstige Programme

Logos erstellen: Schnell, einfach, kostenlos mit DesignEvo

Logo-Editoren als Web-App können alles sein zwischen großartig und grottig. DesignEvo schlägt auf der Skala Richtung „großartig“ aus, wenn er auch nicht perfekt ist.

Kategorien
Design Essentials HTML/CSS Icons & Fonts UI/UX

Von Designern für Designer: Das kostenlose Fontbase organisiert deine Schriften

Unkompliziertes Schriftmanagement ist eine Pflichtdisziplin am Arbeitsplatz jeden Designers. Das kostenlose Fontbase liefert genau das und hat noch einige Ideen mehr.

Kategorien
Essentials Freebies, Tools und Templates Icons & Fonts

Fontplop: Kostenlose Mac-App macht Web-Fonts aus Desktop-Fonts

Das Leben kann so einfach sein. Zieh deine TTF oder OTF auf Fontplop und erhalte ein Web-Font-Bundle aus WOFF2, WOFF, TFF, SVG und EOT zurück.

Kategorien
Design Essentials Freebies, Tools und Templates HTML/CSS Icons & Fonts JavaScript & jQuery Programmierung

Tool-Tipp: Moving Letters mit Anime.js und CSS

Animierte Schriften sind ein Hingucker. Richtig eingesetzt, können sie ein Design aufwerten. Moving Letters stellt dir 16 fantastische Effekte bereit.

Kategorien
Essentials Icons & Fonts

Reise-Piktogramme: Schicke Fotobücher mit dem Travel Icons Set

Aus Weißrussland erwartet man in demokratischen Ländern landläufig nicht viel gutes, aber das Travel Icon Set des belarussischen Studios Agente solltest du kennen.

Kategorien
Essentials Icons & Fonts

Feather Icons: 240 moderne Piktogramme zur kostenlosen Verwendung

Feather Icons ist ein Set von 240 Symbolen, die durch ihre sehr klare Gestaltung für nahezu jedes Projekt geeignet sind. Das gilt umso mehr, als sie kostenlos unter der liberalen MIT-Lizenz vertrieben werden.

Kategorien
Design Essentials Icons & Fonts Webdesign

Font Review Journal: Gute Schriften von Designern analysiert

Das Erstellen einer Schrift ist eine aufwändige Sache, die Hunderte Stunden an Konzeptionierung und Ausarbeitung erfordert. Im Netz finden wir die Schrift dann lediglich mit einem halben Absatz Text erläutert. Das Font Review Journal will das ändern.

Warum gibt es den Font X und wofür?

Das neue Magazin „Font Review Journal“ (FRJ) ist ein Muss für jeden Typografie-Fan. Gegründet von der US-amerikanischen Designerin Bethany Heck will das FRJ ein Typografie-Magazin von Designern für Designer sein. Derzeit ist Bethany noch die einzige Autorin. Das könnte sich allerdings zügig ändern.

Die Idee für das FRJ kam Bethany, die sehr viel Wert auf Typografie in ihren Designs legt, auf der Suche nach geeigneten Schriften. Warum erfährt der geneigte Kunde kaum mehr über einen beliebigen Font, als dass er existiert und zu welchem Preis er verkauft wird? Warum erklärt der Type-Designer nicht, wie er seinerseits auf die Idee kam, genau diesen Stil zu entwickeln, was ihn inspiriert hat oder für welchen Einsatzzweck er den Font für besonders geeignet hält?

Bethany will genau diese Bereiche mit den Reviews auf ihrem „Font Review Journal“ genauer beleuchten. Und das tut sie wirklich. Die fünf Reviews, mit denen sie das Magazin gestartet hat, sind randvoll mit Informationen zum jeweiligen Font und zudem reich bebildert. Jeder Bericht stellt ein Designwerk in sich dar, von den Inhalten ganz abgesehen.

Jede Woche ein ausführliches Review ist geplant

Bethany plant vorerst, jede Woche einen weiteren Font vorzustellen. Das erscheint wenig, ist aber angesichts des gewaltigen Recherche- und Erstellungsaufwands, den Bethany mit zwanzig Stunden pro Beitrag beziffert, schon ein großes Versprechen. Das FRJ startet zunächst nicht mit einem Geschäftsmodell. Langfristig will Bethany aber wenigstens die Basiskosten über Einnahmen decken. Sponsored Posts und Bannerwerbung will sie allerdings nicht anbieten.

Reviews folgen einem immer gleichen Aufbau.

Bei der Erstellung der Reviews folgt Bethany einem wiederkehrenden Muster, wodurch es für den Leser leicht wird, unterschiedliche Fonts miteinander zu vergleichen. Besonders die historische Einordnung nebst bildhafter Nachweise, sowie die Verwendungsbeispiele in aktuellen Designs finde ich persönlich überaus interessant.

Auch Kritik an den vorgestellten Schriften wird nicht ausgespart. Es handelt sich also nicht um eine Art Schrein für die Glorifizierung von Fonts, sondern um eine praxisbezogene Darstellung der Vor-, aber auch der Nachteile und Eigenartigkeiten der betrachteten Schriften.

Designer, die der englischen Sprache mächtig sind, sollten das „Font Review Journal“ auf jeden Fall in ihre Bookmarks aufnehmen.

Kategorien
(Kostenlose) Services Design E-Business Essentials Icons & Fonts SEO & Online-Marketing Social Media

Emojis: Nützliches rund um die beliebten Symbole

Der Aufstieg der Smartphones war auch zugleich der Aufstieg der Emojis. Kaum eine Kurznachricht kommt heutzutage ohne die kleinen Symbole aus.

Kategorien
Essentials Icons & Fonts

Gilbert: Hol dir die Regenbogen-Fahne als kostenlose Schrift

Gilbert Baker ist tot. Der Designer der Regenbogen-Fahne, die weltweit als Symbol für die Bewegung der Schwulen und Lesben steht, wird posthum mit einer nach ihm benannten Schriftart geehrt.

Gilbert Baker: Type with Pride

Baker hatte die Fahne in den Farben des Regenbogens 1978 für den „Gay Freedom Day” in San Francisco geschaffen. Jede Farbe steht dabei für ein Thema, etwa Pink für Sexualität oder Grün für die Natur. Schnell verselbständigte sich die eingängige Symbolik und verbreitete sich weltweit.

Um den Ende März 2017 verstorbenen Aktivisten und Künstler zu ehren, gaben NYC Pride, Organisator des jährlichen Pride-Events, sowie NewFest, die Vereinigung der schwulen und lesbischen Film- und Medienkünstler, die Entwicklung einer Schriftart in Auftrag, die nicht nur den Vornamen Bakers trägt, sondern auch die Symbolik seiner Regenbogen-Flagge aufgreift. Wie die Flagge selbst, ist auch die Schriftart namens Gilbert kostenlos und uneingeschränkt verfügbar.

Unter dem Motto „Type with Pride”, was gleichzeitig der Name der Website zum Font ist, soll Bakers Vermächtnis ins Digitale überführt werden. „Gilbert” gibt es als monochrome Schriftart im OpenType-Format .OTF und ist unter allen Betriebssystemen, die OTF unterstützen, nutzbar.

Gilbert, technisch als OpenType ausgeführt

Die farbige Variante ist eine OpenType-SVG-Version, die derzeit nur Nutzer von Photoshop CC 2017 in voller Pracht geießen und verwenden können. „Gilbert Color” ist dennoch unter allen Betriebssystemen, die OTF unterstützen zu installieren. In Programmen, die den Farbaspekt nicht unterstützen, wird „Gilbert Color” schlichtweg monochrom angezeigt. Dabei bleibt die Farbinformation erhalten. Öffnest du also einen mit „Gilbert Color” formatierten Text in Photoshop CC 2017, kannst du dich an den Farben erfreuen. Adobe hat dazu diesen Hilfetext für dich.

Farbige Schriften, sogenannte Chromatic Fonts, sind im Kommen und es wird wohl nicht lange dauern, bis wir Farb-Support auch in anderen Programmen sehen werden. „Gilbert” wird unter der Lizenz Creative Commons Attribution Sharealike 4.0 verteilt. Damit kann „Gilbert” kostenlos in persönlichen und kommerziellen Projekten verwendet werden, solange ein Link zum Urheber oder – bei Printprojekten, eine Nennung desselbigen erfolgt. Nimmst du Veränderungen an der Schriftart vor, verpflichtet dich die Lizenz, den so veränderten Font auch wieder kostenlos unter gleicher Lizenz verfügbar zu machen.

Gilbert ist noch „under heavy construction“

„Gilbert” ist aktuell eher eine Preview als ein vollständiger Font. Die Schrift wird aber fleißig ausgebaut. In diesem Beitrag schildern die Font-Experten von Fontself, wie sie von Ogilvy mit der Erstellung der Farbvariante beuaftragt wurden und wie sie mit dieser Herausforderung umgingen. Der Blog dient auch als Informationsquelle zum weiteren Ausbau der Schriftart. Angestrebt wird offenbar ein voller internationaler Support.

Hier bekommst du „Gilbert”.

Kategorien
Essentials Icons & Fonts Netzkultur und -politik

Icons for Change – The Noun Project zeigt Flagge

Ein Bild sagt mehr als tausend Worte. Das gilt immer, aber ganz besonders, wenn es um politischen Protest geht. Das weltbekannte Noun Project bringt sich genau an dieser Stelle ein.

Kategorien
Essentials Icons & Fonts Inspiration Tutorials

BetterWebType: Kostenloser Kurs für bessere Webtypografie

Auf BetterWebType könnt ihr einen E-Mail-Kurs mit 10 Lektionen zu besserer Webtypografie belegen. Der ist völlig kostenlos und wird von Matej Latin, dem Macher des Starter-Kits Gutenberg geleitet.

Kategorien
Icons & Fonts Webdesign

So findest du die perfekte Schrift für dein Web-Projekt

Das Lesen von längeren Texten auf einem beleuchteten Monitor ist zum Alltag geworden. Web-Fonts haben sich etabliert und immer mehr Inhalte werden auf Tablets oder mobilen Endgeräten angeboten um dort gelesen zu werden. Damit wachsen die Ansprüche an Schriften, was deren Darstellungsqualität auf verschiedenen Displays betrifft. Dennoch wurden die meisten Schriften, die heute im Einsatz sind, nicht für digitales Umfeld gestaltet. Häufig werden Schriftentwürfe aus vor-digitalen Zeiten mit technischen Hilfsmitteln – wie z.B. Hinting – für die Verwendung am Bildschirm optimiert. Doch Bildschirm-Optimierung muss früher beginnen!

So findest du die perfekte Schrift für dein Web-Projekt

Ich habe hier für euch einige Charakteristika zusammengetragen, die die Lesbarkeit am Bildschirm verbessern. Wenn ihr nach einer gut gemachten Schrift für Lesetexte am Bildschirm sucht, achtet auf diese Merkmale:

Offene Punzen, großzügige Laufweite (Schriften vlnr.: Tuna, Garamond, Arial and Fira)

So findest du die perfekte Schrift für dein Web-Projekt

Punzen (engl., counters), nicht druckende Innenflächen der Buchstaben, laufen bei kleinen Schriftgrößen schnell zu und bilden dunkle Stellen im Grauwert der Schrift, die den Blick des Lesers fesseln und den Lesefluss behindern. Um die nichtdruckenden Weißflächen deutlich sichtbar zu halten und auch bei kleinen Textgrößen einen gut sichtbaren Lichteinfall zu ermöglichen sind offene Formen (engl., open aperture) und eine große x-Höhe im Verhältnis zur Oberlänge (engl., ascenders) hilfreich.

Großzügige Laufweite und breite Buchstaben

Achtet auf die Buchstabenabstände! Eng gesetzte, schmal laufende Schriften eignen sich für Überschriften und hohe Schriftgrößen, aber im Fließtext brauchen Schriften mehr Platz. Die einzelnen Zeichen müssen breiter gestaltet werden, damit der Weißraum innerhalb einer Glyphe groß genug ist. Großzügige Buchstabenabstände verhindern Kollisionen zwischen den Zeichen und deutliche Wortabstände vereinfachen das Bilden von Wortgruppierungen beim schnellen Lesen.

Individuelle Buchstabenformen (Schriften vlnr.: Tuna, Garamond, Arial and Fira)

So findest du die perfekte Schrift für dein Web-Projekt

Individuelle Buchstabenformen sind vielleicht das wichtigste Kriterium von allen! Wenn die Zeichen zu ähnlich sind, muss ein Wort mehrmals gelesen werden. Wenn das Wortbild nicht klar genug ist, nimmt das Lesen daher mehr Zeit in Anspruch, vor allem wenn es schwierige Kandidaten wie „I“ und „l“ oder „B“ und „8“ enthält. Daher muss das Design eine gewisse Formenvielfalt in den Glyphen haben ohne die Harmonie im gesamten Zeichensatz zu beeinträchtigen.

Klarheit

Zu viele Details verwaschen das Aussehen in Fließtextgrößen; sie stören die Grundform der Buchstaben, die zur schnellen Identifizierung wichtig ist – Klarheit verbessert das Wortbild.

Haarlinien gehen leicht verloren (Serifen-Schriften vonu.: Tuna, Garamond and Bodoni)

So findest du die perfekte Schrift für dein Web-Projekt

Geringer Kontrast und robuste Serifen

Ein gängiges Problem von Serifenschriften am Bildschirm sind dünne Linien. Haarlinien gehen bei schlechten Druckbedingungen oder Beleuchtung von hinten leicht verloren, die Buchstaben scheinen aufzubrechen und in Einzelsegmente zu zerfallen. Robusten Serifen und ein geringer Strichstärkenkontrast lösen dieses Problem. Die meisten Serifenlosen besitzen sowieso einen geringen Strichstärkenkontrast, aber auch Serifen-Schriften lassen sich so gestalten.

An das Rechteck angenäherte Kreisbögen

Die meisten Schriften, die im Druck unter schlechten Bedingungen funktionieren, machen auch eine gute Figur am Bildschirm, doch einige Kriterien sind speziell für den Bildschirm von Bedeutung und haben direkt oder indirekt mit der Abbildung auf dem Pixelraster zu tun. Je »kantiger« eine Kurve, desto besser passt sie auf das Pixelraster. Kreisbögen sollten daher so weit wie möglich an die Rechteckform angenähert werden – was zusätzlich zu einer größeren Punze führt.

Manuelle Hinting-Informationen des Buchstaben (Schriftart Tuna)

So findest du die perfekte Schrift für dein Web-Projekt

Schriften basieren auf Vektoren, müssen auf dem Bildschirm aber als Pixel dargestellt werden. Normalerweise (ohne Hints) macht der Computer diese Umrechnung automatisch ohne dass der Gestalter darauf Einfluss hat. Beim Hinting werden in der Schrift Information abgelegt die dem Computer sagen, wie die Schrift im Pixel-Raster darstellt werden soll. Mit der TrueType-Technologie lassen sich diese Instruktionen sogar einzeln für jede Pixelgröße definieren (Delta Hints).

Gerade bei kleinen Schriftgrößen und geringen Auflösungen kann damit die Lesbarkeit enorm verbessert werden. Es lohnt sich, diesen aufwändigen Prozess manuell zu erledigen und sich nicht auf das automatische Hinting der Schriftgestaltungs-Software zu verlassen.

Gerade wenn die Vektoren auf ein kleines Pixelraster umgerechnet werden müssen, ist es hilfreich, wenn horizontale und vertikale Elemente die gleiche Strichstärke haben. Weil das bei dem meisten serifenlosen Schriften der Fall ist, hält sich hartnäckig das Gerücht, dass Serifenschriften für den Bildschirm weniger geeignet sind. Doch auch viele Serifenschriften haben eine betonte horizontale Achse mit massiven waagerechten Elementen und eignen sich ebenso für den Bildschirm.

Falls du herausfinden willst, wie Alex Rütten und ich den traditionellen Breitbandfeder-Schreibstil genutzt haben, um die Lesbarkeit ihrer neuen Schrift „Tuna“ am Bildschirm zu verbessern, oder einfach nur den Webfont testen willst, schau Dir diese Microsite an: Tuna Typeface.

Kategorien
Essentials Exklusiv bei drweb.de Icons & Fonts

Exklusiv bei Dr. Web: 350+ kostenlose Icons für unsere LeserInnen

Icons kannst du immer gebrauchen. Da geht es dir nicht anders als uns. Gemeinsam mit den Vektorakrobaten Vexels haben wir daher eine Symbolsammlung mit über 350 Piktogrammen erstellt, die du vollkommen kostenlos und frei zu jedem Zweck verwenden darfst. Viel Spaß damit.

Kategorien
Essentials Icons & Fonts

Best of 2016: 100 kostenlose Schriftarten

Typografie ist in den letzten Jahren immer stärker in den Fokus aktueller Trends gerückt und hat sich dementsprechend gewandelt. Man könnte wohl sagen, dass Typografie das derzeit einzige Gestaltungselement ist, das sich wirklich noch nennenswerter Änderungen unterzieht. Insofern ist es smart, hier auf dem Laufenden zu bleiben.