Free Icon Fonts for Web User Interfaces

iOS Fonts 15 sites web developers and designers should know Creating a good website isn't an easy task, but there's a few tools that can definitely make your developer or designer life easier. In this article, I have compiled 15 extremely useful website that any web developer or web designer should have bookmarked. ColorCombos When designing a website, one of the firsts (and most important) steps of the process is to choose a color scheme. Color Combos allow you to browse thousand of different colors combinations for getting inspired for your upcomming design. LIpsum Who doesn’t know the extremely popular Lorem Ipsum text? What the font? You just saw a logo or website using a particular font and you enjoyed it. ConvertIcon Favicons are a must have for any website, mostly because on modern browsers as such as Firefox, it is displayed along with the site name in tabs. BgPatterns background Patterns is definitely one of the current webdesign trends. HTML Encoder Do you display code on your website? Test Everything Sprite Generator Load Impact IconFinder

Typekit Adobe Love I CAME to AdobeMAX in Los Angeles to give a talk to a room full of designers. Before arriving, I thought of Adobe as a historically important 20th century company that was slowly leaking relevance—a company web designers in the era of responsive design have begun to think of with a combination of fondness and embarrassment, like a beloved but somewhat shameful old uncle. I came to LA with those perceptions, but I leave with the impression of an exciting 21st century company in emergence. Realistic products for a magical age The products I saw were both amazing and realistic. That was the amazing part, but the equally important realistic part was that nobody was pretending this tool would be used to deliver final code on your website. We are now them More than that. It makes me feel good about the future, when so many other things conspire to make us feel the opposite. Filed under: Adobe, business, State of the Web, Typekit Web Design Manifesto 2012 THANK YOU for the screen shot.

Loading Typekit fonts asynchronously Update: We now offer an official asynchronous embed code through the Kit Editor, so you no longer have to create your own. Details are available in this blog post. The standard Typekit embed code has many advantages. It’s simple, compact, very easy to implement, and automatically helps to prevent the flash of unstyled text (or FOUT). These advantages make it the right choice for the vast majority of sites. The asynchronous loading patterns that we’ll discuss in this post provide a useful alternative in situations where you must eliminate any possibility that a problem loading the kit could interfere with loading the rest of the page. In fact, we use the font events asynchronous pattern described below on the Typekit status blog to ensure that our users can reliably read about our system status, even during a font network outage or degradation. Standard Typekit embed code Typekit’s standard embed code is just a simple pair of <script> tags. Standard asynchronous pattern How to use it:

Fighting the @font-face FOUT FOUT is what I’m calling the flash of unstyled text that you get while using @font-face in Firefox and Opera. Heads up, lots of things have changed around this stuff. check out all the updates on this post! In June, Remy Sharp documented the how a browser progressively renders a page using @font-face. Here’s how in Firefox; basically the text is in a default webfont until the custom font is ready: Webkit takes a very different approach, and very intentionally. I really don’t like the text upgrade FOUT, so I personally prefer webkit’s technique. Best practices for serving fonts: Minimize the overall kilobyte size of your font file. When exactly do browsers download the font file? Garrick at Kernest tipped me off to IE’s interesting behavior here. After some research we can see when the asset download is initiated: I’ve put up a test page where you can experiment and watch your dev tools to see when the file is grabbed. In what cases will you get a FOUT This should run in the <head> somwhere: