<![CDATA[Type & Grids]]> http://www.typeandgrids.com/blog A blog about typography, flat-file content management systems, mobile-first design and other topics en Jeremiah Shoaf Copyright 2017 2017-10-22T10:02:29-04:00 <![CDATA[The Best Typography-Based Sites of the Month Will Now Be Published on Typewolf]]> http://www.typeandgrids.com/blog/best-typography-sites-moving-to-typewolf http://www.typeandgrids.com/blog/best-typography-sites-moving-to-typewolf Just a heads up that going forward I will be publishing my monthly type-driven websites roundup posts on the Typewolf blog instead of here. So update your bookmarks and head over to Typewolf to check them out!

]]>
2014-11-05T00:00:00-05:00
<![CDATA[The Best Typography-Based Sites of September 2014]]> http://www.typeandgrids.com/blog/the-best-typography-based-sites-of-september-2014 http://www.typeandgrids.com/blog/the-best-typography-based-sites-of-september-2014 This is the eighth installment of my monthly feature on Type & Grids where I pick my favorite type-driven websites from the previous month and then write a little about the typographic details behind the design. You can check out last month’s post for August here.

EBD Journal

EBD Journal

Rather than using a line break between paragraphs, the body copy on EBD Journal (set in Freight Text) follows the classic type setting convention of indenting the first sentence of each paragraph with no extra line break. This is how type has been set for hundreds of years in the print world but this convention was never widely adopted on the web for whatever reason. Circular, a geometric sans-serif from Lineto, is used for headers and titles while the monospaced font Atlas Typewriter is interspersed throughout, used for captions and footnotes.


Alec Dudson

Alec Dudson

Alec Dudson’s site mixes two serif typefaces, Portrait and Calluna. Mixing two serifs doesn’t always work, but I think these two play well together as their letterforms have similar characteristics.


Uncle Goose

Uncle Goose

This is a great example of a brand with consistent type across their product packaging and web presence. Neutraface, a geometric sans-serif from House Industries, seems to be seldomly used on the web, with the similar Brandon Grotesque being much more popular. I’m glad to see they stuck with Neutraface for their website keeping things consistent.


The Manual

The Manual

The Manual uses Franklin Gothic as their primary branding typeface and Freight Text for body copy — a typeface perfect for reading long passages of text. I really like how each issue is differentiated by a unique color. Be sure to support their Kickstarter campaign which ends on October 10, 2014.


The Fernway

The Fernway

ITC Clearface, a popular typeface of the 1970s, seems to be making a bit of a comeback lately, as I’ve seen it used more and more on the web. The Fernway pair it nicely with Brandon Grotesque.


un Projects

un Projects

FF Dagny, a sans-serif from FontFont, works well combined with Academica, a typeface designed for use in scientific papers. I love the use of Academica, but unfortunately the line length of the body text expands to fill the screen size, so on a large display like mine the readability suffers.


Shortstop

Shortstop

Futura and Clarendon make for a classic combo, just like coffee and donuts. Futura on its own can feel a little stark, but the addition of Clarendon adds warmth and playfulness.


Mount Vernon

Mount Vernon

This is a deep site with a ton of content and the designers did an excellent job of keeping the type consistent throughout. Gotham and Mercury, both from Hoefler & Co, make a beautiful combo. Having white text set on top of a photo background like in the header is always a dangerous thing to attempt though — using a light photo can quickly make the type illegible. Right now they seem to do a well enough job of only using dark photos that contrast with the type, however I’d hate to see what happens if the client starts adding their own photos.


Weston Vierregger

Weston Vierregger

Weston’s site combines Circular and Replica Mono, two typefaces from Swiss foundry Lineto. I feel like the colored underlines are a unique touch that really keep the type from feeling too sterile.


Homepolish

Homepolish

I’ve always been a big fan of Miller, a Scotch Roman from Matthew Carter, designer of the ubiquitous Georgia. Pairing Miller with ITC Johnston, a humanist face famous for its use in the London Underground, makes for a unique and interesting combo. My only complaint about this site is the logo which uses a scaled down PNG, making it appear slightly blurry. Setting it as a web font would ensure a clear and crisp display.


Keep Up With the Latest in Web Typography

If you enjoyed this post then you’ll probably really like Typewolf, my other side project. Typewolf features the best type-centric designs from around the web with the web fonts identified. It’s an excellent resource to check out the next time you need to choose a typeface for your next web project. You can follow Typewolf on Twitter and Tumblr or sign up to receive a weekly email summary.

Typewolf

]]>
2014-10-01T00:00:00-04:00
<![CDATA[The Best Typography-Based Sites of August 2014]]> http://www.typeandgrids.com/blog/the-best-typography-based-sites-of-august-2014 http://www.typeandgrids.com/blog/the-best-typography-based-sites-of-august-2014 This is the seventh installment of my monthly feature on Type & Grids where I pick my favorite type-driven websites from the previous month and then write a little about the typographic details behind the design. You can check out last month’s post for July here.

OKREAL

OKREAL

I love when designers set out a clear system for using type and then stick with it throughout the entire site. ITC Clearface is only used at large sizes while the body copy is set with Goudy Old Style. GT Walsheim is used sparingly for the nav and small headers, always set entirely in uppercase.


Grafik

Grafik

Grafik’s site uses Neuzeit for headers combined with Apercu for body copy. It feels strange to combine two grotesques but as long as the use is consistent I think it works. Monosten, a monospaced font from Colophon, looks great with Apercu. It looks like there is some faux bold in the nav dropdown menu that went unnoticed.


Union

Union

On the homepage, a heavy weight of Proxima Nova contrasts nicely with a light weight of Kulturista. Kulturista is an excellent slab serif but it doesn’t seem to be used on the web as much as other slabs like Adelle. My only complaint about the type on this site is that on some of the body copy the line length keeps expanding with the width of the browser window, so on a large screen like mine reading becomes a little more difficult.


P & T

P & T

The thing that impresses me the most about this site is how closely the type on the site matches the type on their product packaging. It’s hard to tell from the photos but it looks like the combo of Scotch Modern and National used on the site is the same as the packaging type. It’s awesome when a brand can be consistent between print and the web like this. Just a few years ago before web fonts took off, this site probably would have been be using Georgia and Arial instead.


Weightshift

Weightshift

Weightshift contrasts the heavy and light weights of the oval-shaped Colfax to create a beautifully simple site using only a single typeface.


Shorthand

Shorthand

PT Serif, an open-source typeface funded by the Russian Federal Agency for Press and Mass Communications, is paired with GT Walsheim, a commercial typeface from Swiss foundry Grilli Type. The two typefaces from totally different worlds of type design work surprisingly well together.


Digital Telepathy

Digital Telepathy

Digital Telepathy use two H&Co typefaces, Whitney and Sentinel. Whitney was originally designed as a signage typeface, so it looks great set at large sizes. Sentinel is used mainly for navigation, however I would have loved to see it tied in more with the rest of the site design.


Les Deux Mondes

Les Deux Mondes

Larsseit, one of my personal favorite sans-serifs, seems to be getting more popular as I keep coming across more sites using it. This single-typeface site makes wonderful use of it. The color scheme of the type changes color every time you refresh the page which is a neat touch.


If the Suit Fits

If the Suit Fits

This site is another nice example of a brand showing consistency between the type on their physical marketing and their digital marketing. I love the combo of Bodoni Poster and Futura. Caslon is used for the body copy.


Heck House

Heck House

I love this site because it’s not afraid to break one of the first rules of setting type — don’t use too many different fonts. Four typefaces are used, two sans-serifs and two serifs — Galaxie Copernicus, Interstate, Harriet and Nimbus Sans. The key to getting away with this is consistency and Bethany Heck’s site is relentlessly consistent in using each typeface for a specific purpose.


Keep Up With the Latest in Web Typography

If you enjoyed this post then you’ll probably really like Typewolf, my other side project. Typewolf features the best type-centric designs from around the web with the web fonts identified. It’s an excellent resource to check out the next time you need to choose a typeface for your next web project. You can follow Typewolf on Twitter and Tumblr or sign up to receive a weekly email summary.

Typewolf

]]>
2014-09-03T00:00:00-04:00
<![CDATA[The Best Typography-Based Sites of July 2014]]> http://www.typeandgrids.com/blog/the-best-typography-based-sites-of-july-2014 http://www.typeandgrids.com/blog/the-best-typography-based-sites-of-july-2014 This is the sixth installment of my new monthly feature on Type & Grids where I pick my favorite type-driven websites from the previous month and then write a little about the typographic details behind the design. You can check out last month’s post for June here.

Benvingut Bisgràfic Barcelona

Benvingut Bisgràfic Barcelona

This site is a great example of what can be done using only free fonts. Sorts Mill Goudy and Cutive Mono are limited fonts that lack additional weights but they are both available for free. Even with a limited typographic palette, Benvingut Bisgràfic Barcelona still manage to do something exciting and engaging with the type.

Where to get Sorts Mill Goudy →

Where to get Cutive Mono →


Readymag

Readymag

Mixing two similar sans-serifs is generally considered a bad idea. However, Readymag seem to know what they are doing when they combine Nobel and Avenir. Nobel is almost used as a display version of Avenir by being set only at large sizes. It’s an interesting and unusual approach but I think it works.

Where to get Nobel →

Where to get Avenir →


Few

Few

I’m surprised that I don’t see Grad combined with Proxima Nova more often. Both are designed by Mark Simonson and I think they work nicely together. I love seeing the details of Grad when it’s set at a large size.

Where to get Grad →

Where to get Proxima Nova →


Sharon Daddi

Sharon Daddi

I love the combo of GT Walsheim with Sanchez. Although I’m not sure introducing the third typeface, Droid Sans, into the mix was really needed. I feel like you already have a geometric sans and a slab serif so what is the need for a humanist sans on top of that? This is still a nice site — just the use of Droid Sans feels out of place to me.

Where to get GT Walsheim →

Where to get Sanchez →

Where to get Droid Sans →


Headspace

Headspace

Brandon Grotesque really makes a perfect match for this style of quirky, “flat design” illustration. I feel like Brandon Grotesque might be getting a little overused but this site makes excellent use of the typeface. The type effortlessly switches between uppercase and italics to keep things fun, dynamic and engaging.

Where to get Brandon Grotesque →


Elena Mora

Elena Mora

Elena Mora’s site uses a minimal amount of type but still manages to do interesting things with it. Benton Sans is set vertically in some places which is a nice touch.

Where to get Benton Sans →


Pitchfork Music Festival

Pitchfork Music Festival

Larsseit is one of my favorite recent sans-serif releases and the Pitchfork Music Festival site makes great use of it. Only one typeface is used and that is all that is needed.

Where to get Larsseit →


Cornell University

Cornell University

It’s nice to see a large university website going all-in with web fonts. No Arial or Georgia here — just Freight Text and Freight Sans. The Nard Dog would be proud.

Where to get Freight Text →

Where to get Freight Sans →


The Workshop

The Workshop

When I featured this site a few weeks ago on Typewolf, it was using Calluna and Proxima Nova. I guess they had a change of heart because it’s now using Chronicle Display and Apercu. I’m not sure I like it as much — Apercu just feels almost too quirky to be combined with a serious typeface like Chronicle.

Where to get Chronicle Display →

Where to get Apercu →


Harewood House

Harewood House

I immediately fell in love with the type on this site. The light weight of Bodoni Egyptian just plays so nicely with the simple grotesque, Graphik. This is truly a gorgeous site.

Where to get Bodoni Egyptian →

Where to get Graphik →


Keep Up With the Latest in Web Typography

If you enjoyed this post then you’ll probably really like Typewolf, my other side project. Typewolf features the best type-centric designs from around the web with the web fonts identified. It’s an excellent resource to check out the next time you need to choose a typeface for your next web project. You can follow Typewolf on Twitter and Tumblr or sign up to receive a weekly email summary.

Typewolf

]]>
2014-08-04T00:00:00-04:00
<![CDATA[The Best Typography-Based Sites of June 2014]]> http://www.typeandgrids.com/blog/the-best-typography-based-sites-of-june-2014 http://www.typeandgrids.com/blog/the-best-typography-based-sites-of-june-2014 This is the fifth installment of my new monthly feature on Type & Grids where I pick my favorite type-driven websites from the previous month and then write a little about the typographic details behind the design. You can check out last month’s post for May here.

Grinders Coffee

Grinders Coffee

A condensed version of Clarendon is combined with the ultra-condensed free font League Gothic. Minion is used as the text face and pairs very nicely with the two condensed faces. The type on this site is set beautifully — the only thing that bothers me is that League Gothic doesn’t really match the condensed sans-serif used in the Grinders logo.

Check out other sites using the fonts Clarendon, League Gothic and Minion on Typewolf.

Where to get Clarendon →

Where to get League Gothic →

Where to get Minion →


Concrete Matter

Concrete Matter

It’s nice to see a site using FF Super Grotesk. It has a similar feel to the mega-popular Brandon Grotesque but is used way less on the web. It makes a great combo with the playful rounded serif Rooney.

Check out other sites using the fonts FF Super Grotesk and Rooney on Typewolf.

Where to get FF Super Grotesk →

Where to get Rooney →


Louder Than Ten

Louder Than Ten

The lively display version of Harriet is used at large sizes while the much more legible text version is used for body copy. Avenir is used as well although its use is somewhat inconsistent with some body copy set in Avenir and other sections of body copy set with Harriet.

Check out other sites using the fonts Harriet and Avenir on Typewolf.

Where to get Harriet →

Where to get Avenir →


Nick Leith-Smith

Nick Leith-Smith

Akkurat is used as the sole typeface on this site for architecture firm Nick Leith-Smith. Akkurat comes across as very classic and anonymous but it immediately gives the design a distinctive feel compared to a more common typeface like Helvetica.

Check out other sites using the font Akkurat on Typewolf.

Where to get Akkurat →


VOTD.tv

VOTD.tv

Multiple weights of Hoefler & Co.’s Gotham are used to create a nice type hierarchy using only a single typeface. My only nitpick is the leading looks a little too tight when the video author text wraps to two lines.

Check out other sites using the font Gotham on Typewolf.

Where to get Gotham →


Another

Another

Frank Chimero’s new design studio keeps things simple and uses Commercial Type’s Atlas Grotesk set in the same point size for the entire site.

Check out other sites using the font Atlas Grotesk on Typewolf.

Where to get Atlas Grotesk →


Rokkan

Rokkan

Avenir and Minion are a classic combo and Rokkan’s site has consistent, balanced and well-thought-out typography.

Check out other sites using the fonts Minion and Avenir on Typewolf.

Where to get Minion →

Where to get Avenir →


Atlantic Records

Atlantic Records

I love the use of Futura bold on Atlantic Records’ new site. However I think it would have been nice to see a different serif paired with it besides the default font Georgia. Something like Bodoni might combine better with Futura.

Check out other sites using the fonts Futura and Georgia on Typewolf.

Where to get Futura →


Christopher Doyle & Co.

Christopher Doyle & Co.

I always dig sites like this that rely almost entirely on type for the design while keeping images to a minimum. For this type of site to work the typography needs to be spot on and in this case it definitely is. Tiempos Text looks great paired with Post Grotesk.

Check out other sites using the fonts Tiempos Text and Post Grotesk on Typewolf.

Where to get Tiempos Text →

Where to get Post Grotesk →


Pete Nicholson

Pete Nicholson

Mixing two different serif typefaces is generally considered a bad practice in setting type. However Pete Nicholson’s site breaks the rules by combining Larish Neue with Lyon Text and I think it looks great. The two serifs are different enough to provide adequate contrast while still feeling like they belong together.

Check out other sites using the fonts Larish Neue and Lyon Text on Typewolf.

Where to get Larish Neue →

Where to get Lyon Text →


Keep Up With the Latest in Web Typography

If you enjoyed this post then you’ll probably really like Typewolf, my other side project. Typewolf features the best type-centric designs from around the web with the web fonts identified. It’s an excellent resource to check out the next time you need to choose a typeface for your next web project. You can follow Typewolf on Twitter and Tumblr or sign up to receive a weekly email summary.

Typewolf

]]>
2014-07-01T00:00:00-04:00
<![CDATA[The Best Typography-Based Sites of May 2014]]> http://www.typeandgrids.com/blog/the-best-typography-based-sites-of-may-2014 http://www.typeandgrids.com/blog/the-best-typography-based-sites-of-may-2014 This is the fourth installment of my new monthly feature on Type & Grids where I pick my favorite type-driven websites from the previous month and then write a little about the typographic details behind the design. You can check out last month’s post for April here.

True Detective

True Detective by Nigel Evan Dennis

On first glance, Sofia looks a little like Futura, especially with the bold weights. However, on a closer look it has a less-geometric, more playful feel to it. It’s a great match for the illustration style of Nigel Evan Dennis.

Check out other sites using the font Sofia on Typewolf.

Where to get Sofia →


Boat Magazine

Boat Magazine

Freight Big is a high-contrast font meant to be used at large sizes (hence its name) like on the Boat Magazine site. The text version of Freight is used for the body copy, as it has less contrast and is much more readable at smaller sizes. A light weight of Futura is used for the nav and subheaders — a heavier weight of Futura would probably have competed too much with the delicate Freight.

Check out other sites using the fonts Freight Big, Freight Text and Futura on Typewolf.

Where to get Freight Big →

Where to get Freight Text →

Where to get Futura →


Ymuno Summer 2014

Ymuno Summer 2014

Garage Gothic is set entirely in uppercase and is paired with Courier for body copy. The body copy is set justified which is often times considered a bad practice on the web, however for the small amounts of copy on this site it seems to work well.

Check out other sites using the fonts Garage Gothic and Courier on Typewolf.

Where to get Garage Gothic →


Portsmouth City Council

Portsmouth City Council

For a government site, this has very bold typography. The Aktiv Grotesk looks great, however Arial is occasionally mixed in which is kind of a shame as the two fonts don’t pair very well together.

Check out other sites using the font Aktiv Grotesk on Typewolf.

Where to get Aktiv Grotesk →


Purple, Rock, Scissors

Purple, Rock, Scissors

Hoefler & Co.’s Sentinel and Gotham always look great on screen thanks to the H&Co. ScreenSmart technology. The type on this site is set pretty flawlessly — my only complaint is that the white text set on top of photos can be a bit hard to read in some places.

Check out other sites using the fonts Sentinel and Gotham on Typewolf.

Where to get Sentinel →

Where to get Gotham →


Kevin Zweerink

Kevin Zweerink

I love the idea of pairing such a classic typeface like Minion with a modern, somewhat avant garde design like this. The monospaced Inconsolata is mixed in as well.

Check out other sites using the fonts Minion and Inconsolata on Typewolf.

Where to get Minion →

Where to get Inconsolata →


Hughes Estate Sales

Hughes Estate Sales

Avenir was voted the most favorite font in my Industry-Leading Designers Share Their Current Top 3 Favorite Typefaces post I published last month. The Hughes Estate Sales site is a great example showing why this typeface is so popular.

Check out other sites using the font Avenir on Typewolf.

Where to get Avenir →


Paintbox

Paintbox

The type on this site actually feels very similar to the Boat Magazine site discussed above. Both use Freight Big and Freight Text combined with an uppercase sans-serif, but Paintbox use Proxima Nova rather than Futura. Freight gives the site a very delicate, feminine quality.

Check out other sites using the fonts Freight Big, Freight Text and Proxima Nova on Typewolf.

Where to get Freight Big →

Where to get Freight Text →

Where to get Proxima Nova →


The Distance

The Distance

This site feels like you are reading a well-designed newspaper thanks to the ever popular combo of Sentinel + Gotham.

Check out other sites using the fonts Sentinel and Gotham on Typewolf.

Where to get Sentinel →

Where to get Gotham →


n+1

n+1

This entire site uses just one typeface — Adelle Sans. There are no bits of default fonts like Arial and Georgia thrown in which oftentimes happens. Adelle Sans has such a full range of weights that introducing a second typeface into the design is not needed.

Check out other sites using the font Adelle Sans on Typewolf.

Where to get Adelle Sans →


Keep Up With the Latest in Web Typography

If you enjoyed this post then you’ll probably really like Typewolf, my other side project. Typewolf features the best type-centric designs from around the web with the web fonts identified. It’s an excellent resource to check out the next time you need to choose a typeface for your next web project. You can follow Typewolf on Twitter and Tumblr or sign up to receive a weekly email summary.

Typewolf

]]>
2014-06-03T00:00:00-04:00
<![CDATA[The Best Typography-Based Sites of April 2014]]> http://www.typeandgrids.com/blog/the-best-typography-based-sites-of-april-2014 http://www.typeandgrids.com/blog/the-best-typography-based-sites-of-april-2014 This is the third installment of my new monthly feature on Type & Grids where I pick my favorite type-driven websites from the previous month and then write a little about the typographic details behind the design. You can check out last month’s post for March here.

Playground Paris

Playground Paris

Seventies-style chunky serifs such as Caslon Graphique seem to be pretty popular as of late. High-contrast fonts like these need to be used at a large size to be legible like on Playground Paris’s site.

Check out other sites using the fonts Caslon Graphique and URW Grotesk on Typewolf.

Where to get Caslon Graphique →

Where to get URW Grotesk →


Roald Dahl

Roald Dahl

Libre Baskerville is one of the highest-quality free serifs available and it looks elegant on the Roald Dahl site. However, it would look even more elegant to see proper apostrophes used rather than straight quotes.

Check out other sites using the font Libre Baskerville on Typewolf.

Where to get Libre Baskerville →


Vox

Vox

Mixing two sans-serifs doesn’t always work but Vox seems to pull it off pretty well. They stick to Balto for all their headlines and then use Alright Sans for body copy. The serif Harriet is interspersed throughout as well.

Check out other sites using the fonts Harriet, Balto and Alright Sans on Typewolf.

Where to get Harriet →

Where to get Balto →

Where to get Alright Sans →


Firmamento

Firmamento

ITC Johnston (famous for its use in the London Underground) is set exclusively in caps and looks great paired with Caslon.

Check out other sites using the fonts ITC Johnston and Caslon on Typewolf.

Where to get ITC Johnston →

Where to get Caslon →


Newswordy

Newswordy

This is the first time I’ve seen Standard CT used on the web and I really dig it. However, I would have loved to see the entire site set with Standard CT rather than being combined with Helvetica Neue.

Check out other sites using the fonts Standard CT and Helvetica Neue on Typewolf.

Where to get Standard CT →


Not Coming

Not Coming 2013 In Review

I think using the calligraphic-inspired Ogg with the quirky grotesque Maple is such an interesting and unusual combination. The body copy serif Elena seems to provide a sturdy foundation and works to anchor the other two fonts together.

Check out other sites using the fonts Ogg, Maple and Elena on Typewolf.

Where to get Ogg →

Where to get Maple →

Where to get Elena →


Co.Exist

Co.Exist

Grumpy is another seventies-style chunky serif that works great at large sizes, like on the headlines on the Co.Exist site. Caslon accompanies it, which makes sense as Grumpy is based off of the ultra bold styles of Caslon.

Check out other sites using the fonts Grumpy, Caslon and Museo Sans on Typewolf.

Where to get Grumpy →

Where to get Caslon →

Where to get Museo Sans →


Cameron Askin

Cameron Askin

I love sturdy calligraphic-inspired typefaces like Lapture. I think they work so well just set at a large size against a flat color like on Cameron Askin’s site.

Check out other sites using the font Lapture on Typewolf.

Where to get Lapture →


Mr Marcel School

Mr Marcel School

This design looks straight out of Wes Anderson’s playbook but instead of Futura it’s using Sofia. The improper use of apostrophes and double quotes jumps out at me but other than that I really love this site.

Check out other sites using the font Sofia on Typewolf.

Where to get Sofia →


Harvard Law Review

Harvard Law Review

The Harvard Law Review site makes excellent use of Hoefler & Co’s Cloud.typography service, using Hoefler Titling paired with Whitney. The type looks gorgeous on this site. However, it would have been great to see them go all out and use Hoefler Text for the body copy rather than Georgia.

Check out other sites using the fonts Hoefler Titling, Whitney and Georgia on Typewolf.

Where to get Hoefler Titling →

Where to get Whitney →


Keep Up With the Latest in Web Typography

If you enjoyed this post then you’ll probably really like Typewolf, my other side project. Typewolf features the best type-centric designs from around the web with the web fonts identified. It’s an excellent resource to check out the next time you need to choose a typeface for your next web project. You can follow Typewolf on Twitter and Tumblr or sign up to receive a weekly email summary.

Typewolf

]]>
2014-05-01T00:00:00-04:00
<![CDATA[The Best Typography-Based Sites of March 2014]]> http://www.typeandgrids.com/blog/the-best-typography-based-sites-of-march-2014 http://www.typeandgrids.com/blog/the-best-typography-based-sites-of-march-2014 This is the second installment of my new monthly feature on Type & Grids where I pick my favorite type-driven websites from the previous month and then write a little about the typographic details behind the design. You can check out last month’s post for February here.

The Pew Center for Arts & Heritage

The Pew Center for Arts & Heritage

I really dig the contrast between the bold weight of the serif Arnhem and the light weight of the monospaced sans Maison Mono. The shifting colors on the image and menu hovers are a nice touch that really makes the type stand out.

Check out other sites using the fonts Arnhem and Maison Mono on Typewolf.

Where to get Arnhem →

Where to get Maison Mono →


The Cub Reporter

The Cub Reporter

The warm and friendly curves of Brandon Grotesque perfectly compliments this simple and colorful site for middle-schoolers.

Check out other sites using the font Brandon Grotesque on Typewolf.

Where to get Brandon Grotesque →


Imperial Pomp

Imperial Pomp

I didn’t even know a monospaced version of Helvetica existed until I came across this site. It actually works fairly well as a body copy font in the short amount of text on this site. And I love the use of the ultra-condensed version of Univers for headlines.

Check out other sites using the fonts Univers and Helvetica Monospaced on Typewolf.

Where to get Univers →

Where to get Helvetica Monospaced →


Knormal

Knormal

I really love GT Walsheim — I think it has so much unique character for a geometric sans and it looks great on this site. Pairing it with Caslon is an interesting choice.

Check out other sites using the fonts GT Walsheim and Caslon on Typewolf.

Where to get GT Walsheim →

Where to get Caslon →


Andrew Tarcon

Andrew Tarcon

I love sites like this that use a single typeface and create contrast just by variations in font size and use of uppercase. Franklin Gothic works perfectly for this.

Check out other sites using the font Franklin Gothic on Typewolf.

Where to get Franklin Gothic →


Camron

Camron

I really like this site but the places where they mix Apercu with Garamond in mid-sentence can be jarring. I also have to call out the use of straight quotes instead of proper apostrophes in the headlines.

Check out other sites using the fonts Garamond and Apercu on Typewolf.

Where to get Garamond →

Where to get Apercu →


Studio Alto

Studio Alto

I’m a big fan of Galaxie Copernicus from Village and I especially love the italic. Studio Alto keeps things simple and uses only the italic version which makes a great combo with Maison Neue.

Check out other sites using the fonts Maison Neue and Galaxie Copernicus on Typewolf.

Where to get Maison Neue →

Where to get Galaxie Copernicus →


Script & Seal

Script & Seal

The quirky geometric sans Apercu is a perfect font choice to compliment the illustration style of Script & Seal. Interestingly, there are bits of Raleway, another geometric sans, mixed in here and there in the design. Not sure if that was intentional or maybe a remnant from a previous design that didn’t get updated in the CSS.

Check out other sites using the fonts Apercu and Raleway on Typewolf.

Where to get Apercu →

Where to get Raleway →


Bloomberg View

Bloomberg View

This is the first time I’ve seen Supria Sans used on the web and I gotta say I’m very impressed. Supria Sans was designed by Hannes von Döhren, the same designer who created the super-popular Brandon Grotesque. Bloomberg View uses Supria Sans as the sole typeface on their site and they make nice use of the various weights. It’s another great example showing that sometimes one typeface is all you need.

Check out other sites using the font Supria Sans on Typewolf.

Where to get Supria Sans →


Google Science Fair 2014

Google Science Fair 2014

The new website for Google Science Fair 2014 appears to have been art directed by Wes Anderson. I think the designers did a great job pulling off this style. Personally, I find the large photo backgrounds distracting and would have preferred to just see the strong Futura type set against a solid color background instead.

Check out other sites using the font Futura on Typewolf.

Where to get Futura →


Keep Up With the Latest in Web Typography

If you enjoyed this post then you’ll probably really like Typewolf, my other side project. Typewolf features the best type-centric designs from around the web with the web fonts identified. It’s an excellent resource to check out the next time you need to choose a typeface for your next web project. You can follow Typewolf on Twitter and Tumblr or sign up to receive a weekly email summary.

Typewolf

]]>
2014-04-03T00:00:00-04:00
<![CDATA[The Best Typography-Based Sites of February 2014]]> http://www.typeandgrids.com/blog/the-best-typography-based-sites-of-february-2014 http://www.typeandgrids.com/blog/the-best-typography-based-sites-of-february-2014 I’m introducing a new monthly feature on Type & Grids where I’ll pick my favorite type-driven websites from the previous month and then write a little about the typographic details behind the design. Let’s get started!

FLIPP

FLIPP

Normally I like to see a little letter-spacing added to type set in uppercase, but this chunky Gibson type looks nice set rather tightly. It pairs very well with FF Tisa, especially the italic variant.

Check out other sites using the fonts Gibson and FF Tisa on Typewolf.

Where to get Gibson →

Where to get FF Tisa →


Mads Burcharth

Mads Burcharth

The scroll-hijacking on this site drives me crazy, especially when trying to take a screenshot for this post. However the use of type and color is wonderful. The friendly Brandon Grotesque perfectly compliments the illustration style of Mads.

Check out other sites using the font Brandon Grotesque on Typewolf.

Where to get Brandon Grotesque →


London SE

London SE

The typography on this site is excellent, however I do wonder why they use Publico for the headline on the homepage but then use a different serif, Elena, throughout the rest of the site. It might have been nice to see Publico integrated a bit more or else just simplify things and use only one serif. I think Elena pairs very well with Colfax.

Check out other sites using the fonts Colfax, Elena and Publico on Typewolf.

Where to get Colfax →

Where to get Elena →

Where to get Publico →


Monday Music

Monday Music

I love Playfair Display — I think it’s one of the best free serif fonts on Google Fonts. It’s a display font so it doesn’t work as well for setting body copy, but this isn’t a text-heavy site so I think it’s fine in this situation. Apercu is an unusual choice to pair with Playfair Display but I think it works.

Check out other sites using the fonts Apercu and Playfair Display on Typewolf.

Where to get Apercu →

Where to get Playfair Display →


Prospek

Prospek

Another site using the ever-popular Brandon Grotesque font. I love how on hover the images go behind the type creating a very cool effect. Bold color is used throughout the site which looks great with white Brandon Grotesque.

Check out other sites using the font Brandon Grotesque on Typewolf.

Where to get Brandon Grotesque →


Designer's Checklists

Designer’s Checklists

Relying only on open-source fonts, Playfair Display and Lato, this site has very professional looking typography. Playfair Display set in italic has always been a favorite of mine.

Check out other sites using the fonts Playfair Display and Lato on Typewolf.

Where to get Playfair Display →

Where to get Lato →


MMD

MMD

The white type set on a light grey background doesn’t offer the best contrast for readability, but it does look very elegant. It’s nice seeing Apercu paired with Apercu Mono — I’ve seen other sites where Apercu is paired with a monospaced font such as Courier which doesn’t go as well together.

Check out other sites using the fonts Apercu and Apercu Mono on Typewolf.

Where to get Apercu →

Where to get Apercu Mono →


Ableton

Ableton

I love the use of Futura on Ableton’s new site. Wes Anderson would be proud. The small bits of yellow type on white can be a bit hard on the eyes at times, but the splashes of color used throughout the site really add to the design.

Check out other sites using the font Futura on Typewolf.

Where to get Futura →


Sivert Hoyem

Sivert Hoyem

This is another site with low contrast and muted colors, although when you hover over a section the contrast increases which is great. The font Circular is great for this type of minimal design.

Check out other sites using the font Circular on Typewolf.

Where to get Circular →


Advertising Age

Advertising Age

I first saw Tiempos used on the web on Frank Chimero’s What Screen Want site. It’s a great typeface and looks wonderful on Advertising Age’s new site, designed by one of my all-time favorite agencies, AREA 17. There are small amounts of Gotham mixed in and I would have loved to see Gotham used exclusively as the sans-serif typeface instead of mixing it with Helvetica.

Check out other sites using the fonts Tiempos Headline and Tiempos Text on Typewolf.

Where to get Tiempos Headline →

Where to get Tiempos Text →


Keep Up With the Latest in Web Typography

If you enjoyed this post then you’ll probably really like Typewolf, my other side project. Typewolf features the best type-centric designs from around the web with the web fonts identified. It’s an excellent resource to check out the next time you need to choose a typeface for your next web project. You can follow Typewolf on Twitter and Tumblr or sign up to receive a weekly email summary.

Typewolf

]]>
2014-03-05T00:00:00-05:00
<![CDATA[Statamic Themes Now Available]]> http://www.typeandgrids.com/blog/statamic-themes-now-available http://www.typeandgrids.com/blog/statamic-themes-now-available I’m excited to announce that my Type & Grids templates now include Statamic themes. Statamic is an up-and-coming database-free, flat-file CMS that is dead simple to set up and blazingly fast. Designers have been embracing flat-file CMSes lately and I believe 2014 will be the year they really explode.

I think we’ll see continued growth in flat file static website builders… there’s a growing realisation that sometimes a full CMS is simply overkill. Collis Ta’eed, Envato Founder, 2014 Predictions for Web Design

Statamic screenshot

The first thing people usually notice after switching to a flat-file CMS is how fast the pages load. All of the content is stored in files and folders and without a database to query, page load times decrease dramatically. If your site gets a huge surge in traffic, there is no database to cause your site to crash. You can version control absolutely everything and easily port your site over to a new server without having to worry about exporting and configuring a database.

Why Not WordPress Themes?

I strongly believe that flat-file content management systems, like Statamic, are the future. WordPress is a great CMS but it just doesn’t make sense anymore for a lot of use cases, especially on smaller, simpler websites. WordPress has become bloated and complicated and it’s now possible to have dynamic functionality on a site without using a database.

Simple, minimal sites (like my Type & Grids templates) are a great use case for a flat-file CMS. I’m a minimalist at heart, so using something complicated like WordPress where it’s not needed isn’t appealing to me…

Why Statamic?

I’ve spent a lot of time researching and comparing the various flat-file CMSes available and Statamic came out the clear winner. Statamic has a three-person dev team that is constantly pushing out new updates and adding new features. The community behind Statamic is quickly growing and designers seem to be adopting it as the flat-file CMS of choice.

Statamic screenshot

Statamic includes a fully-responsive, client-friendly control panel

Statamic is a commercial CMS (the devs need to pay their bills) so you will need to purchase a Statamic license to use the Type & Grids Statamic themes. Statamic costs $29 for a personal license and $99 for a professional license.

Eating My Own Dogfood

I’m all about “dogfooding” — I use Statamic to run this site and blog, as well as my portfolio site and my web typography side project, Typewolf. The Type & Grids themes I’m offering are essentially a zipped up version of what I use myself. This ensures that the themes will be under continuous, active development as I rely on them for my own sites.

If you want a clean, modern site (including a blog) up and running quickly, then Type & Grids is a great option. Simply purchase Statamic, open the zip, upload the files to your server, copy over the Type & Grids theme files and you’ll be ready to go in no time.

Ditch your database and get the Type & Grids Statamic themes here!

]]>
2014-02-12T00:00:00-05:00