<?xml version="1.0" encoding="UTF-8"?>
 <rdf:RDF xmlns="http://purl.org/rss/1.0/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:syn="http://purl.org/rss/1.0/modules/syndication/" xmlns:admin="http://webns.net/mvcb/">
  <channel rdf:about="http://pinboard.in">
    <title>Pinboard (Aetles)</title>
    <link>https://pinboard.in/u:Aetles/public/</link>
    <description>recent bookmarks from Aetles</description>
    <items>
      <rdf:Seq>	<rdf:li rdf:resource="https://rsms.me/interface/"/>
	<rdf:li rdf:resource="http://www.colorfonts.wtf/"/>
	<rdf:li rdf:resource="http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align"/>
	<rdf:li rdf:resource="http://www.designyourway.net/blog/web-and-mobile-design/yes-you-can-actually-make-these-text-effects-in-css/"/>
	<rdf:li rdf:resource="http://www.practicallyefficient.com/2016/04/24/outsmarting-the-smart-dash.html"/>
	<rdf:li rdf:resource="http://tholman.com/texter/"/>
	<rdf:li rdf:resource="http://pi.co/erik-spiekermann/"/>
	<rdf:li rdf:resource="https://www.typewolf.com/blog/most-popular-fonts-of-the-year"/>
	<rdf:li rdf:resource="https://www.youworkforthem.com/fontpath/"/>
	<rdf:li rdf:resource="https://medium.com/@mach/the-secret-of-san-francisco-fonts-4b5295d9a745"/>
	<rdf:li rdf:resource="http://codepen.io/CrocoDillon/pen/fBJxu"/>
	<rdf:li rdf:resource="http://kennethormandy.com/journal/efficient-web-type-circa-1556"/>
	<rdf:li rdf:resource="http://www.smashingmagazine.com/2015/06/17/responsive-typography-with-sass-maps/"/>
	<rdf:li rdf:resource="http://www.typewolf.com/cheatsheet"/>
	<rdf:li rdf:resource="http://wordmark.it/"/>
	<rdf:li rdf:resource="http://www.frerejones.com/blog/typeface-mechanics-001/"/>
	<rdf:li rdf:resource="http://www.entypo.com/"/>
	<rdf:li rdf:resource="http://femmebot.github.io/google-type/"/>
	<rdf:li rdf:resource="http://zencode.in/lining.js/"/>
	<rdf:li rdf:resource="http://brick.im/"/>
	<rdf:li rdf:resource="http://www.typeandgrids.com/blog/the-ten-most-popular-web-fonts-of-2013"/>
	<rdf:li rdf:resource="http://typefacts.com/news/die-besten-fonts-2013"/>
	<rdf:li rdf:resource="http://simplefocus.com/flowtype/"/>
	<rdf:li rdf:resource="http://typehunting.com/"/>
	<rdf:li rdf:resource="http://practicaltypography.com/"/>
	<rdf:li rdf:resource="http://blog.typekit.com/2013/08/14/understanding-letters/"/>
	<rdf:li rdf:resource="http://typewonder.com/home"/>
	<rdf:li rdf:resource="http://www.typewolf.com/"/>
	<rdf:li rdf:resource="http://webfontscorner.com/"/>
	<rdf:li rdf:resource="http://www.newnet-soft.com/blog/csstypography"/>
	<rdf:li rdf:resource="http://seanwes.com/learn/"/>
	<rdf:li rdf:resource="http://blog.typekit.com/2013/04/11/three-exemplary-typefaces-for-user-interfaces/"/>
	<rdf:li rdf:resource="http://blogs.adobe.com/typblography/2013/03/introducing-adobe-blank.html"/>
	<rdf:li rdf:resource="http://typographica.org/features/our-favorite-typefaces-of-2012/"/>
	<rdf:li rdf:resource="http://timepiece.inostudio.de/"/>
	<rdf:li rdf:resource="http://www.marksimonson.com/fonts"/>
	<rdf:li rdf:resource="http://generatedcontent.org/post/44751461516/finer-grained-control-of-hyphenation-with-css4-text"/>
	<rdf:li rdf:resource="http://typeplate.com/"/>
	<rdf:li rdf:resource="http://asserttrue.blogspot.se/2013/01/the-serif-readability-myth.html"/>
	<rdf:li rdf:resource="http://daneden.me/type/"/>
	<rdf:li rdf:resource="http://snook.ca/archives/html_and_css/font-size-with-rem"/>
	<rdf:li rdf:resource="http://bueltge.de/free-web-font-combinations/"/>
	<rdf:li rdf:resource="http://jasonsantamaria.com/articles/baseline-grids-on-the-web"/>
	<rdf:li rdf:resource="http://blogs.adobe.com/typblography/2012/09/source-code-pro.html"/>
	<rdf:li rdf:resource="http://www.edgefonts.com/"/>
	<rdf:li rdf:resource="http://www.typography.com/fonts/font_overview.php?productLineID=100043"/>
	<rdf:li rdf:resource="http://2011.newadventuresconf.com/audio/mark.html"/>
	<rdf:li rdf:resource="http://www.fontshop.com/blog/newsletters/dec2011c/"/>
	<rdf:li rdf:resource="http://line25.com/tutorials/how-to-create-a-stylish-drop-cap-effect-with-css3"/>
	<rdf:li rdf:resource="http://www.youthedesigner.com/2011/11/22/30-sleek-fonts-for-your-minimalist-design/"/>
	<rdf:li rdf:resource="http://cssfontstack.com/"/>
	<rdf:li rdf:resource="http://www.fontseek.info/"/>
	<rdf:li rdf:resource="http://trentwalton.com/2011/08/10/web-fonts-i-look-forward-to-using/"/>
	<rdf:li rdf:resource="http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax"/>
	<rdf:li rdf:resource="http://www.zachleat.com/web/2011/01/11/bigtext-makes-text-big/"/>
	<rdf:li rdf:resource="http://ubiquitic.com/blog/2010/06/on-justified-text-in-reader.html"/>
	<rdf:li rdf:resource="http://www.typography.com/email/2010_03/index_tw.htm"/>
	<rdf:li rdf:resource="http://www.pensee.com/dunham/smartQuotes.html"/>
      </rdf:Seq>
    </items>
  </channel><item rdf:about="https://rsms.me/interface/">
    <title>Interface font family</title>
    <dc:date>2017-08-23T20:26:09+00:00</dc:date>
    <link>https://rsms.me/interface/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Interface is a font for highly legible text on computer screens.
Download the latest release or try it out in the playground]]></description>
<dc:subject>fonts opensource typography webfonts</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:60e8bbc1aa15/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:opensource"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.colorfonts.wtf/">
    <title>Color fonts! WTF? 🌈</title>
    <dc:date>2017-03-12T22:06:44+00:00</dc:date>
    <link>http://www.colorfonts.wtf/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[They are the next big thing in graphic design
They bring multiple colors, shades, textures and transparency to type 
They include vector shapes, bitmap images or even both into font files]]></description>
<dc:subject>color typography fonts webdesign design</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:2fae968274b1/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:color"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align">
    <title>Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira</title>
    <dc:date>2017-02-17T21:28:20+00:00</dc:date>
    <link>http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.
For example, line-height can be set as a length or a unitless value 1, but the default is normal. OK, but what normal is? We often read that it is (or should be) 1, or maybe 1.2, even the CSS spec is unclear on that point. We know that unitless line-height is font-size relative, but the problem is that font-size: 100px behaves differently across font-families, so is line-height always the same or different? Is it really between 1 and 1.2? And vertical-align, what are its implications regarding line-height?
Deep dive into a not-so-simple CSS mechanism…]]></description>
<dc:subject>css font line-height typography webdevelopment webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:8ae59f6dd548/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:font"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:line-height"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.designyourway.net/blog/web-and-mobile-design/yes-you-can-actually-make-these-text-effects-in-css/">
    <title>Cool CSS Text Effects - 20 Amazing Examples</title>
    <dc:date>2016-09-01T09:18:14+00:00</dc:date>
    <link>http://www.designyourway.net/blog/web-and-mobile-design/yes-you-can-actually-make-these-text-effects-in-css/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[CSS3 is considered to be a true revolution when it comes to web development. The new properties contained in CSS3 allow developers to visually enhance their designs in such a way that is not only impressive in a visual sense, but is also quick and easy.
Web typography is one major thing that has dramatically changed with CSS3. You can make your design look attractive with typography and make everything visually appealing.
When it comes to web design, CSS will help you to obtain many different font effects, including using such effects as animation and clipping to spice things up a bit.
To help further illustrate this, we’ve put together a list of effects that are visually stunning and beautiful, all of which are made possible through CSS, and some of them with a little bit of Javascript as well.]]></description>
<dc:subject>css text webdesign animation typography webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:197eb7109e4c/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:text"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:animation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.practicallyefficient.com/2016/04/24/outsmarting-the-smart-dash.html">
    <title>Outsmarting the smart dash</title>
    <dc:date>2016-04-25T20:59:03+00:00</dc:date>
    <link>http://www.practicallyefficient.com/2016/04/24/outsmarting-the-smart-dash.html</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[All that to say, it’s unfortunate that you can’t separately turn on/off smart dashes and quotes in System Preferences. Fortunately, though, you still can through Terminal with:

defaults write 'Apple Global Domain' NSAutomaticDashSubstitutionEnabled 0
This command turns off smart dashes, allowing you to preserve --, etc. in any document, but it allows smart quotes to continue functioning. Interestingly, System Preferences will show the smart dashes and smart quotes box unchecked after this change even though smart quotes still work.]]></description>
<dc:subject>macosx typography osx mac</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:98e47050679d/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:macosx"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:osx"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:mac"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://tholman.com/texter/">
    <title>Texter</title>
    <dc:date>2016-02-23T18:38:31+00:00</dc:date>
    <link>http://tholman.com/texter/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Texter is a little javascript experiment that lets you explore your creativity by drawing with words. This app is an extension of a demo from this book Made by: Tim Holman - @twholman This has been made using Javascript and the HTML5 canvas element. You can find the source on Github ]]></description>
<dc:subject>art text typography drawing creative</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:88b72c9d019f/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:art"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:text"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:drawing"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:creative"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://pi.co/erik-spiekermann/">
    <title>A Conversation With Erik Spiekermann</title>
    <dc:date>2016-02-07T10:16:54+00:00</dc:date>
    <link>http://pi.co/erik-spiekermann/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Erik Spiekermann has forgotten more things than most successful and creative people know in their lifetime. Now in his sixties (68), the German-born designer and typography guru remains as excited about the future as ever.

Erik Spiekermann is one of the most well-known and creative thinkers in design. A type, information and graphic designer by trade, he began his career teaching at the London College of Printing in the 1970s. In 1979, Spiekermann co-founded MetaDesign in Berlin, and in the 1980s, at the cusp of the PC revolution, he co-founded FontShop, a distributor of electronic fonts. He has designed fonts such as Berliner Grotesk, ITC Officina, Nokia Sans and FF Meta. He is also the co-founder of design house Edenspiekermann. He divides his time between Berlin and the Bay Area.]]></description>
<dc:subject>design typography mac history print apple web reading ebooks</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:d04c3d7eb83e/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:mac"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:history"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:print"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:apple"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:reading"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:ebooks"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.typewolf.com/blog/most-popular-fonts-of-the-year">
    <title>The Ten Most Popular Web Fonts of 2015 (And Fonts You Should Consider Using Instead) → Typewolf</title>
    <dc:date>2016-01-13T14:14:20+00:00</dc:date>
    <link>https://www.typewolf.com/blog/most-popular-fonts-of-the-year</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Welcome to the third annual edition of the ten most popular web fonts of the year as featured on Typewolf. Based on font usage data from 365 websites featured over 2015, these are the ten fonts that were used the most often. You can check out the previous year’s lists for 2014 and 2013 as well.

While reviewing the data for this year, I noticed something a little disconcerting: this year’s top ten list is almost identical to the top ten list from 2014. Other than swapping out Franklin Gothic with Brown, these are exactly the same ten fonts that were featured the most on Typewolf last year.

I curate all the sites featured on Typewolf – so I may be partially to blame for this – however, the sites I feature tend to be a solid representation of what is popular in the design community. About one-third of the sites featured are submissions that people send to me while the remaining two-thirds are sites that I find featured on other popular design gallery sites, Designer News, Twitter, etc. Overall, I think this list generally shows what fonts are most popular with designers at the moment.

So in the spirit of hopefully making type a little more diverse on the web, I decided to list four alternatives for each of the ten fonts featured here. The alternatives all fit a similar aesthetic yet aren’t used quite as much. They may be worth looking into if you want to stand out a little from the crowd.

As always, this is an independent source of data that includes all fonts regardless of where the fonts can be purchased (including indie foundries that don’t make their fonts available on popular services such as MyFonts and Typekit).

Ok, on to the top ten!]]></description>
<dc:subject>design fonts typography webdevelopment webdesign webfonts</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:40fcf2928215/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://www.youworkforthem.com/fontpath/">
    <title>FontPath by YouWorkForThem</title>
    <dc:date>2015-10-02T20:27:40+00:00</dc:date>
    <link>https://www.youworkforthem.com/fontpath/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[FontPath is a web-based tool that speeds up the font buying process. You can easily locate, sort, adjust, re-size, customize and compare our 35,000+ fonts to quickly narrow down the font(s) you need.]]></description>
<dc:subject>fonts webfonts typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:bae4663b4c65/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="https://medium.com/@mach/the-secret-of-san-francisco-fonts-4b5295d9a745">
    <title>The Secret of the Apple’s New San Francisco Fonts — Medium</title>
    <dc:date>2015-09-22T09:42:07+00:00</dc:date>
    <link>https://medium.com/@mach/the-secret-of-san-francisco-fonts-4b5295d9a745</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[iOS 9 is now publicly released. It’s a subtle change but the system fonts of iOS 9 are now changed to the Apple’s new San Francisco fonts, replacing the previous Helvetica Neue.

San Francisco fonts have been used in Apple Watch already, and San Francisco is now the standard font unifying the Apple platform: Apple Watch, iPhone, iPad and Mac.

Apple has been using Helvetica as the system fonts for iOS since the first iPhone, and they also switched the fonts from Lucida Grande to Helvetica for Mac OS X since 10.10 Yosemite. Why did Apple decide to ditch Helvetica, which is the most famous and loved font in the world?]]></description>
<dc:subject>apple fonts osx watchos ios typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:63eb5304a64b/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:apple"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:osx"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:watchos"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:ios"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://codepen.io/CrocoDillon/pen/fBJxu">
    <title>Mixing vw and vh in font-size</title>
    <dc:date>2015-08-27T14:23:57+00:00</dc:date>
    <link>http://codepen.io/CrocoDillon/pen/fBJxu</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Using calc in combination with vw and vh units for font-size to create text that always fills the viewport. No matter what ratio.]]></description>
<dc:subject>css typography webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:3c4e30f186d7/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://kennethormandy.com/journal/efficient-web-type-circa-1556">
    <title>Efficient Web Type, c. 1556</title>
    <dc:date>2015-07-22T17:12:19+00:00</dc:date>
    <link>http://kennethormandy.com/journal/efficient-web-type-circa-1556</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Load fonts with JavaScript

When loading fonts, we have the opportunity to use CSS alone, or to use JavaScript and CSS together. Conventional web development wisdom often suggests that we should only turn JavaScript when we need to. In this situation, JavaScript is necessary to influence how readers perception of how quickly the fonts have loaded, based on the state they are.

A CSS-only approach, recommended by default on Google Fonts and some other services, would have you drop in a <link> tag or use a CSS @import statement:

<link href="http://typefound.ry/css?family=Klinic+Slab" rel="stylesheet">
@import url(http://typefound.ry/css?family=Klinic+Slab);
Despite this, choose the JavaScript-based option. If you are using a web font service that asks you to drop in a CSS link tag, there is probably an “Advanced Option,” too, that lets you paste in a JavaScript snippet. The later is going to be more beneficial to you.]]></description>
<dc:subject>typography history design webdevelopment webfonts fonts</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:993c4e038e75/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:history"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.smashingmagazine.com/2015/06/17/responsive-typography-with-sass-maps/">
    <title>Responsive Typography with Sass Maps</title>
    <dc:date>2015-06-25T20:11:06+00:00</dc:date>
    <link>http://www.smashingmagazine.com/2015/06/17/responsive-typography-with-sass-maps/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Managing consistent, typographic rhythm isn’t easy, but when the type is responsive, things get even more difficult. Fortunately, Sass maps make responsive typography much more manageable.
Writing the code is one thing, but keeping track of font-size values for each breakpoint is another — and the above is for paragraphs alone. Throw in h1 to h6s, each with variable font sizes for each breakpoint, and it gets cumbersome, especially when the type doesn’t scale linearly.]]></description>
<dc:subject>css design typography sass webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:e8176ed91261/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:sass"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.typewolf.com/cheatsheet">
    <title>Typewolf → A Comprehensive Guide to Smart Quotes, Dashes &amp; Other Typographic Characters</title>
    <dc:date>2015-03-25T11:20:40+00:00</dc:date>
    <link>http://www.typewolf.com/cheatsheet</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[A comprehensive guide to using proper typographic characters, including correct grammatical usage.]]></description>
<dc:subject>design typography mac osx writing</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:0915674fe5f8/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:mac"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:osx"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:writing"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://wordmark.it/">
    <title>wordmark.it - helps you choose fonts!</title>
    <dc:date>2015-02-12T15:46:50+00:00</dc:date>
    <link>http://wordmark.it/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[The Process

Choosing the ideal typeface for what you are trying to communicate can be frustrating with the available font browsing interfaces. Wordmark.it is designed to help with this font selection process by quickly displaying previews of any text with the fonts installed 
on your computer.

Type a word or a phrase in the text box 1 and click the load fonts button.
Scroll through the previews and choose the ones you are interested in by clicking on them.
Click the filter selected button 2 to isolate selected previews.
Finally note down the names of the selected fonts to be used in your image or text editing software.

You can also:

Adjust the size of the previews by entering a pixel value 3 or by clicking the smaller / bigger buttons 4
Invert preview colors 5 to test the fonts on a dark background.
Toggle between lower case (aa), Title Case (Aa) or UPPER CASE previews(AA) 6
Adjust letter spacing (tracking) of fonts in selections (<> button when you move your mouse over preview tiles)
Zoom in to explore intricate details of fonts in selections (+ button when you move your mouse over preview tiles)
Drag and sort the order of previews in selections to compare similar fonts side by side.
How It Works?

Wordmark.it detects the fonts installed on your computer with the help of a simple Adobe Flash script and displays the results using HTML and JavaScript. You need to have Flash plugin installed and JavaScript turned on. Font rendering relies on browser's capabilities and some of your installed fonts may not show up due to their names not being recognized by some browsers. Wordmark.it also works on iPhone and iPad without Flash, make sure to give it a try.

]]></description>
<dc:subject>fonts design typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:a4942b263115/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.frerejones.com/blog/typeface-mechanics-001/">
    <title>Frere-Jones Type | Typeface Mechanics: 001</title>
    <dc:date>2015-02-12T11:11:18+00:00</dc:date>
    <link>http://www.frerejones.com/blog/typeface-mechanics-001/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Our conscious minds want to draw one shape, but our eyes need to see another. Part of typeface design is managing this eternal friction between logic and optics. It’s always there, no matter the style.

This new series of posts will explore what I call “typeface mechanics”, the behind-the-scenes work that makes typefaces visually functional. It is what placates the stubborn oddities of human perception, helps or hinders the user, and informs long-standing conventions of design.

The typeface design process has many counterintuitive moments. One of the earliest pertains to vertical position and size, which we expect to be consistent among letters. We could simply pick a measure and apply it everywhere. But this straightforward and logical plan would fail, thanks to our eyes and brains.

Square shapes like H have a simple and stable relationship to the baseline and cap height. Their upper and lower edges coincide with these boundaries and stay put. But only a narrow sliver of an O is the full height, and the rest of the shape falls away. The parts that are too short greatly outnumber the parts that are big enough, so we conclude — wrongly, but very reliably — that the round shape is too small.]]></description>
<dc:subject>design fonts typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:e37bdcdc47a1/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.entypo.com/">
    <title>Entypo</title>
    <dc:date>2015-02-01T23:21:55+00:00</dc:date>
    <link>http://www.entypo.com/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[What is Entypo+?
Entypo+ is the third version of a free suite of premium quality pictograms. It’s released under the license CC BY-SA 4.0. Each pictogram has been drawn for pixel perfection at a size of 20 x 20 pixels and with a very consistent style. The difference between this version of Entypo and previous ones is that the suite now only consist of SVG images. There is no fonts or PSD. ]]></description>
<dc:subject>design fonts typography icons webdesign webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:1e62443b751a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:icons"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://femmebot.github.io/google-type/">
    <title>Google Web Fonts Typographic Project</title>
    <dc:date>2014-12-01T22:29:11+00:00</dc:date>
    <link>http://femmebot.github.io/google-type/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[HAND-PICKED TALES from
ÆSOP’S FABLES
with HAND-PICKED TYPE from
GOOGLE FONTS
There are over 650 Google Fonts available for free. But, pairing typefaces isn’t easy and many of those fonts don’t work for typical websites. Part of the 25x52 initiative, this collaborative, ongoing project offers inspiration for using Google’s font library.]]></description>
<dc:subject>design fonts typography webdesign webfonts</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:6a88eabc7985/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://zencode.in/lining.js/">
    <title>Lining.js</title>
    <dc:date>2014-11-26T14:45:10+00:00</dc:date>
    <link>http://zencode.in/lining.js/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[In CSS we already have the selector ::first-line to apply style on the first line of element. But there is no selector like ::nth-line(), ::nth-last-line() or even ::last-line. Then I read an article A Call for ::nth-everything from CSS tricks. ::nth-line() is actually really useful in some situation.

There comes LINING.JS. It offers you complete DOWN-TO-THE-LINE control like this:]]></description>
<dc:subject>css javascript typography webdevelopment</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:53cc56801040/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdevelopment"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://brick.im/">
    <title>Brick. Webfonts that actually look good.</title>
    <dc:date>2014-03-18T09:31:33+00:00</dc:date>
    <link>http://brick.im/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Why Brick?

Beautiful

We don't modify or subset the font in any way, so they are rendered the way they were meant to be seen.

Fast

Brick is served to your users through Fastly's industry-leading CDN network throughout.

Open source

Brick is entirely open-source, so in addition to being free, anyone interested can contribute to the project.

Mission

In the age of the Internet, we've found ourselves in yet another typographic battle. In an effort to speed up loading times, we've compressed fonts, and along the way, we've lost the majority of the quality of rendered type.

Let's change that. The fonts served by Brick are clones of the original, converted without modification to WOFF format for high quality rendering and fast loading across all modern browsers.

]]></description>
<dc:subject>css fonts typography webfonts</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:779813f1e159/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.typeandgrids.com/blog/the-ten-most-popular-web-fonts-of-2013">
    <title>The Ten Most Popular Web Fonts of 2013 — Type &amp; Grids</title>
    <dc:date>2014-02-16T10:03:50+00:00</dc:date>
    <link>http://www.typeandgrids.com/blog/the-ten-most-popular-web-fonts-of-2013</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[The use of web fonts has continued to explode in 2013 – designers are no longer content with using standard system fonts like Arial and Georgia. On my side project Typewolf, I categorize the latest website designs by the web fonts they use. These are the ten most popular fonts I’ve noticed from analyzing font usage on Typewolf in 2013.]]></description>
<dc:subject>design fonts typography webdesign webfonts</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:14d1338dbdca/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://typefacts.com/news/die-besten-fonts-2013">
    <title>Typefacts | Die besten Fonts 2013</title>
    <dc:date>2014-01-08T13:32:31+00:00</dc:date>
    <link>http://typefacts.com/news/die-besten-fonts-2013</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[The best fonts of 2013]]></description>
<dc:subject>fonts typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:cbe82585a1dd/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://simplefocus.com/flowtype/">
    <title>FlowType.JS — Responsive web typography at its finest: font-size and line-height based on element width.</title>
    <dc:date>2013-08-21T19:05:44+00:00</dc:date>
    <link>http://simplefocus.com/flowtype/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Web typography at its finest: font-size and line-height based on element width.]]></description>
<dc:subject>css javascript typography webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:4e82bd875d75/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://typehunting.com/">
    <title>Type Hunting</title>
    <dc:date>2013-08-20T13:29:11+00:00</dc:date>
    <link>http://typehunting.com/</link>
    <dc:creator>Aetles</dc:creator><dc:subject>design fonts typography inspiration</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:8ef0e237b67b/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:inspiration"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://practicaltypography.com/">
    <title>Butterick’s Practical Typography</title>
    <dc:date>2013-08-17T08:50:23+00:00</dc:date>
    <link>http://practicaltypography.com/</link>
    <dc:creator>Aetles</dc:creator><dc:subject>design fonts typography webdesign web</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:10203a2fd30c/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:web"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://blog.typekit.com/2013/08/14/understanding-letters/">
    <title>Understanding Letters | The Typekit Blog</title>
    <dc:date>2013-08-16T17:31:39+00:00</dc:date>
    <link>http://blog.typekit.com/2013/08/14/understanding-letters/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[In order to choose appropriate typefaces to set beautiful passages of text, it helps if we have a baseline for what constitutes ‘appropriateness’. The art and science of choosing a great typeface is in the details, and demands that we attempt to understand the fundamental building block of typography: a letter.

In his book The Elements of Typographic Style—a book I consider to be a must-read for any student of typography—Robert Bringhurst begins with this powerful phrase:

Typography exists to honor content.

If ever there was one sentiment to summarize everything ever written about typography, this is it. Some content shouts; other content whispers. Similarly, some typefaces shout while others whisper. Letters—and, by that, I actually mean glyphs—and the differences among them are what make this possible.]]></description>
<dc:subject>typography logotypes</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:3b1aecf630e0/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:logotypes"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://typewonder.com/home">
    <title>TypeWonder - Beta</title>
    <dc:date>2013-08-13T09:54:49+00:00</dc:date>
    <link>http://typewonder.com/home</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[TypeWonder, making the choice of web fonts so enjoyable!
Helps you to test web fonts on any web site on the fly ! Enter the site url and preview instantly the fonts with-out any hassle !]]></description>
<dc:subject>css fonts typography webfonts tool</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:45c6b5066f24/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:tool"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.typewolf.com/">
    <title>Typewolf — Typographic Inspiration for the Modern Web</title>
    <dc:date>2013-08-10T23:55:17+00:00</dc:date>
    <link>http://www.typewolf.com/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Typewolf is a curated design showcase that identifies the fonts used in the design. Our goal is to serve as a one-stop resource for designers seeking typographic inspiration for the modern web.]]></description>
<dc:subject>design typography web webdesign</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:e7d741317f5a/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:web"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://webfontscorner.com/">
    <title>Webfonts Corner - Home</title>
    <dc:date>2013-07-18T08:03:59+00:00</dc:date>
    <link>http://webfontscorner.com/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[webfontscorner is about
Webfontsonwebsites]]></description>
<dc:subject>design fonts typography webfonts</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:c20c0a5ed516/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.newnet-soft.com/blog/csstypography">
    <title>NewNet-Soft - CSS Typography cheat sheet</title>
    <dc:date>2013-06-22T22:05:19+00:00</dc:date>
    <link>http://www.newnet-soft.com/blog/csstypography</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Small roundup on CSS features that will enhance your web typography.
Today I want to write about a few small typography enhancing features in CSS. Most of them don't seem to be inside the mainstream CSS wisdom floating around (perhaps I am just missing them constantly :(...). So I decided to give them a quick shout out so more of you guys can make use of them.]]></description>
<dc:subject>css css3 design typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:afec9f5d0d4e/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://seanwes.com/learn/">
    <title>So you want to learn hand lettering? | hand lettering by seanwes</title>
    <dc:date>2013-04-15T09:16:43+00:00</dc:date>
    <link>http://seanwes.com/learn/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[So you want to learn hand lettering?

I’m often asked how to do hand lettering, or where one can go to learn hand lettering. Personally, I learned by observation and experimentation. I hope what I share here will serve as an invitation for you to explore the hand lettering techniques, methods, and styles that work for you so you can develop your own process. Don’t take what I share here as gospel, but rather view it simply as my story, and then hopefully take the inspiration to create your own.]]></description>
<dc:subject>design typography education</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:a5f82e6f8339/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:education"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://blog.typekit.com/2013/04/11/three-exemplary-typefaces-for-user-interfaces/">
    <title>Three Exemplary Typefaces for User Interfaces | The Typekit Blog</title>
    <dc:date>2013-04-15T08:56:08+00:00</dc:date>
    <link>http://blog.typekit.com/2013/04/11/three-exemplary-typefaces-for-user-interfaces/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[With the growing popularity of type design, the sea of typefaces from which to choose gets bigger every year. I’ll be the first to admit that, at times, the waters can be difficult to navigate. There are a lot of variables one must consider when selecting type, and these can be a struggle to prioritize.

Following up on my previous blog post, “Setting Type for User Interfaces”, I’ve chosen a few exemplary fonts from the Typekit library to serve as a reference for your next project. I believe each of the following three typefaces possesses the necessary qualities for distinguished employ within the realm of user interface design.]]></description>
<dc:subject>design fonts typography interface</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:25dafc51caa2/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:interface"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://blogs.adobe.com/typblography/2013/03/introducing-adobe-blank.html">
    <title>Introducing Adobe Blank « Typblography</title>
    <dc:date>2013-03-31T13:20:35+00:00</dc:date>
    <link>http://blogs.adobe.com/typblography/2013/03/introducing-adobe-blank.html</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[So, what in the world is such a font good for? According to the developer who made the request, Joel Brandt, it serves the following two purposes:

Invoking this font, as a temporary measure, prevents OS- or application-level font-fallback from kicking in before the intended font can be rendered.
Related to the above, using the font allows one to detect when a web font is actually loaded, which is arguably a hack to overcome a limitation in CSS.
About the second purpose, the actual usage is as follows:

Include Adobe Blank as a data URI in the CSS file.
Specify ‘font-family: SomeWebFont, “Adobe Blank” in the CSS rule for some DOM element that contains text (and would therefore have a non-zero width when rendered using a regular font). One example would be a <span> element that is absolutely positioned offscreen.
Check the width of the DOM element. If it’s zero, SomeWebFont hasn’t loaded yet. If it’s greater than zero, it has.]]></description>
<dc:subject>css fonts typography unicode webfonts</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:9354495026f7/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:unicode"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://typographica.org/features/our-favorite-typefaces-of-2012/">
    <title>Our Favorite Typefaces of 2012 | Typeface Reviews | Typographica</title>
    <dc:date>2013-03-14T18:49:27+00:00</dc:date>
    <link>http://typographica.org/features/our-favorite-typefaces-of-2012/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[I’ll be honest. When December rolls around and I ask a group of smart, articulate font users and makers to each select their favorite release of the year, not everyone rushes back with their pick. And when they do, they don’t always have much to say about it. Some years are stronger than others. 2012 was a strong year. The rich diversity in new type design has never been so evident.]]></description>
<dc:subject>design typography fonts</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:eefdfd6d34a9/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://timepiece.inostudio.de/">
    <title>Timepiece rounded | An Opentype Font displaying Time as an analogue Clock</title>
    <dc:date>2013-03-12T21:32:15+00:00</dc:date>
    <link>http://timepiece.inostudio.de/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Timepiece Rounded

is an OpenType-Font, which displays time – like 17:23:25 – as an analogue Timepiece.
It comes in three different flavours:
1. The Future Is Near 2. Miss Swiss 3. Blackförest (Clockwise, what else)]]></description>
<dc:subject>font fonts typography time webfonts</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:2eac12017444/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:font"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:time"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.marksimonson.com/fonts">
    <title>Fonts – Mark Simonson</title>
    <dc:date>2013-03-11T12:36:41+00:00</dc:date>
    <link>http://www.marksimonson.com/fonts</link>
    <dc:creator>Aetles</dc:creator><dc:subject>typography fonts webfonts</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:fb894741f735/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://generatedcontent.org/post/44751461516/finer-grained-control-of-hyphenation-with-css4-text">
    <title>Finer grained control of hyphenation with CSS4 Text - Generated Content by David Storey</title>
    <dc:date>2013-03-10T16:32:53+00:00</dc:date>
    <link>http://generatedcontent.org/post/44751461516/finer-grained-control-of-hyphenation-with-css4-text</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[CSS3 Text provides the ability to apply hyphenation to text, via the hyphens property. While this is all well and good, it doesn’t provide the fine grain control you may require to get professional results. For this, let me introduce to you CSS4 Text.]]></description>
<dc:subject>css3 css4 typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:4910d8362024/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css4"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://typeplate.com/">
    <title>Typeplate » A typographic starter kit encouraging great type on the Web</title>
    <dc:date>2013-03-05T10:14:05+00:00</dc:date>
    <link>http://typeplate.com/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Frameworks make decisions for you about how to organize, structure and design a site. Pattern libraries don’t separate styling and markup, making them tough to use in a truly modular fashion. We weren’t satisfied, so we made a thing that doesn’t do that.

Typeplate is a “typographic starter kit”. We don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped-down Sass library concerned with the appropriate technical implementation of design patterns—not how they look.]]></description>
<dc:subject>css design fonts typography sass</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:d88672a838f8/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:sass"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://asserttrue.blogspot.se/2013/01/the-serif-readability-myth.html">
    <title>assertTrue( ): The Serif Readability Myth</title>
    <dc:date>2013-01-23T08:58:01+00:00</dc:date>
    <link>http://asserttrue.blogspot.se/2013/01/the-serif-readability-myth.html</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[I've been involved in publishing all my life, and like many others I've always accepted as axiomatic the notion that typefaces with serifs (such as Times-Roman) are, in general, are more readable than non-serif typefaces (e.g., Helvetica). It never occurred to me that there was any doubt about the matter. Were the monks who invented serifs and other text ornamentations merely engaging in idle doodling? Weren't they consciously intending to increase the legibility of the important documents they were transcribing? 

It turns out that, as with so many of the things we "know" are right, the idea that serif typefaces are more readable than non-serif typefaces simply isn't supported by the evidence. ]]></description>
<dc:subject>typography fonts design</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:ed80895250e5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://daneden.me/type/">
    <title>Just My Type</title>
    <dc:date>2013-01-18T15:44:59+00:00</dc:date>
    <link>http://daneden.me/type/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[A collection of nice font pairings from Typekit.

Pairings with a price label indicate that certain fonts are only available on one of Typekit’s paid plans. If you ask me, it’s worth every penny.]]></description>
<dc:subject>css fonts typography webfonts</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:851a9e8308f8/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://snook.ca/archives/html_and_css/font-size-with-rem">
    <title>Font sizing with rem - Snook.ca</title>
    <dc:date>2013-01-04T16:03:20+00:00</dc:date>
    <link>http://snook.ca/archives/html_and_css/font-size-with-rem</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Sizing with rem
CSS3 introduces a few new units, including the rem unit, which stands for "root em". If this hasn't put you to sleep yet, then let's look at how rem works.

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.]]></description>
<dc:subject>css css3 fonts typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:74bbdcfcbe7d/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://bueltge.de/free-web-font-combinations/">
    <title>Beautiful web type combinations — maybe the best typefaces combinations from the Google web fonts directory</title>
    <dc:date>2012-11-13T09:10:27+00:00</dc:date>
    <link>http://bueltge.de/free-web-font-combinations/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[A showcase of great typeface combinations from the Google web fonts directory.
There are so much typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Below are examples of these typefaces in action. Hover for name of typeface and click the texts of examples to get the typeface from the Google web fonts directory.]]></description>
<dc:subject>fonts google webdesign typography webfonts</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:f20c779330e8/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:google"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://jasonsantamaria.com/articles/baseline-grids-on-the-web">
    <title>Baseline Grids on the Web | Jason Santa Maria</title>
    <dc:date>2012-10-22T12:01:07+00:00</dc:date>
    <link>http://jasonsantamaria.com/articles/baseline-grids-on-the-web</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Baseline grids are, ultimately, most useful in print. Print is a fixed medium where rhythm can have a powerful effect: after all, you can see a piece’s full boundaries. But beyond that, the grid’s most useful traits happen on paper. As light shines through paper when you are reading, the paper’s translucency reveals a ghost of the type from the reverse side of the page. Those lines need to adhere to the same baseline grid so that the baselines are in the same spot. If the baselines were misaligned, it would be very distracting to the reading process.
Again, these issues make baseline grids on the web a tough sell for me. If I’m going to use them, I want them to improve the design–but I also want to make sure maintaining them doesn’t create a ton of frustration.]]></description>
<dc:subject>css design typography grids print</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:6d7bd6774f33/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:grids"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:print"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://blogs.adobe.com/typblography/2012/09/source-code-pro.html">
    <title>Announcing Source Code Pro « Typblography</title>
    <dc:date>2012-10-11T08:42:45+00:00</dc:date>
    <link>http://blogs.adobe.com/typblography/2012/09/source-code-pro.html</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[One particularly surprising aspect of Source Sans’s release was the amount of interest generated by the teaser graphic of the monospaced version. It seemed that this generated about as much buzz as the fonts that we released. Brackets, the open source code editor created by Adobe, has just recently implemented the regular weight of Source Code into their project. Likewise, the font will be integrated into Adobe Edge Code, which was announced this morning at our Create the Web event in San Francisco. The complete family of six weights will also be available as part of our new Adobe Edge Web Fonts service, which was just announced this morning.


Why monospace?
As a font developer, I spend a good chunk of each day coding in a text editor and reading output messages from a terminal window, so I can appreciate the importance of a good monospaced font. Of course there is no technical limitation to using monospaced fonts when coding, but it is a very useful convention. When the Brackets team reached out to us on the Adobe type team, asking if we could develop a coding font for their open source application, we thought it made sense to adapt Source Sans, which I was working on at the time. Personally, I felt that I could use this opportunity to create a coding font that I would want to use myself. Given the existing family name, I couldn’t resist the opportunity to name the monospaced variant designed for coding applications Source Code.]]></description>
<dc:subject>font fonts programming typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:69ece7f75860/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:font"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:programming"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.edgefonts.com/">
    <title>Adobe® Edge Web Fonts</title>
    <dc:date>2012-09-26T09:14:04+00:00</dc:date>
    <link>http://www.edgefonts.com/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Edge Web Fonts is a free service that provides access to a large library of fonts for your web site. It’s one of the Edge Tools & Services from Adobe. Use of the fonts is free and unlimited, see the terms for details.]]></description>
<dc:subject>design fonts typography web</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:06736c263256/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:web"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.typography.com/fonts/font_overview.php?productLineID=100043">
    <title>Idlewild | Hoefler &amp; Frere-Jones</title>
    <dc:date>2012-06-05T20:54:05+00:00</dc:date>
    <link>http://www.typography.com/fonts/font_overview.php?productLineID=100043</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[A distinctive typeface that’s at home everywhere it goes.

For the longest time, we've been reaching for a typeface that wasn't there. We knew it was something spare and tranquil, its letterforms reaching ambitiously outward, and we could hear it speaking in hushed but captivating tones. We imagined it as industrious, combining space-age optimism with the confidence and composure of a master craftsman. We could see the typeface among the realm of satisfying things, objects designed not merely to be used but to be enjoyed: a well-balanced knife, a performance engine; the tool that fits the hand just so.]]></description>
<dc:subject>design fonts typography goodfonts</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:b5498333ae8e/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:goodfonts"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://2011.newadventuresconf.com/audio/mark.html">
    <title>Topics | Mark Boulton | New Adventures In Web Design conference | Nottingham | 20th January 2011</title>
    <dc:date>2012-02-12T21:47:51+00:00</dc:date>
    <link>http://2011.newadventuresconf.com/audio/mark.html</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[In the real world, responsive design is nothing new. Products adapt to our needs. Technology monitors local environments to adjust lighting, temperature and even physical spaces. But what about web? In designing with words, the desire to bind content to a device has been around as long as there have been books. Mark will take you from desire to implementation, from theory to practice. How can we build upon what we know from literally hundreds of years of responsive design practice to define a new era of online publishing? An era where we strive for the same level of human / technology connection that started with the monks.]]></description>
<dc:subject>design presentation webdesign typography responsivedesign responsiveness</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:3abeff7a0419/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:presentation"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webdesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:responsivedesign"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:responsiveness"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.fontshop.com/blog/newsletters/dec2011c/">
    <title>FontShop Newsletter | December 21, 2011</title>
    <dc:date>2011-12-22T23:59:04+00:00</dc:date>
    <link>http://www.fontshop.com/blog/newsletters/dec2011c/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[FontShop's Best Typefaces of 2011
Another year has whizzed by! While last year saw the real breakthrough for webfonts, this year we witnessed the introduction of mobile fonts and the promise of more diversity and typographic refinement in mobile apps. Yet the news in type was not dominated only by technology. Our beloved type designers cooked up delicious new digital faces for FontShop’s menu of typographic treats.

To celebrate the end of another exciting year in type, our type experts put their heads together to compile our annual “Best Of” list, highlighting the typefaces that surprised, impressed, and delighted us. (And if the “Best Of“ list whets your appetite for fonts, check our Newsletter Archive for more morsels. All this year’s new typefaces are in there.)]]></description>
<dc:subject>design font typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:6ecff2a55a2f/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:font"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://line25.com/tutorials/how-to-create-a-stylish-drop-cap-effect-with-css3">
    <title>How To Create a Stylish Drop Cap Effect with CSS3</title>
    <dc:date>2011-12-13T14:11:14+00:00</dc:date>
    <link>http://line25.com/tutorials/how-to-create-a-stylish-drop-cap-effect-with-css3</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Drop caps have been around for years in the print industry, but they are still pretty rare in the web world despite the :first-letter selector having been around for a fair few years. Let’s take a look at how we can create a cool drop cap for our web designs and spice it up with some stylish CSS3 text-shadow effects.]]></description>
<dc:subject>css css3 design typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:feafced616f0/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css3"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.youthedesigner.com/2011/11/22/30-sleek-fonts-for-your-minimalist-design/">
    <title>30 Sleek Fonts for your Minimalist Design | You the Designer</title>
    <dc:date>2011-11-22T21:53:48+00:00</dc:date>
    <link>http://www.youthedesigner.com/2011/11/22/30-sleek-fonts-for-your-minimalist-design/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[The minimalist style is rampant in the design industry. But just because it has become increasingly popular doesn’t mean that it’s that simple to practice. Anyone can try doing it, but not everyone can achieve it.
One of the most essential elements in a minimalist design is typography. Let’s face it, you can’t do justice to minimalism with pre-installed fonts like Arial, Century Gothic, Georgia, Verdana, Times New Roman, and etc. But frown no more! Here are 30 sleek fonts you can download for free that could fit perfectly on your minimalist designs.
Just remember that each of these fonts will blend differently with different elements. Try out several samples for your design and don’t be afraid to experiment with your font’s sizes, spacing, leading or kerning as well. Enjoy!]]></description>
<dc:subject>font fonts typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:98f097f156ea/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:font"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://cssfontstack.com/">
    <title>CSS Font Stack - The long awaited CSS font stack resource.</title>
    <dc:date>2011-11-15T19:44:51+00:00</dc:date>
    <link>http://cssfontstack.com/</link>
    <dc:creator>Aetles</dc:creator><dc:subject>css font fonts typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:d96ef251f057/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:font"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.fontseek.info/">
    <title>O U T - O F - T H E - D A R K</title>
    <dc:date>2011-09-07T20:36:09+00:00</dc:date>
    <link>http://www.fontseek.info/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Great type design remains hidden in the jungle as it isn’t promoted by a type foundry. Fontseek features these hidden treasures. It links you to the designer’s website by clicking on the specimen, where you will find purchasing information or how to get in touch directly. You can filter the selection by using the category tags. Check out the list of selected  F O U N D R I E S  distributing quality fonts. These I N S T I T U T I O N S offer Typedesign Education. C O N T A C T me.]]></description>
<dc:subject>design fonts typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:e96e7c4ee6ee/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:design"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://trentwalton.com/2011/08/10/web-fonts-i-look-forward-to-using/">
    <title>Web Fonts I Look Forward To Using | Trent Walton</title>
    <dc:date>2011-08-10T22:42:15+00:00</dc:date>
    <link>http://trentwalton.com/2011/08/10/web-fonts-i-look-forward-to-using/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[The present & future of web fonts is looking awfully bright. Quality and Quantity are increasing, though there are still a few fonts I have to pass over when designing for the web. While I don’t know if all of these are in the pipeline to become web fonts, I have to believe that all type foundries are moving in that direction so that their fonts remain useful. It’s important to note that this shouldn’t be read as a “what’s the holdup” post. Creating high quality web fonts is no simple task. The only thing worse than a font you can’t use on the web is one that can be used but renders poorly.

Case in point: I recently replaced Futura served by an unnamed service with the relatively new Futura PT from ParaType served via Typekit. There was a significant improvement in tracking as well as rendering. Here’s a short, non-comprehensive list of fonts I’d love to put on a webpage.]]></description>
<dc:subject>fonts webfonts typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:bb8ad6516da5/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax">
    <title>The New Bulletproof @Font-Face Syntax | Fontspring</title>
    <dc:date>2011-02-03T21:49:35+00:00</dc:date>
    <link>http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[The “Fontspring @Font-Face Syntax”
This is the way the code should have been all along. Clean, clear and simple:

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot#') format('embedded-opentype'), 
     url('myfont-webfont.woff') format('woff'), 
     url('myfont-webfont.ttf')  format('truetype'),
     url('myfont-webfont.svg#webfontFqDaNIX6') format('svg');
}
What? I don't get it.
The hack trick that makes this work is the '#' following the EOT filename. Seriously.

How it works
Internet Explorer <9 has a bug in the parser for the src attribute. If you include more than one font format in the src, IE fails to load it and reports a 404 error. The reason is that IE attempts to load as a file everything between the opening parenthesis all the way to the very last closing parenthesis. To deal with that wrong behavior, you merely declare the EOT first and append a single hash mark. The hash fools IE into thinking the rest of the string is a URL fragment and loads just the EOT file. The other browsers follow the spec and select the format they need based on the src cascade and the format hint.

Browser compatibility
I see no reason why any browser would fail with this syntax. Please report your findings though. Once we feel that there are no issues, we'll change the syntax for the Fontspring webfonts.

We've tested on:

Safari 5.03, IE 6-9, Firefox 3.6-4, Chrome 8, iOS 3.2-4.2, Android 2.2-2.3, Opera 11]]></description>
<dc:subject>css typography webfonts</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:79c87d09a262/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:css"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:webfonts"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.zachleat.com/web/2011/01/11/bigtext-makes-text-big/">
    <title>BigText Makes Text Big</title>
    <dc:date>2011-01-12T17:44:41+00:00</dc:date>
    <link>http://www.zachleat.com/web/2011/01/11/bigtext-makes-text-big/</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[It all began with a simple web foray to Designing Monsters. Their simple, typographic design was beautiful. But why? Their combination of the beautiful League Gothic font, use of Lettering.JS, and some simple font scaling gave the page a wonderful consistent vertical alignment. Like the Million Dollar Homepage, I wanted to rebuild it — but I didn’t want to spend a lot of time manually adjusting font sizes. So I did what any programmer with the jQuery Golden Hammer would do, I turned my problem into a nail.


At it’s simplest, the BigText jQuery plugin takes a single element and sizes the text inside of its child <div>s to fit the width of the parent element. Gives the text that lovely vertical alignment.]]></description>
<dc:subject>javascript jquery plugin typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:e2e17af6d659/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:javascript"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:jquery"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:plugin"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://ubiquitic.com/blog/2010/06/on-justified-text-in-reader.html">
    <title>On Apple Safari's use of justified text in Reader - Blog</title>
    <dc:date>2010-06-10T13:23:00+00:00</dc:date>
    <link>http://ubiquitic.com/blog/2010/06/on-justified-text-in-reader.html</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[I see this comment as a sign that Apple will not fix this, because to the dismay of typography experts (and mine), most people out there without significant reading impairment cater to justified text for aesthetic reasons only. Those are Apple clients, and Apple will please them before the typography experts.]]></description>
<dc:subject>apple typography</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:dd56d86c4cfc/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:apple"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.typography.com/email/2010_03/index_tw.htm">
    <title>Ask H&amp;FJ: Four Ways to Mix Fonts</title>
    <dc:date>2010-03-21T14:50:12+00:00</dc:date>
    <link>http://www.typography.com/email/2010_03/index_tw.htm</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Is there a way to know what fonts will work together? Building a palette is an intuitive process, but expanding a typographic duet to three, four, or even five voices can be daunting. Here are four tips for navigating the typographic ocean, all built around H&FJ's Highly Scientific First Principle of Combining Fonts: keep one thing consistent, and let one thing vary.]]></description>
<dc:subject>typography fonts</dc:subject>
<dc:source>https://pinboard.in/</dc:source>
<dc:identifier>https://pinboard.in/u:Aetles/b:693f5c926fac/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:fonts"/>
</rdf:Bag></taxo:topics>
</item>
<item rdf:about="http://www.pensee.com/dunham/smartQuotes.html">
    <title>Smart Quotes</title>
    <dc:date>2006-05-23T15:07:12+00:00</dc:date>
    <link>http://www.pensee.com/dunham/smartQuotes.html</link>
    <dc:creator>Aetles</dc:creator><description><![CDATA[Historien bakom "smarta citattecken", Smart Quotes, i macen.
]]></description>
<dc:subject>mac historia typografi history typography</dc:subject>
<dc:identifier>https://pinboard.in/u:Aetles/b:4b85d635b35d/</dc:identifier>
<taxo:topics><rdf:Bag>	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:mac"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:historia"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typografi"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:history"/>
	<rdf:li rdf:resource="https://pinboard.in/u:Aetles/t:typography"/>
</rdf:Bag></taxo:topics>
</item>
</rdf:RDF>