aaronbarker

Ensign:Serif vs Fallbacks

A Pen by Aaron Barker on CodePen.

License.

aaronbarker

<h1>Viewport Sized Typography Visualizer</h1>
<p>At work we are exploring the potential use of <a href="https://css-tricks.com/snippets/sass/viewport-sized-typography-minimum-maximum-sizes/">Viewport Sized Typography with Minimum and Maximum Sizes</a>. As part of this exploration we realized that the "fluid" portion of a given min/fluid/max set of sizes would be different for each combination.  I wanted to make a visual reprsentation of how each set of sizes would overlap so we could make educated adjustments to the fluid portions and their overlaps to have the best experience possible.</p>

<div class="sizes">
	<h2>Size properties</h2>
	<div id="sizes__instructions" class="hide">
		<p>Provide the min/fluid/max settings for as many size combinations as you would like to see how their ranges will overlap. You can easily adjust the fluid portion via the slider for each size and then see how the combined sets of numbers will overlap.</p>
		<p>If you need a custom font that isn't installed, you can fork this pen,

aaronbarker

CSS Variables Polyfill

Just playing around. It won't be bulletproof, but enough to do some basics.

A Pen by Aaron Barker on CodePen.

License.

aaronbarker

Icon font using before for icon

Trying to find a good structure for doing icon fonts that can easily support icons and prefixes. Versions I see use extra markup, or when doing icons don't have the text which is bad for accessibility.

This version is attempting to use the before element as the icon

A Pen by Aaron Barker on CodePen.

License.

aaronbarker

<p>What's the best way to make an icon font based prefix and icon (no text) that doesn't require extra markup and is accessible (leaves text in place)? This is my current solution, and here is the <a href="http://codepen.io/aaronbarker/pen/oCbIx">journey I took to get here</a>. Below are examples as regular text and as buttons with border/padding. I found that different width glyphs introduced issues, so I have a normal, wide and thin, example of each below to make sure all is working correctly.</p>

<p>The one thing I don't like about this solution is the need for the 1em height (and associated box-sizing:content-box) on the icon version, this is requried to hide the text. Would love any alternatives.</p>

<p><a href="http://css-tricks.com/html-for-icon-font-usage/">Chris Coyier mentions</a> that Voice Over (on a mac) will read "HTML Content" when you use only a pseudo element as I have here. It doesn't appear to be doing so for me. I've emailed back and forth with him and he has thrown up a <a href="http://

aaronbarker

<p><span>Text</span> - <span class="icon-search">As a prefix</span> - <span class="icon-search icon">Longname as icon</span></p>
<div class="bigger">
  <p><span>Text</span> - <span class="icon-search">As a prefix</span> - <span class="icon-search icon">Longname as icon</span></p>
  <div class="bigger">
    <p><span>Text</span> - <span class="icon-search">As a prefix</span> - <span class="icon-search icon">Longname as icon</span></p>
  </div>
</div>
<h3>Buttons</h3>
<p>This is for testing padding added.</p>
<p><a class="btn">Text</a> - <a class="btn icon-search">As a prefix</a> - <a class="btn icon-search icon">Longname as icon</a></p>

aaronbarker

<p><span>Text</span> - <span class="icon-search">As a prefix</span> - <span class="icon-search icon">Longname as icon</span></p>
<div class="bigger">
  <p><span>Text</span> - <span class="icon-search">As a prefix</span> - <span class="icon-search icon">Longname as icon</span></p>
  <div class="bigger">
    <p><span>Text</span> - <span class="icon-search">As a prefix</span> - <span class="icon-search icon">Longname as icon</span></p>
  </div>
</div>
<h3>Buttons</h3>
<p>This is for testing padding added.</p>
<p><a class="btn">Text</a> - <a class="btn icon-search">As a prefix</a> - <a class="btn icon-search icon">Longname as icon</a></p>

aaronbarker

span {
	font-size:22px;
}
span:hover {
	color:#A6A39D;
}