Extended Entypo Glyph Set (EPS, PDF, PSD, Typeface, Web Font) Advertisement After endless suplications from the design community Daniel Bruce finally finished his update of the Entypo Glyph Set1 — a free set of universal 284 carefully crafted pictograms for regular design projects. The icons are available as EPS, PDF and Photoshop PSD files as well as desktop typefaces (TrueType, OpenType) and Web fonts. Download The Set For Free! This set contains a large collection of glyphs for all occasions and uses — common pictograms that shouldn’t be missing in anybody’s arsenal. The freebie is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported license2. Behind The Design As always, here are some insights from the designer: “The first Version was released in February 2012 and had around 120 glyphs. Thanks, Daniel! (jc) It's done.
Planning And Implementing Website Navigation Advertisement The thing that makes navigation difficult to work with in Web design is that it can be so versatile. Navigation can be simple or complex: a few main pages or a multi-level architecture; one set of content for logged-in users and another for logged-out users; and so on. Because navigation can vary so much between websites, there are no set guidelines or how-to’s for organizing navigation. Designing navigation is an art in itself, and designers become better at it with experience. It’s all about using good information architecture: “the art of expressing a model or concept of information used in activities that require explicit details of complex systems.” Organizing Navigation Structure Perhaps the most difficult part about navigation on the Web is organizing and designing it. Primary vs. Most websites, especially those with a lot of content or functionality, need navigation menus. 1SpeckyBoy2 Primary navigation stands for the content that most users are interested in.
CSS: Eigene Schriften einbinden - time4joomla Die Überschriften auf dieser Site bestehen aus einem Font, den ich per CSS eingebunden und entsprechend den Joomla-Klassen zugewiesen habe. Leider benutzen der Internet Explorer von Microsoft und die meisten anderen Browser unterschiedliche Fonttypen. Für die meisten Browser reicht ein True-Type-Font (TTF) aus. Die allermeisten Schriften, die sich im Internet finden, sind TTF-Schriften. Hat man seine Schriften zusammen, lädt man diese am besten direkt in das CSS-Verzeichnis des Templates und schreibt dann am Anfang der CSS-Datei dieses hier: 02. 03. font-family:meine_schrift; 04. src:url(fruitopia.eot); 08. 09. font-family:meine_schrift; 10. src:url(fruitopia.ttf); Dort wo man die Schriftart benutzen möchte, einfach so eingeben, wie in diesem Beispiel bei einer h3-Überschrift: 1.h3 { 2.font-family: meine_schrift; "meine_schrift" ist ein beliebiges Wort, welches den verwendeten Font kennzeichnet.
Nice Web Type iOS Fonts Pro tips: 20 steps to the perfect website layout | Web design When designing a website layout there are some common mistakes that often pop up, especially with interns and new designers. In this list of steps to the perfect website layout, we cover what every new website builder working within a digital agency should know and do before starting a new project, and what they should pay attention to during the process to avoid making these mistakes. These principles cover not only design aspects but also general workflow tips that will get the job done nicely. 01. Before starting the work you need to know what is it you are designing for. Good redesigns are not necessarily the most flashy ones but the ones that improve performance over time. 02. This seems very obvious but I've found too often that designers jump straight into their work before giving any thought to the problem they are trying to solve. Think about the content, the layout and the functionality before starting to drop shadows. 03. 04. It's as simple as it sounds. 05. 06. 07. 08. 09.
@font-face Beautiful web type — the best typefaces from the Google web fonts directory Lucius Annaeus Seneca60 AD Among the numerous faults of those who pass their lives recklessly and without due reflexion, my good friend Liberalis, I should say that there is hardly any one so hurtful to society as this, that we neither know how to bestow or how to receive a benefit. It follows from this that benefits are badly invested, and become bad debts: in these cases it is too late to complain of their not being returned, for they were thrown away when we bestowed them.
25 Hand Picked Sans-Serif Google Fonts When creating new website designs I always reach the point where I need an extensive font collection to enable me to experiment with different headline and body combinations. When coding the design into the browser I often use Google Fonts, this gives me a vast array of fonts to choose from, all of which are also free to use and download! Take a look and download some of my recently used sans-serif fonts which are compatible with Google Fonts and let me know some of your favorites. Yanone Kaffeesatz Droid Sans Josefin Sans Open Sans Abel Poiret One Quattrocento Sans Dosis Ruluko Muli Quicksand Gudea Advent Pro Chivo News Cycle PT Sans Narrow Economica Antic Marvel Puritan
Lessons We Learned from Our Biggest UX and Design Mistakes We’ve finally hit the 500,000-user mark at Buffer, a product that helps you share on your social media networks more efficiently. About two years ago when we started on our path to building Buffer, we knew we’d be meeting obstacles and making mistakes along the way. One of the main things we’ve kept in mind is that making mistakes is unavoidable and that if we choose to learn from them, they’ll be helpful in giving us good guidance on how to move forward more effectively. And I believe that it’s partly because of these mistakes that we were able to get to where we are today. The Experience That Shaped How We Build Our Product Before I discuss the biggest lessons we learned from some of our UX and design mistakes, I want to talk about one of our primary product development principles: "Validate first, code later" Let me tell you how this came about. A few minutes into his coding session, he realized that that wasn’t the way to go. So he tried something else. This is how we learned this lesson.
Stylesheets / CSS-Eigenschaften / Schriftformatierung mit Schriftartendatei @font-face, src, font-family (Schriftformatierung mit Schriftartendatei) Von diesen in CSS2 eingeführten Angaben wurde nur @font-face vom Internet Explorer und Netscape 4.x unterstützt. Da sie weder in den Mozilla-Nachfolgern noch in anderen aktuellen Browsern implementiert sind, gehören sie in CSS 2.1 nicht mehr zum Standard! Sie sollten also stets auch passende Alternativ-Schriftarten angeben, wenn Ihre Seiten nicht ausschließlich von Nutzern des Internet Explorer besucht werden (die die Schriftart-Installation bei hoher Sicherheitsstufe auch bestätigen). Über @font-face können Sie für den Internet Explorer eine Schriftart definieren und dabei direkt die Daten-Ressourcen der gewünschten Schriftarten ansprechen, also bestimmte Schriftartendateien. font-family verwenden. Beispiel: Erläuterung: Mit @font-face starten Sie die Angabe einer exakten Schriftart in einem style-Bereich. Den Schriftartennamen vergeben Sie mit der Angabe font-family: innerhalb des @font-face-Bereichs. Impressum
Adobe® Edge Web Fonts CSS3 @font-face Design Guide Although CSS3 @font-face is supported by most major browsers (IE, Firefox, Chrome, and Safari), but not all. When it doesn't, your custom fonts might break the layout or come out with undesired results. In this article, I will explain the common issues with using custom fonts, picking the matching fallback web safe fonts, and how to create a perfect fallback font style with Modernizr. Common Mistake One common mistake that most people make when implementing custom fonts is not specifying the fallback fonts or picking the wrong fallback fonts. Web Safe Fallback Fonts When using custom fonts, it is important to include the web safe fonts as fallback. Layout Issues Because every font face has its own width, height, weight, kerning (letter-spacing), etc., some fonts are not substitutable with the web safe fonts. This might causes layout issues as shown in the image below where the fallback font extends off the boundary. Modernizr Fallback Font Styles With Modernizr (demo) Including Modernizr