web fonts

Design Focus: Type Guides

July 11, 2014 By Sophia Lucero

Here’s a resource roundup to sharpen your typography skills. This week we’re looking at sites that curate beautiful applications of webfonts, so get inspired!

Designs of the Week

Build on DIYThemes’ Thesis Framework for rock solid SEO and great layout customization options.

My favorite of the bunch — the designer’s own application of the glyphs as featured “posters” is just lovely. On the homepage they make one tall abstract painting.

Pastels seem to abound not only in the base design but the featured ones. Content is set in a utilitarian narrow sans-serif and monospace fonts, and one nice feature here is documenting where you can get your own copy of the fonts. Further below there are top 10 lists for different typeface categories.

With muted, organic colors and zero images, this site is all about the fonts from headlines, to paragraphs, to to footnotes.

This archive covers not just sites but printed material as well, and you can view inline the names of the fonts used, also typeset for demo purposes. Since this is a more comprehensive compendium, the advanced search and view options come in handy.

I like that the samples or screenshots here are much larger than the rest. The look feels less “designy” than the others as it adapts the traditional blog format, and it works nicely.

I love the diverse text samples for each typeface: big quotes, small quotes, multi-column passages, or graphic posters, you can see that they are all inspired by the fonts being used. No meta information needed either: all the words link directly to their respective Google Fonts page.

Social Media Weekly

Make Headway, make intuitive layouts, make it your WordPress theme of choice!

CSS, JavaScript – Pixels are expensive
“How pixels get onto your users’ screens is something you should know about. Not for the sake of knowing, but because in order to be effective as a modern web developer you’re going to need to optimize for it.”

Design, User Experience – Design is the Experience
“Visual design is just as important as Information design, Interaction design, Strategy, Prototyping, Content design, etc. They’re all tools that enable good design. Parts of the process.”

Friday Focus 05/06/11: Group Shots

May 6, 2011 By Sophia Lucero

In a previous Friday Focus we featured portfolios with self-portraits of designers that own them. This week we’re looking at agency websites that also feature the people behind them.

Designs of the Week

What’s great about this design is that it doesn’t just slap on a photo of the company; it actually tells you who does what. That may not seem ideal when you want to promote your brand as a single entity, but to me it gives a more interactive, personal touch. Another interesting decision: making the fixed menu navigation appear only after the first two sections.

Not sure what the point is of making the illustration/banner move sideways when you hover over it, since it’s very jittery, but I love the casual shot. The logo is also a little too light for the background.

My favorite part has to be the About page and the form input design. I also like that when you hover on a character on the homepage, it loads that person’s latest tweet.

Love the execution of this design, every page is catchy layout on its own. Note how the logo is in the top right and how there aren’t any portfolio work, just representative illustrations for each category.

Social Media Weekly

CSS, JavaScript, Accessibility – Now You See Me
“When building custom JavaScript-based widgets, it’s quite easy to fully control the hiding mechanism, but when you begin working with animation libraries like jQuery or Scriptaculous, the hiding mechanism is typically dictated by the library, leaving you little control over the accessibility of your content. And that’s a problem.”

CSS – Font 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.”

HTML – Do we need three ways to describe images?
“We need three types of image descriptions: a textual replacement, a textual description, and a textual glance.”

Mobile – Mobile Design and Development
“Even though mobile is one of the fastest growing industries on the planet with things changing every day, I spent a considerable amount of thought and time to try to fill the book with timeless advice that isn’t specific to a particular platform or en vogue device.”

Typography – Web font services – An Overview
“This is just a personal driven overview of web font services and should not be understood as an authoritative attempt to classify the services – as it was mentioned to me.”

Friday Focus 01/28/11: Site Origami

January 28, 2011 By Sophia Lucero

The folded look on websites is still a strong trend. Let’s take a look at a new batch of sites that put it to good use on this week’s Friday Focus.

Designs of the Week

The introductory content stays on each page but automatically scrolls down to the main content on inner pages. Good solution if you want to keep things on every page but still give the user the option of scrolling back up instead of going back.

Love the type, the repeating diagonal stripes, and the arrangement of the images. The logo is barely readable but it’s certainly catchy.

The rainbow stripe thing makes this feel dated but I really like the design of the carousel.

Very cute illustrations, and everything’s neatly arranged.

The script font softens the chunky blocks a bit. The way the layout is split right down the middle, with text on the left and photos on the right, is effective.

The navigation looks like a welcome banner here! Not a fan of the justified text and the type could be more refined.

The content seems almost too narrow for it to be flushed left, but good idea to put the name in the background on the right. I wish the whole rows of text were clickable, or at least the icons.

Sometimes illustration- or portfolio-focused sites tend to keep things minimal to focus on the work being presented, but I love this site for the way it seems to tell its own story through the design. Beautiful details everywhere.

Social Media Weekly

Mobile – Designing Mobile Experiences

CSS – Case Study: Getting Hardboiled with CSS3 2D Transforms
“In this example we’ll use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards.”

Typography – Web fonts via 2010
“Web fonts got a lot of sensational press last year. I urge you to look past the (obligatory?) handful of web font services that are routinely mentioned, and rather at last year’s extraordinary feats of professionalism that have catalyzed the growth of typography and web design right under our noses.”

Design – Web Design 2011: Normal No Longer Exists
“Web design has come a long way in the last three years. We’re (hopefully) dropping the idea of dogmatic solutions. We’re starting to realise that we need to think on our feet about business cases and target markets. We know that we have zero control over the viewer’s context and environment.”

User Experience – humans.txt
“It’s a TXT file that contains information about the different people who have contributed to building the website.”

HTML – HTML(5) and text-level semantics
“As an absolute type nut and militant web standards advocate, one of the most exciting things that HTML5 brings for me is not the new structural elements like <header>, <aside> et al (although they are pretty awesome) but rather the text-level semantics it brings with the addition and redefinition of certain elements.

Friday Focus 06/18/10: Layered Screens

June 18, 2010 By Sophia Lucero

Showing screenshots of websites on websites isn’t terribly exciting in theory, but let’s see how these designs dealt with it.

Designs of the Week

Amusing logo. I find it interesting that the designer went for an abstract rendering of a program window instead of the usual Safari. The body text in the inside pages could be bigger.

Love the addition of the foliage as well as the wooden textures, but repeating grass and soil in the lower part isn’t so seamless, so that needs work.

The corner ribbon (more like a cover) on the screen is a good idea, and so is the subtle ruler pattern in the background.

The screens need more distinction from one another, like shadows or thicker borders, but I like the difference in heights.

Not sure if this is “cheating” because the screens are bunched up as one image and you can’t interact with them, but the rotated, peeking through effect looks great.

Again on the “cheating”, the two polaroids in the background don’t change when you click on the arrows, but blurring it out of focus is another technique to consider.

Bigger is definitely better when it comes to screenshots.

Aside from program windows, mobile devices such as the iPhone are popular containers too. I think the stripes and the bright green make for a perky look.

Love the subtle watercolor texture on the edges of the page, as well as the hot pink combined with elegant typography.

As with the previous design, you can mix and match mobile devices with desktop browsers too.

Another interesting technique: opting not to include any real screenshots, just the hardware that will display them.

Not sure if there’s any benefit to this type of layering as, again, there’s not enough distinction between the two especially since they look almost exactly the same. I think the smaller screenshot could have zoomed in on one area of the website.

This may look a little cheesy for some, but since the company built its brand on the word phantasmagoria, I’ll take it. Now the question is, are the sparkly stuff mixed into the screenshots a welcome decoration, or too much of a distraction? I think the ribbon balances it out.

Social Media Weekly

Design – The Tangible Web: Thoughts on Designing Websites for Touchscreens
“Below, I’ve jotted down a few thoughts on design practices that we’ll likely be seeing a lot more of as site owners begin reorganizing and redesigning to welcome our touchy-feely visitors.”

CSS – Be a CSS Team Player: CSS Best Practices for Team-Based Development
“How many times have you picked up a project that someone else started, only to discover that the creator’s original code is a mess? Or you work with several team members, each of whom has their own way writing code? Or you revisit a project you created years ago, and you don’t remember what you were thinking?”

Usability – 9 Usability And UX Pitfalls: Learn How To Avoid Them
“If we want to be ahead of the design curve: get more satisfied clients, and happier users, we need to make sure that both we and our clients understand what these points are, and how to solve them.”

Friday Focus 05/14/10: Icon Parade

May 14, 2010 By Sophia Lucero

This week’s Friday Focus will tackle websites for a designer’s best friend: icons. Icon sites have been around for the longest time but we’re seeing a lot of sites pushing the envelope in interface innovation, both with their offerings and the website designs they’re found in. The latest trend so far? Websites created for a single icon set—now that’s a great way to promote work.

Designs of the Week

Excellent one page site with the letterpressed look. I wish the bottom gray area had its text a little more readable.

I really like how wide and open this design is. And custom typefaces are more rampant than ever.

A subtle noise effect in Photoshop is popular for a textured effect. So is uppercase text—note the letter spacing for readability.

Even more subtle noise texture here, combined with a touch of woodgrain for extra elegance. I feel the text on the left sidebar is a little cramped compared to the amount of whitespace in the header. And the icon preview, which occupies a large amount of real estate, could be clickable.

Love the folded paper effect combined with a bit of blueprint. I don’t need to tell you how strong the grid is on this layout and the excellent Swiss design sensibilities at play here.

I’m enjoying the hand-drawn, torn effects from top to bottom. Even the arrows in the Services area aren’t overlooked. And scribbled down Android robots—what could be more fun than that?

Sometimes a narrow layout just works better. Excellent integration of all the navigation tools from the search to the pagination. If the icons won’t make you lick your screen, the wooden panel probably will.

Lots of content on the front page compared to the other sites listed here, but it’s not busy at all. Of course the drag-and-drop feature on this site is one of the best interface goodies out there.

I like how as you scroll down, it’s one major area, then two, then three.

Really simple but it’s the details (typography, color, boxes) that stay out of the way that make the design work.

There’s something compelling about the choice of fonts on this site but I have to say that the bottom half isn’t so refined. The blog post titles could use bullet icons and the sitemap seems to need a bit of serifs.

We always enjoy Dan Cederholm and his impeccable work as we’ve featured at least one other iteration of this site’s design before. The current one? It just feels so harmonious even with various splashes of color from the different icon sets. I also appreciate a site that lets you scroll, scroll, scroll.

I feel saddened by the ad placement here. Ads can look beautiful if you can help it, but here they just stick awkwardly out of place.

I just have to include this site on the list, because no matter how long this design has been around, it still feels current.

Social Media Weekly

Design – Create Seamless Web Background Textures in Minutes
“Ever wondered how some web designers come up with such great background textures? It’s actually way easier than you might think.”

CSS – Sexy Interactions with CSS Transitions
“With all browsers except for IE being slated to have Transitions support in the coming months, more and more web designers are turning to this powerful technique as a means to enhance their website’s user experience.”

Optimization – Optimizing Your Website For Speed
“In the world of the Internet, you have mere seconds to capture a visitor’s interest before they leave and find your competitors. Can you afford to have them leave just because of your websites speed?”

Design Focus: Type Guides

Designs of the Week

Social Media Weekly

Friday Focus 01/28/11: Site Origami

Designs of the Week

Social Media Weekly

Friday Focus 06/18/10: Layered Screens

Designs of the Week

Social Media Weekly

Friday Focus 05/14/10: Icon Parade

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

Going Meta With Circuit-Inspired Design

Search