Surf the Dream A discourse of links and articles from Justin Avery

Tag Archive: Typography

  1. Lining.js

    Leave a Comment

    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. Lining.JS gives you the ability to achieve this.

    Visit Link

  2. The Futures so bright, you gotta wear SHADES

    Leave a Comment

    This morning I came across an great article from Typekit are a font service that allow you to use beautiful webfonts on your website without the additional costs or complexity of purchasing a font from a foundry and converting it to all of the web formats.

    Now they are taking type a step further by providing lessons on certain typographical elements and show you how you can use them on your sites to improve the visual appeal and ease the consumption of content on your site.

    I’ve forked a few of their code pens from their examples and make it a little more RWD focussed. Check out those below and read the full list of Shading possibilities on their blog post.

    Using Shades – Typekit Practice Series

    Drop Shade

    See the Pen RWD Weekly Drop shade example by Justin Avery (@justincavery) on CodePen.

    Offset Shade

    See the Pen RWD Offset shade example by Justin Avery (@justincavery) on CodePen.

    Printers Shade

    See the Pen RWD Printer’s shade example (invisible secret) by Justin Avery (@justincavery) on CodePen.

  3. Weekly Web Update #3



    • Site Scraping – Ever had to curl or wget a site for an import?  You might have come across an issue where some of the content was relying on JS to render it properly.


    • Responsive Design – This is a simple jQuery plugin to convert menus into a select element for mobile devices and low browser widths.


    • SHAPES – Lots of them!  And all done with CSS!  Very cool.
    • Rethinking CSS Grids – One of our recommended reads last week was an article in .net magazine about the Future of CSS Layouts. Mark Boulton has responded to a few comments and Tweets with thsi great follow up article.


    • HTML5Media – By now I'm sure you're aware that Video and Audio just work in HTML5 supported browsers, and with this plugin it brings the capability to unsupported browsers (looking at you IE)
    • HTML5 Boilerplate V2 – A year on from the first release of HTML5 Bolier plate the guys have come back with one better.  A lot has changed in the past 12 months and if you thought it was good before, it's worth another download now.

    Beautifying Tools

    • If you've ever "borrowd" someone's minified CSS or Javascript and not been able to make heads or tails of it.  You can use JSBeautifier and CodeBeautifier and 

    Special Entities

    • Entity Look Up – LeftLogic have provided a brilliant tool that allows you to search or lookup any entities and find the appropriate HTML code.
    • And some more….


    • FontFont Subsetter – I've been including a lot of links about typography lately and I've had some questions about the effect on site performance.  While it can has some effect, tools like this will ensure that it become minimal.


    • HTML5 Mobile Applications – Over the past year there's been lots of talk about HTML5 Mobile Apps. The general perception is that HTML5 will provide companies with a scalable and flexible cross-platform mobile app strategy…. but is it ready for full production.


    • Punchout – I've been working on a friends bands web site and used this to get a real impact with the band name.
    • If you like TypeKit then you'll like Webtype

Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as (now my resume) and (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of high quality pocket notebooks(including a Solar System Notebook, Space Notebook, and a Guitar Notebook), write about the Universe and run a responsive web design knowledge hub and a RWD Weekly Newsletter.