Web Development

Get inspiration from these impressive typography designs

Food Typography, Born Typeface, and Type We Like are just three of the resources web designer Ryan Boudreaux highlights as worth checking out.

TypographyInspiration_thumb_092313.gif
Every so often I like to find inspiration in new and exciting trends and advancements in web typography and typography in general. I've found a number of inspirational sources -- one that uses food ingredients for its muse, another that was born out of a big city in Spain, and others that add new meaning to form and function for design, composition, style, and typography on the web.

Food Typography

Danielle Evans, the letterer and designer of Marmalade Bleue, has created over a dozen food-inspired typographic designs with food ingredients, which as she puts it is "uniting Aesthetics and Foodstuffs." Check out her Food Typography tumblr (Figure A). Her designs include a Target Food For Thought social media campaign, which coincided with the company's opening of several Canadian stores. Target wanted to appeal to both the Franco and Anglophone customer base, so she created typographic designs using spices and food ingredients that Target sells in its stores.

Figure A

TypographyInspiration_FigA_092313.gif

Another creative example of food ingredients used in a typographic design includes the "Type A Holic" in chocolate (Figure B).

Figure B

TypographyInspiration_FigB_092313.gif

Other ingredients that Danielle uses in her food typography designs include brown sugar, curry powder, chili powder, French coffee grounds, tea leaves, and flour. You can also find her designs on Dribble. I can visualize several ways that Danielle's food typography styles and designs can be applied to any business in the food and beverage industry.

Born Typeface

The latest work from Carlos de Toro, a graphic and type designer from Spain, is the Born Typeface (Figure C), which is inspired by the tall buildings and varied cultures in Barcelona. The typeface was "born" in Barcelona in early 2013, and Carlos describes it as a humanistic typeface based on traditional forms with some new features included in its endings, strokes, and drops. The free typeface includes Regular Born with 262 glyphs for uppercase, lowercase, alternatives, normal ligatures, uppercase numerals, and symbols and punctuation marks.

Figure C

TypographyInspiration_FigC_092313.gif

Click the Download Born button, and then select to either "pay" with a tweet, share on a Facebook post, or post to LinkedIn. Once the share is processed, the download begins, and the compressed zip file is 2.36MB. Now you can start using the Born Typeface.

Just My Type

The Just My Type project (Figure D) is maintained by Daniel Eden  from Manchester UK, and it is a collection of font pairings from two font collection sources, Typekit and H&FJ. Daniel does the hard work of pairing fonts in three pairing sets: the H&FJ library, the Typekit library, and the Typekit Twins catalog. 

Figure D

TypographyInspiration_FigD_092313.gif

Daniel says the process of pairing typefaces is more of an art form than a science; he typically goes with his gut feeling when typeface pairings make a good match. He also touts the edict that "less is more," where two typefaces as a rule of thumb is more advantageous than trying to fit five or more into one web page document or website design. 

Type We Like

The Type We Like project hosted by UXidea highlights what they consider are the best of the Google font collection and is showcased using a Parallax scrolling technique to view the font examples. Each font is called using the CSS3 @font-face rule, as shown in the example code snippet calling the "Arvo" font in two font weights.

@font-face {
  font-family: 'Arvo';
  font-style: normal;
  font-weight: 400;
  src: local('Arvo'), url(http://themes.googleusercontent.com/static/fonts/arvo/v5/WJ6D195CfbTRlIs49IbkFw.woff) format('woff');
}
@font-face {
  font-family: 'Arvo';
  font-style: normal;
  font-weight: 700;
  src: local('Arvo Bold'), local('Arvo-Bold'), url(http://themes.googleusercontent.com/static/fonts/arvo/v5/0Aa8aBJcGN1n1zDNhqNrnQ.woff) format('woff');
}

The resulting example from the web page is displayed in Figure E.

Figure E

TypographyInspiration_FigE_092313.gif

Looking for more inspiration?

Check out the Awwwards for design, creativity, and innovation on the Internet for Typography in Web Design (Figure F), which showcases many websites that meet the criteria for fine typography.

Figure F

TypographyInspiration_FigF_092313.gif

Other resources from the Awwwards include 100 Greatest Free Fonts Collection for 2013 and 100 Greatest Free Fonts Collection for 2012.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments

Editor's Picks