WordPress functions.php snippets
“WPFunction.Me lets you quickly build all the functionality you need for your next WordPress project!”
Positype type foundry was founded in 2000 by Neil Summerour. Beautiful fonts combined with humor and whimsy.
“Learn to code interactively, for free.”
It’s free and fun.
Don’t Fear the Internet
“Basic HTML & CSS for Non-Web Designers”—by Jessica Hische & Russ Maschmeyer.
Have no fear. These awesome (and typographically beautiful) videos will make any designer want to learn how to code…or at least watch someone else do so.
“The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.”
Gridulator calculates column pixel dimensions, based on desired width and any number of desired columns.
Does the math for you. Simple as that.
Area 17 — The work of Arnaud Mercier
“A permanent online collection devoted to the work of Arnaud Mercier, widely considered to be among the most important and prolific interactive designers.”
R/M Design School — Font pairing
1 + 1 = 3. Looking to up your knowledge about font pairing and/or inspiring examples of well-matched typeface combinations? This microsite from ReadyMag is beautifully designed and educational. Need I say more? Shared by Anna Parellada while working at Code and Theory London. Thanks, Anna! Looks like there will be more to come from R/M Design school in the months ahead.
This site demonstrates the capability of svg logos and is a pretty cool example of how well-designed logos respond or devolve at small sizes. The three images show desktop, tablet and mobile viewport widths.
Responsive patterns — Brad Frost
A great reference for interaction patterns. Responsive demos for testing right in the browser on the screen of your choosing. I find the navigation patterns most helpful.
Updated regularly. Bookmark it!
The Best Designs – Web Design Inspiration
What Screens Want by Frank Chimero
Web Safe fonts – What exactly does that mean?
The History of Web-Safe Fonts – HOW magazine
“What does “web-safe” font mean anyway?”
A concise overview of both the history of type on the web and what the term “web-safe” means for those who don’t know … younger designers perhaps haven’t had a reason to learn this.
After reading the article you might understand why webfont technology evolving away from web-safe only is “like leaving the monochrome flatlands of Kansas to arrive in the magical, technicolor land of Oz.”
AIGA symbols & signs
“The complete set of 50 passenger/pedestrian symbols developed by AIGA is available for all to use, free of charge. Icons are available in EPS and GIF formats.”
Or download the whole set at once.
Skeleton: Responsive CSS Boilerplate
The 1000px grid
A convincing rationale for using a 1000px grid (rather than 960 or otherwise).
Plus PSDs for download and a demo.
The Square Grid
“A New Way of Designing Websites
A simple CSS framework for designers and developers, based on 35 equal-width columns. It aims to cut down on development time and help you create beautiful-structured websites.”
Download the pack includes:
1. Sketch sheets for printing (PDF)
2. Design layout templates (Photoshop, Indesign, Illustrator)
3. Code files with explanation (CSS, HTML)
Simply the best. This is my go-to grid plugin for all front end needs. Makes html prototyping a breeze too.
The Grid System
A great resource for all things ‘grid’. Updated regularly and now featuring more digital grid resources than ever.
Appreciate how this site is rooted in theory of grid design in print, yet translates the same theory to digital design. Plus some nice typography related material as well.
Adobe Color CC (formerly Kuler)
Create, explore and save your own themes with helpful theory based tools.
Hex color tool
A great site for quickly finding tints and shades of any chosen color.
“Digital color can be represented in a number of ways. The most common ways to represent color on the web are via a 6-digit HEX number, RGBA, and HSL (Support for HSL was added in CSS3).
- Hex is a 6-digit, 24 bit, hexidecimal number that represents Red, Green, and Blue. An example of a Hex color representation is
34is Green, and
56is Blue. There are 16 million possible colors.”
Work with color
Optimo type foundry
Web fonts and web font generator
Font Squirrel scours the internet in search of FREE, highest-quality, designer- friendly, commercial-use fonts and presents them for easy downloading.
“Worry-free, perpetual font licensing for everyone.”
Thousands of fonts with easy licensing for desktop, web, ebooks and apps.
Colophon type foundry
CSS font stack
This site shows what percentage of computers (by platform) have specific fonts installed, and provides a font stack for using specific fonts.
This site recently changed it’s visual design and, to be honest, used to look a lot better. The content seems mostly unchanged, so that’s good. However, due to my preference for the old, I link to it instead.
World class font foundry Dalton Maag offers their entire font library free for trial use.
“Browse, download trial fonts and easily purchase licences for fonts to suit any tone of voice.”
“Typography Inspiration for the Modern Web”
This site is a great visual reference, but also a knowledge database. View fonts in use online and find recommendations and other inspirational material.
You probably agree that typography on the web has historically been far inferior to that of print. And that any free font is intrinsically bad; the past is defined by the mindset that “you get what you pay for”.
However digital typography is quickly progressing into a non-discriminatory future. And while Google fonts are free, they offer a practical solution somewhere between Verdana* and “too expensive”.
How does the service work, you ask?
Google fonts are hosted online, so when building a site the html files are simply linked to the font file/s on the web. The great part for designers not coding a site is each font may be downloaded to desktop for use in design software.
These fonts are free so it’s easy to get carried away. As ever with any free font service you have to be cautious and exercise restraint. My advice…keep it simple. Try the recommendations below or search via filtering “popularity” as this tends to bring up the better ones.
It is also worth mentioning that when using web-hosted fonts it’s ideal to use a limited number of fonts (i.e. a maximum of 2 per website) to prevent slow-loading. Remember each typeface weight is one font. It’s not unwise to combine web-hosted and system fonts, i.e. use web-hosted fonts headings, and arial for small paragraphs and long-running text.
Find and compare safe-to-use fonts for the web. This helpful website provides a list of which fonts are automatically installed on common operating systems—these fonts are referred to as ‘system fonts’.
You are also able to set text in these fonts (and adjust the size and leading to preview paragraph styles) in side-by-side comparison.
This is my go-to website to determine if fonts used in a design are “web-safe”.