A short time ago I posted "Free web font resources for designers", which includes a short list, because there are thousands of free web fonts out there, so in today's post, I am going to highlight several sources of font inspiration, which I have found from film and television. Some of these inspiring fonts are free, and some have a cost structure attached in one form or another. In the second part of this series I will show you how to apply these custom fonts to your websites using the @font-face CSS property.
If you have been following me for sometime now, you might already know that I get inspiration from many atypical sources. One such unusual source of insight comes from films and movies, which for me are a great way that I get my font inspiration. For instance, several nights ago we happened to watch the film, Step Brothers, and I noticed that the opening credit, as shown in Figure A below, utilizes a particular and unique font. So, I did some digging to find out what exactly is the font utilized in the credits and titles for the film. And I also wanted to know if these fonts are available for use in web design, so I embarked on a search.
Figure AMrs. Strange" true type font as displayed in Figure B below, on dafont.com seems to be similar to the one used in the "Step Brothers" film, so I tested it with the custom preview text of "Relativity Media", to match and compare to the opening sequence. Turns out that it is a close approximation of the font, but it does not exactly match up. So I did some more digging; I even contacted the company that created the titles for the Step Brothers film; but I am still waiting on a reply.
Figure BMen in Black films, as shown in Figure C below.
Figure Copening sequence titles were created by the graphic designer, and film title designer Pablo Ferro, who is also credited with creating titles for the films Dr Strangelove, Bullitt, The Thomas Crown Affair, No Way Out, Addams Family, To Die For, Good Will Hunting, LA Confidential, and The Manchurian Candidate. All of these title sequences can be viewed at the Alien Resident Digital Video Effects page. Several of Ferro's film titles are displayed in the collage shown in Figure D below.
Figure EJens R. Ziehn, and as it turns out, he is also credited with creating eighteen total film-worthy title fonts for web and print usage, including Mars Attacks, Goonies, The Sixth Sense, Signs, and Shaun of The Dead, several of which are displayed in Figure F below.
Figure FJay J. Nelson of Macworld posted an article on April 2, 2010 where he describes the inspiration he gets from them as well. Jay's first inspiration came from watching a segment of the I Dream of Jeannie TV series, and his search for that font pointed him to the Famous Fonts website. I had to check it out for myself. Several of the fonts you can find there are displayed in Figure G.
Figure GGilligan's Island font by Mark Riddle is available for download on Da Font, as shown in Figure I below. And while the true type Gilligan's Island font does capture the essence of the original font from the title sequence in the TV series, it does not portray the exact spacing and alignment characteristics, which of course are hard to do when you translate an original free form hand drawn font into a useful and reusable true type font for web or print.
Most of the fonts that are provided by Famous Fonts and other online sources such as Da Font are either freeware or shareware, and each is provided from the original source as a zip file for download. Each font listing includes the font name, the original author, and the zip file; some also contain a read me file with licensing and usage instructions.
Quality varies from each original source, and in some cases, you do get what you pay for. Variations in detail, spacing, and certain glitches can prevent them from being useful, in particular when converted for print. As a rule of thumb, you may want to stick with those fonts that the designer has identified with their name and any versioning comments along with the font file, as these are generally a better quality product.
In the next post, I will demonstrate incorporating several of these custom fonts to your websites using the @font-face property in your CSS, allowing visitors to view your nifty fonts no matter the browser or the local- device installed fonts.
Do you have favorite font styles that you've picked up from film or TV? Share them with us below.
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 government.