Zero-width web fonts allow us to clear the whitespace between inline-block elements without having to declare font-size: 0; on the parent element.

Various IE versions do not like font-size: 0; so font-size: 0.1px; is often suggested as an alternative. However, FireFox does not like font-size: 0.1px and rounds it up, negating its use. Using a "zero-width" font on our element provides us with whitespace clearing accross all font-face compatible browsers.

This repo contains a full set of @font-face ready web fonts, originally ported from Adobe's "Adobe Blank" font which was engineered for this purpose. I have also included an example CSS file that can be included in your project (NB: the files' src paths must be set according to your project's file structure).

Once the files and CSS have been correctly included in your project, you may apply the font to whichever element you which to clear whitespace on. This is typically the parent element that contains inline-block elements:

<div class="grid">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	...
</div>

.grid {
	font-family: 'zero-width';
}

.grid .item {
	font-family: 'helvetica'; 
}

/* NB: You will need to override on child items, as 'font-family' is a cascading property */

Because @font-face files may take a moment to load, often after the page has rendered, we can use the zero-width font in conjunction with font-size: 0; to create bullet proof whitespace clearing with elegant loading.

.grid {
	font-family: 'zero-width';
	font-size: 0;
}

.grid .item {
	font-family: 'helvetica';
	font-size: 1rem; 
}

• http://blog.typekit.com/2013/03/28/introducing-adobe-blank/
• http://css-tricks.com/fighting-the-space-between-inline-block-elements/
• http://davidwalsh.name/remove-whitespace-inline-block

This font is now kindly available via http://www.jsdelivr.com/'s CDN.

You may reference the following 5 source files in your own CSS, using the @font-face syntax of your choice.

//cdn.jsdelivr.net/font-zero-width/latest/zero-width.eot
//cdn.jsdelivr.net/font-zero-width/latest/zero-width.otf
//cdn.jsdelivr.net/font-zero-width/latest/zero-width.svg
//cdn.jsdelivr.net/font-zero-width/latest/zero-width.ttf
//cdn.jsdelivr.net/font-zero-width/latest/zero-width.woff

Alternatively, you can @import the ready-made CSS file:

@import url('//cdn.jsdelivr.net/font-zero-width/latest/zero-width.css');