Para los amantes de las tipografías > lo pedís, lo tenés :D


10 free grunge fonts

Take advantage of this compilation of free grunge fonts that you can put to use in your cool designs.

    Grunge fonts are becoming increasingly popular. Instead of shiny, crisp typefaces, many artists and designers are seeking to use an urban, dirty, street style in their designs. With this in mind, we’ve scoured the web to find you 10 top, free grunge fonts available to download now.
      Via

    Creative Bloq


      01. Everyday Ghost

      Everyday Ghost by Andrew Hart

      Everyday Ghost is one of 63 fonts created by typeface designer Andrew Hart. The design, which features smudges and blotchy effects, adds an interesting twist to an otherwise generic serif font. Free for personal use only.

      FORMAT: TTF

      02. Fail

      Fail by Douglas Vitkausk

      This cool typeface does anything but what its name suggests, having been downloaded hundreds of thousands of times since its release. This is one of 129 fonts designed by Douglas Vitkausk, whose work has amassed over 12 million downloads! Free for personal use only.

      FORMAT: TTF

      03. Laundromat 1967

      Laundromat 1967 by Last Soundtrack

      This cool Laundromat 1967 typeface would make a great newspaper-type ransom note design. Developed by designer Gyom Séguin aka Last Soundtrack, this is one of 46 fonts he’s crafted. The full set of this particular type features uppercase letters and numbers. Free for personal use only.

      FORMAT: TTF

      Leer más “Para los amantes de las tipografías > lo pedís, lo tenés :D”

      Yahoo considering rebranding?


      webdesignerdepot.com

      This is the logo you may be soon looking at whenever you point your browser to yahoo.com

      The Internet giant have not yet made an official announcement about any change on their identity, but a TechCrunch reader was asked to give a feedback on a new Yahoo! logo while answering an online survey.

      Besides the change of color from purple to a deep blue, which actually still has a lot of purple in it, the most noticeable feature change is the choice for a sans-serif type giving a much more “vertical” look to the new brand. I can’t say that I don’t like it, because the new brand does appeal to me, but letting the Yahoo! serifs go is quite a shame; and they have such a well established identity that I think the great majority of users will miss the old version.

      Take a look at the question and compare both versions:

      One thing is certain, the question in itself is not a guarantee that any change will happen. According to TechCrunch, here’s what a Yahoo! spokesperson said about the online survey: Leer más “Yahoo considering rebranding?”

      8 New Free Fonts for Your Designs / http://webdesignledger.com


       

      Posted by 

      Since here at WDL we believe that having a lot of fonts in our libraries is never enough, we decided to gather some new beautiful and useful free fonts to show you. Today we have eight different styles to add personality to your designs, so check them out.

      Sreda

      8 New Free Fonts

      ZnikomitNo25

      8 New Free Fonts Leer más “8 New Free Fonts for Your Designs / http://webdesignledger.com”

      Expressive Web Typography: Useful Examples and Techniques

      Wherever we turn online, typography jumps out at us — sometimes literally, with the assistance of some clever coding. And now more than ever, we are seeing greater focus on this design element and its varied implementations around the Web. With the growing popularity of font embedding services and @font-face, typography is the talk of the town, but even though it is a regular topic among communities, not all of our typographic efforts are successful. Sometimes we swing for the fences, only to miss or fall short.

      This is what brings us together today. We have looked around the Web and checked some of the many typographic choices of website owners — some of which are successful, others not so much. Below is a selection of some elegant and interesting websites. We will critique the typography on them, in order to explore how we can improve the type on our own websites. Look through them to see whether you spot any typographical trespasses that you may have committed yourself.


      Smashing Magazine

      Wherever we turn online, typography jumps out at us — sometimes literally, with the assistance of some clever coding. And now more than ever, we are seeing greater focus on this design element and its varied implementations around the Web. With the growing popularity of font embedding services and @font-face, typography is the talk of the town, but even though it is a regular topic among communities, not all of our typographic efforts are successful. Sometimes we swing for the fences, only to miss or fall short.

      This is what brings us together today. We have looked around the Web and checked some of the many typographic choices of website owners — some of which are successful, others not so much. Below is a selection of some elegant and interesting websites. We will critique the typography on them, in order to explore how we can improve the type on our own websites. Look through them to see whether you spot any typographical trespasses that you may have committed yourself.

      [By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

      Typography Examples

      Denise Chandler
      When we look at the portfolio of Denise Chandler, right away the typography begins talking. The original hand drawn sans-serif offers a personal, artistic yet professional feel at the same time. Denise focuses on the most important information and presents it in a relatively simple one page layout. The hover effects offer a great element of interactivity to the site for sure, while the large, bold caps type along with the intricate ampersand for the header works well to playfully complement the page.

      Denisechandler in Expressive Web Typography: Useful Examples and Techniques

      The only critique really would be in the contact area. A slightly larger font and line-height, along with some extra spacing between the paragraph and the social media links would have made the area feel as open as the rest of the site. Also, it’s a pity that the “Submit”-button in the contact form doesn’t change on click — a nice :hover and :active-effect could make the experience even more pleasant.

      Jessica Hische
      Using a good type that doesn’t detract from the content is imperative. Jessica does a tremendous job with this, opting for a simple thin sans-serif font. Even in its simplest form, the italic type adds a flourish to the design. Perhaps for readability, though, the designer could have broken from the italics for the description of the featured pieces. Also, the type could stand to be a bit larger, and not only because the headers appear to blur a bit at that size.

      Jesse in Expressive Web Typography: Useful Examples and Techniques

      MCQ
      The portfolio of Mike McQuade has a truly remarkable interactive page change effect that really grabs your attention. The site is set up as a grid with each square changing position and/or size to accommodate the content that opens with each selection. Also, because the layout is fluid, content squares appear on different positions when you resize the window and hence ensure the proper alignment of the content. It is a very clean, minimalist design that uses a unique combination of a thin and quirky serif and a clean and bold sans-serif to complete the tone and attitude of the portfolio. Leer más “Expressive Web Typography: Useful Examples and Techniques”

      20+ New Apps and Websites for Designers

      New apps and websites seem to appear on an almost-daily basis.

      Trying to find the best ones each week or month can be tough, especially considering how many come out that aren’t that great.

      Here we’ve compiled some of the best apps and websites that have come out in the past few months.

      Some are apps closely tied to a web designer’s daily work, while others aren’t likely to be used as often, but are still useful.

      If you want to share a recent web app or website useful to designers, please send a tweet to @cameron_chapman for inclusion in our next monthly roundup.


      thumbNew apps and websites seem to appear on an almost-daily basis.

      Trying to find the best ones each week or month can be tough, especially considering how many come out that aren’t that great.

      Here we’ve compiled some of the best apps and websites that have come out in the past few months.

      Some are apps closely tied to a web designer’s daily work, while others aren’t likely to be used as often, but are still useful.

      If you want to share a recent web app or website useful to designers, please send a tweet to @cameron_chapman for inclusion in our next monthly roundup. Leer más “20+ New Apps and Websites for Designers”

      Short hand CSS properties…


      Lower case ‘a’ from Adobe Caslon Pro, superpos...
      Image via Wikipedia

      Short hand CSS properties, that must be saving your time while working on any project. Instead of using CSS properties in each line, we can use in single line.

      1. BACKGROUND

      We usually use following properties in Background.

      background-color:
      background-image:
      background-repeat:
      background-attachment:

      Normally we use background as:

      .backGrnd
      {
      background-color: yellow;
      background-image: url(“stunningmesh.jpg”);
      background-repeat: repeat-x;
      background-attachment: fixed;
      background-position: left top;
      }

      But if you want to write these properties in Short hand, you will write these properties as:

      .backGrnd
      {
      background: yellow url(“stunningmesh.jpg”) repeat-x fixed left top;
      } Leer más “Short hand CSS properties…”

      Web Design Trends for 2010

      Purists will say that great design is timeless. Yes, in an ideal world, we should ignore trends.

      Pragmatically speaking, though, there is a lot of value in monitoring and incorporating design trends, especially with regard to websites.

      Let’s face it: the web changes at a rapid pace. Unlike in other media, design trends on the web are not just driven by aesthetics.

      Technology is changing that can drastically alter the capabilities of the medium.

      In 2010, we’re seeing designers continuing to push the boundaries of web design, setting the following clear trends…


      Techi.com

      Purists will say that great design is timeless. Yes, in an ideal world, we should ignore trends.

      Pragmatically speaking, though, there is a lot of value in monitoring and incorporating design trends, especially with regard to websites.

      Let’s face it: the web changes at a rapid pace. Unlike in other media, design trends on the web are not just driven by aesthetics.

      Technology is changing that can drastically alter the capabilities of the medium.

      In 2010, we’re seeing designers continuing to push the boundaries of web design, setting the following clear trends…

      A Basic Look at Typography in Web Design


      April 7th, 2010 by Shannon Noack

      A Basic Look at Typography in Web Design

      Typography is an integral part of design. Think of all the different uses of typography on the web, from large headlines and bold blocks of text to smaller-sized text in body copy, and you’ll soon realize that not only is it a crucial part of a web design, but that it’s a pure combination of art and science.

      We’ve come a long way since the start of the internet, but the use of typography is as important today as it was back in the day.

      Typography Basics

      Typography Basics

      Typography is the use of type in a design. Typography seeks to create a greater meaning by thoughtful and deliberate selection font, size, color, layout, alignment, and other factors that affect the design of type on a page.

      There are two major classifications of fonts to choose from: serif and sans serif fonts.

      Serif fonts have serifs or extra embellishments at the end of stokes; some call them feet or tails.

      Typography Basics

      Sans serif fonts are without serifs; no extra details are found on the end of each letter.

      Typography Basics

      Things to Consider for Typography on the Web

      There are many differences in handling type in print versus on the web. Things to think about with text on the web are contrast, color, readability, and size.

      Colors on a monitor screen are created by light, and it becomes more important to think about contrast because it’s straining to look at and read text with poor contrast. Black text on a white background is the easiest to read because it provides the most contrast. Color theory and color choice play an important role in web typography.

      Sans serif fonts have been proven to be more easily read online in body copy because serifs make it tougher for the eye to follow, while the opposite is true for printed text.

      Although at an increased size and with more leading—the amount of additional vertical space between lines of type—sans serif fonts can still work fine in body text on the web. Serifs work great in headlines and headings because they give a special accent to a headline and because serif fonts are easy to read when dealing with smaller quantities of text.

      Size is an important factor to consider when choosing your font styles. Text that is too small is hard to read, but text that is too big takes up too much space. Find a size that works well with your design and is easy to read.

      Taking Control of Fonts

      There are many settings that control the way your font appears on a web page. Font size, as mentioned previously, is certainly important. The three most popular units of measurements are: em, percentage (%), and pixels (px).

      Declaring font sizes in CSS is simple, here’s an example of paragraph elements being assigned a unit of 1em.

      p {
       font-size: 1em;
      }

      Em is a widely used form of typographic measurement for web designs because it scales well and can give you finer increments of size (i.e. 1.35em).

      Pixels are measured relative to the screen resolution and give you a bit less control as you can only use whole numbers (i.e. 2px).

      Many people like using percentages for font sizes because they give the user control of font sizes. The size is determined by their browser’s font size settings.

      Kerning and leading can also be controlled with your CSS. Kerning is the space between characters and can be controlled with the letter-spacing property. Leading can be controlled using the CSS property, line-height. Both are great ways to control the look of your text.

      Other possible and less popular units of measurements are:

      • points (pt)
      • pica (pc)
      • inches (in)
      • centimeters (cm)
      • millimeters (mm)
      • x space (ex)

      Using pt is great for print stylesheets because they are a print unit of measurement. Points shouldn’t be used in your web pages because there are big differences between browsers when using points; Mac OS computers tend to show text 25% smaller than PC computers.

      Web Safe Fonts

      Web Safe Fonts

      What is a web safe or web standard font? These fonts make up a group of a select few fonts that are available on most computers. This is what currently limits font choices on the web under CSS2 specifications.

      Choosing from the web safe fonts available will ensure better control over what your text looks like on all browsers and operating systems. The consensus for the most popular fonts are:

      Other popular fonts:

      • Impact
      • Lucida Console (Mac OS equivalent is Monaco)
      • Lucida Sans (Mac OS equivalent is Lucida Grande)
      • Palatino
      • Tahoma (Mac OS equivalent is Geneva)
      • Comic Sans
      • Trebuchet MS

      When using any of these fonts—especially the ones from the second list—it’s a great idea to include a few options to fall back on in your CSS, as explained in the following section.

      Setting Your Fonts

      There are a few methods to choose from to display fonts on your websites. If you’re using a web safe font, you can declare it via CSS, such as in the following example:

      font-family: Helvetica, Arial, sans-serif;

      It’s important to include several fonts just in case someone doesn’t have your first option. This gives your user’s browser something to fall back on. This list of fonts is called a font stack.

      Redefining “web safe fonts” with CSS3

      Current CSS3 specs allow you to choose from any licensed OpenType or TrueType font at your disposal. You can do this by using @font-face, as shown in the following example:

      @font-face {
        font-family: "Journal; src: url(journal.ttf) format("truetype");
      }
      h1 {
        font-family: "Journal", sans-serif;
      }

      Font replacement tools

      There are several font replacement methods at your disposal if you are still unsure about using @font-face in your designs.

      Cufon

      Cufon is a favorite font replacement tool to use because it’s relatively painless to integrate into a website. Plenty of documentation is available on their website, as well as the text generator that spits out code you’ll need. Although it’s a good, solid solution, it’s not without it’s downsides—currently text rendered by Cufon is not selectable by users.

      Cufon

      sIFR

      sIFR is a Flash-based text replacement method and is just as nice as Cufon. You’ll need Flash to create a font file for your site. It’s best used on headlines or very small blocks of text because the load time can drag on a bit if you use it extensively on a web page. The downside is that it doesn’t work without Flash enabled in your browser, but the upside of sIFR versus Cufon is that text is selectable.

      sIFR

      Web Typography Mistakes

      Web Typography Mistakes

      Lack of typography consistency is one the biggest mistakes new web designers make. Font properties are best controlled globally, and it’s good practice to set the font family, size, color, line height and weight for the body element of all your pages through CSS, such as in the following example:

      body { font: 1em/1.3em Helvetica, Arial, sans-serif; color: #000; }

      You should set heading styles globally as well for h1, h2, and h3. Link styles should also be set globally.

      Choosing fonts that are too similar is not a good choice, and should be avoided by carefully looking at the style of fonts and the design of the site to choose something that is appropriate. Most serif headings pair well with sans serif fonts for body text. Pairing two sans serif fonts is a bit trickier but is certainly a viable option.

      Some Examples of Great Typography in Websites

      In this section, you’ll find an array of websites that display effective typography usage.

      Analog

      The typography choices made here match the theme of the site very well. Type plays a big role in the look of this site, using color, size, font, spacing, and layout to enhance the overall look of the page.

      Analog

      Blue Pixel

      Blue Pixel uses Cufon to create bold headlines. The body font and the headline font are both san serif and go together well.

      Blue Pixel

      Festival Boreal

      Cufon is also used here to add a unique look to the site through typography. Color, different sizes, and a fun asymmetrical layout create a great typographical design.

      Festival Boreal

      Go Media Inc

      A mixture of a few different font themes creates a great web design here. The navigation is clean-cut with thin, uppercase type that is nicely paired with an italic serif font for taglines and headings on pages.

      Go  Media Inc

      Kari Jobe

      Courier—a serif font—is paired with a few sans serif fonts in this design. The fonts work together with the design to create a look that brings together an old-world style with a new bright and modern feel.

      Kari Jobe

      SimpleBits

      This site has lots of type and is organized well with set styles that create a user-friendly site. Bold uppercase type in the upper navigation work well with the sans serif body text and red serif headlines.

      SimpleBits

      We Are VI

      This blog has several font styles at work and uses typography to their advantage by keeping the site organized and easy to navigate.

      We  Are VI

      Information Highwayman

      Typography is used in the background as a design element, creating a great backdrop that doesn’t distract from the body text. The rest of the text complements the style, with good-sized easy to read body text using a serif font.

      Information Highwayman

      Check out this showcase of 20 websites with beautiful typography for more design inspiration and examples.

      Additional Resources on Web Typography

      I hope you enjoyed this look at typography in web design. Typography is a broad topic but an important concept to understand as a designer of any kind.

      How heavily does typography play into the aesthetics of a web design? How much time should you spend on typography when designing a site?

      Related Content

      About the Author

      Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly here and you can connect with her on Twitter as well.

      http://sixrevisions.com/web_design/a-basic-look-at-typography-in-web-design/

      Reblog this post [with Zemanta]