Font Stack Builder | Build and preview your CSS web font stacks!
Want to preview your own header text? Just edit any box and hit "Return" to update. Paragraph text is static. Ideal Font Start by choosing your ideal font, often the least-commonly available in the stack. You can leave this (or any other) field blank if your ideal font is also on one of the other lists. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. percent of users will have this font Mac Option Next, choose a fallback for Mac users (roughly 12% market share). Windows Option Now, choose a fallback for Windows users (roughly 85% market share). Linux Option And last, a fallback for Linux users (roughly 3% market share). Web-Safe Font "Web-Safe Fonts" are fonts that are installed on nearly all computers by default. Default Last of all, specify a general fallback for the tiny percentage of users who do not even have the "Web-Safe" fonts available. Voila! Credits Site design © Erin Lawrence, 2011. Mm
cf_SelectSwap
DD_roundies: Code-only rounded HTML boxes
2011/4/8: It is high time I update the documentation here. This plugin got as far as supporting IE8 Release Candidate 1. That was a while ago. Things have changed. I spent some time away from the project before IE8 final was released. Foolishly, I never wrote anything to this effect because I'd hoped to give it a new college try at some point. Turns out I like riding my bicycle during my free time more than maintaining this project. That said, IE9 is supposedly offering itself as an update. This was a neat experiment, but note that I never took the version numbers out of "alpha" mode. If I were truly sore on this subject, I would take this page down; I will leave it up for posterity instead. This is a Javascript library that makes creation of rounded-corner HTML boxes easier, with a focus on Internet Explorer. IE is supported through use of VML. Since Opera doesn't currently (time of writing: 2009-01-01) support border-radius, this library doesn't do anything in Opera. Table of Contents
DD_belatedPNG: Medicine for your IE6/PNG headache!
2011/4/8: This is no longer an actively maintained project. I apologize, I must move on with current events. This is a Javascript library that sandwiches PNG image support into IE6 without much fuss. You can use PNGs as the SRC of an <IMG/> element or as a background-image property in CSS. If you attempt the latter, you will find that, unlike with vanilla usage of AlphaImageLoader, background-position and background-repeat work as intended. As a bonus, "fixed" elements will respond to a commonly used set of Javascript style assignments, as well as the A:hover pseudo-class. Table of Contents Long story short, this uses Microsoft's implementation of VML instead of Microsoft's AlphaImageLoader filter. The intended implementation is pretty easy: Download a copy of the DD_belatedPNG Javascript file - please do not hotlink mine, I am on a shared host. Due to popular demand, here is some documentation for how to "fix" elements on a pick-and-choose basis. (Based on the normal usage approach)
Software/Fonts
Fonts Lists of Free/Libre and Open Unicode fonts Draft Recommendations for Default Unicode Fonts By Script Introduction Free/Libre Open Source (FLOSS) desktop infrastructure has matured rapidly in the last few years. As part of this phenomenon, an increasing number of modern Unicode fonts for numerous human scripts have become available under FLOSS licenses such as the GPL, Vera Bitstream-style licenses, and, most recently, the Open Font License (OFL) As GNU/Linux and other Free Software / Open Source operating systems become mainstream all over the world, there is an increasing need for distributors of these operating systems to be able to build out font infrastructure from a common basis or set of standards. The task of choosing a set of default fonts has both objective and subjective aspects to it. Testing For testing fonts, especially OpenType ones, please read African Scripts American Scripts
Removing The Dotted Outline
Anchor links (<a>'s) by default have a dotted outline around them when they become "active" or "focused". In Firefox 3, the color is determined by the color of the text. I believe in previous versions and in some other browsers it is by default gray. This is default styling for the purpose of accessibility. For folks without the ability to use a mouse, they still need some visual indicator that they currently have a link active (so, for example, they can press enter to navigate to that link). You can try it for yourself by clicking on a link and mousing off of that link before letting go. Usually, this default styling isn't a big deal. Bear in mind that this styling literally uses the "outline" CSS property. How to remove it If you want it gone, and you want it gone on every single anchor link, just include this as a part of your CSS reset: Make sure to add in new focus styles a:hover, a:active, a:focus { // styling for any way a link is about to be used } Wow. Flash Firefox Inputs Share On
CSSrefresh - automatically refresh CSS files
How to fix the superscript and subscript line-height problem with CSS
If you code CSS / XHTML, you are most likely familiar with the Superscript and Subscript tags. If you use these tags in a situation where there are multiple lines of text you might run into a common problem. The problem is that the Super or Subscript characters push the lines of text further apart to make room for the character. Here’s another method some people use which you can try.
Is there a web-safe Helvetica Neue CSS font-family stack? « Rachael L. Moore
Or: I would love to know how to use Helvetica Neue on the web Or: No, really, was this always so complicated? In this context, when I say “safe”, I don’t mean “using only web safe fonts”, I mean “how the heck do you get the non-web-safe-font to show up when you know you have it”? I never noticed before having so much trouble figuring out what a font’s name should be in a font stack. Sometimes, for a particular system, I’ve looked up a “better” font to add to the font stack, but.. Wondering what I’m talking about? It’s relevant to a design I’m working on right now. Unfortunately, searching the web for how to do this has raised more questions for me than it answered. The challenges are several: First, it seems that different systems — either having to do with the operating system or the browser — deal with spaces differently (or something)? #1 – Spaces? One system might recognize “HelveticaNeue” and another “Helvetica Neue.” #2 – Weights and Stretch Grasping at Font Stacks
CSS3 PIE: CSS3 decorations for IE
