Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Font’ Category

Fount is a free-to-use bookmarklet that instantly identifies fonts used in a web page.

Once activated, just click on any text and it displays the font name, size and weight in a growl-like notification.

It doesn't requires re-activation and any number of text can be clicked repeatedly. For disabling it, clicking the bookmarklet is enough.

Fount is a useful and tiny companion for typography inspiration and works in all major browsers.

Fount Bookmarklet

  • Tags:
  • Filed under: Design, Font, No License
  • 2 Comments
  • Find my Font, a very useful desktop font identifier application, is giving away 5 Pro licenses ($69/each) to WRD readers.

    Details on joining the giveaway can be found at the bottom of this post and here is what this tool offers:

    What is Find my Font?

    We sometimes see a beautiful logo and wonder which font is used to create it. Guessing and try-catches is the popular method for reaching to a result but it takes time and usually hard.

    Find my Font is a desktop application (with Windows and Mac OS X versions) that can identify a font used in images and helps browsing your font library.

    Find my Font

    It works by selecting the letters in the image and asks us to type these letters and runs a quick scan within the fonts in our system (any number of font folders can be defined) to find the ones with the closest match.

    The great thing is that the application doesn't only return a single result but also lists and orders the fonts according to their similarity score which is handy for finding alternatives.

    Find my Font has an easy-to-use toolbox for taking screenshots, rotating images or selecting letters to make sure that the image to be analyzed is ready for a scan.

    Find my Font - Font Browser

    As mentioned previously, the application is also a font browser where you can type a text and quickly see how it looks. Also, the scan works during browsing fonts so that the alternatives to the system fonts (or their duplicates) can be instantly catched.

    How to join the giveaway?

    Find my Font is giving away 5 * Pro licenses and it is enough to comment for joining this giveaway -and let us know you favorite font in the comments which can help other commenters meet new lovely fonts – totally optional : )-.

    Winners will be selected randomly with the query below on 13 Dec 2011 (a week later):

    SELECT * FROM wp_comments WHERE comment_post_id=2602 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 5

    Good luck to all.

    And, the winners

    The winners are selected and here they are:

    • Aldo (comment #454823)
    • Josh D. (comment #457922)
    • NRL (comment #454441)
    • Robert Barcus (comment #454262)
    • Webster (comment #455313)

    Congratulations..

    For multilingual web projects, there is a strong chance that we need to work with characters represented with Unicode universal character set.

    And, besides that, there are many useful unicode characters that can replace icons or some images in web pages which makes it a good idea to have a library of these characters in our bookmarks.

    Unicodinator is a project which allows us to navigate Unicode blocks and codepoints 0000 through DFFF easily.

    Unicodinator

    The HTML and Java/C/Python codes for using the characters + related/similar ones for each item are displayed once they are clicked.

    P.S. What would make this handy project better is a powerful search engine.

  • Tags:
  • Filed under: Design, Font, No License
  • 0 Comments
  • Gridlover is a free to use web application for creating a type system with modular scale and vertical rhythm.

    Inside a page with major HTML tags for type like headings, lists, paragraphs or article, it allows playing with values like:

    • body font size
    • body line height
    • scale factor
    • sizes for each element
    • the unit desired (px, rem or em)

    and keeps everything tidy by scaling them accordingly. Once you are set, it outputs the generated CSS rules for use.

    Gridlover

    Web Symbols is a free font that includes many widely-used icons in websites and apps rather than letters.

    It has icons for CMS interfaces, gallery navigation, social networks, social apps and various other items like a loader, e-mail or list.

    The typeface comes in all the required formats including .woff, .ttf, .svg, and .eot.

    Web Icons Typeface

    Web Typography for the Lonely is a website that creates awesome typography using web standards (such as SVG, Html5 canvas and CSS3) and JavaScript.

    There are both static and interactive examples and all of them are documented in detail.

    Web Typography for the Lonely

    It is possible to download the sources of the experiments and also find the related articles/resources that inspired or helped completing the experiments.

    P.S. Some of the depend on various other libraries like jQuery or Raphael.js, however, the developer targets to make them standalone.

    When browsing a website, we sometimes see a beautiful font, wonder what it is, check the source + CSS file (or Firebug) and get the answer. Sounds familiar?

    WhatFont is a bookmarklet that eases this process so much. Once pressed, it displays the font used for any text hovered.

    WhatFont

    If you click on the text, it drops a pin with the details of the font including style, weight, line-height and font-size. These pins are not removed after each click, so, multiple items can be easily compared.

    Also, WhatFont detects fonts served from services like Typekit or Google Font API and displays this info.

    Simply, a must-use for every web designer.

    We are using new web fonts each day and need to pair them with standard fonts for a better use experience.

    FFFFALLBACK is a bookmarklet which, once clicked, scans the web page, finds the web fonts used and creates an interface where you can easily try alternative fonts.

    FFFFALLBACK Bookmarklet

    It lets you to instantly toggle between the original and fallback outputs or can show them both so you can better decide if your web page will look ok when no web fonts are displayed.

    The project is the result of a very nice article, Type study: Choosing fallback fonts, which will probably end up in "you sticking stronger to the bookmarklet" : ).

    FOUT (Flash Of Unstyled Type) is the moment where web fonts appear unstyled for a short time just before loading @font-face (in FF 3.5/3.6 and IE 7-9). Once the web page is loaded, the viewer sees unstyled fonts turn into styled ones.

    In order to fix this issue, FOUT-B-Gone can be a good solution. It is a script which hides elements with custom fonts assigned to them for a defined period of time (like 200 milliseconds).

    FOUT-B-Gone

    During that period, the fonts will -probably/hopefully- be loaded and the end-user won't experience FOUT.

    P.S. There is also a built-in function which helps detecting whether @font-face is supported or not.

    Sometimes, like switching between OSs, we require a font being in a different format for a better compatibility

    FreeFontConverter is a web application that enables us to convert from -almost- any font format to another.

    Besides the common font formats like TrueType (.ttf), OpenType (.oft) and PostScript (.ps), it supports .svg, .bin, .dfont and many others.

    Free Font Converter

    Uptime Robot
    feed-holder
    FeedBurner
    • PSD to HTML
    • aXmag - Flash Page Flip Magazine Software, PDF to Flash Converter
    • ManageWP
      PSD to HTML