TYPE DESIGN INFORMATION PAGE last updated on Wed Nov 20 11:30:31 EST 2024
FONT RECOGNITION VIA FONT MOOSE |
|
|
|
Fonts and HTML | ||
|
|
|
Boston, MA-based designer at Cloudflare and freelance film composer. Author of The Magic of CSS, a fantastic introduction to CSS. Github link. [Google] [More] ⦿ | |
Jakob Nielsen's great writings on the good and bad in web pages. [Google] [More] ⦿ | |
Ana Estrada Martos is a UX/UI developer in Madrid, Spain. In 2018, she designed the free experimental modular typeface family Dana. This typeface, conceived in an 11x12 grid, consists of lines and circle arcs, and is named after the X-Files star Dana Scully. The font is also coded directly in HTML. [Google] [More] ⦿ | |
Andrew Daviel
| |
Andy Hume
| |
Antonio Carusone
| |
Technical font page for Apache FOP systems: Apache FOP (Formatting Objects Processor) is a print formatter driven by XSL formatting objects (XSL-FO) and an output independent formatter. It is a Java application that reads a formatting object (FO) tree and renders the resulting pages to a specified output. Output formats currently supported include PDF, PS, PCL, AFP, XML (area tree representation), Print, AWT and PNG, and to a lesser extent, RTF and TXT. The primary output> [Google] [More] ⦿ | |
The Batik SVG Toolkit is a Java-based toolkit for applications or applets that want to use images in the Scalable Vector Graphics (SVG) format for various purposes, such as display, generation or manipulation. The project's ambition is to give developers a set of core modules that can be used together or individually to support specific SVG solutions. Examples of modules are the SVG Parser, the SVG Generator and the SVG DOM. It includes an SVG Font Converter, called TrueType Font to SVG (ttf2svg): The TrueType Font converter application helps to embed font definitions in SVG files. Typically, one can just include a minimal subset of needed characters. [Google] [More] ⦿ | |
Ben Blish compares PDF with HTML:" ... You could just use HTML in the first place. PDF is primarily a scam, a huge, overweight format that offers very little in return for it's proprietary nature. If you can't prepare a good document in HTML, use a higher level tool to do it for you. Or learn how, which is smarter, anyway. HTML is the language of the web. PDF is not. HTML is a fabulous, compatible, live loading streaming format. PDF is not. HTML is a flexible, live medium that encourages quality document authoring in many styles (including print styles) while PDF is a static, inflexible medium that encourages "print-like" authoring only. HTML is accessable to any machine, old or new. Anything on the net. PDF is accessible only to machines that have ports of these representations, and that's just a few platforms. PDF locks you to Adobe (like GIF locks you to Unisys.) HTML frees you to use any compatible mechanism from a text browser to the most complex, newest, dingleberry-enhanced browser (like Opera!) When ego drives you to require a printed document (or a net document!) that "must match exactly" what you see on your screen, all you're doing is demonstrating that you're anal retentive. And that you could care less, or have not considered in any depth, the needs of the readers. Yes, readers have vastly different needs. Some *need* large print, some prefer small. Size is totally relative - what looked good to the author on a 15 inch monitor running 800x600 looks like ant tracks on a 21 inch in 1600x1200. Some like wide columns, some like (or need!) narrow. TO limit the reader to the composer's vision of a document is egotistical, shortsighted and in some cases, even cruel. We're beginning to even see this foolhardy approach on web pages with advent of style sheets; pages where the font can't be enlarged and the page does not follow the browser size... imagine the dismap of the visually impaired as they can't read what's on the screen because some joker locked the font into a tiny representation. If you're good at authoring documents, you'll write them so that they display well in any browser, and print in a rational fashion from those browsers, barring actual browser printing problems you can't get around (the same thing applies to PDF... no special dispensation required!) You'll test your documents at all font sizes to make sure that they continue to format well, and you'll make sure your images don't stomp on your text because you didn't clear the margins. But what you WON'T do... is use PDF. And... almost all of that applies to postscript as well." [Google] [More] ⦿ | |
Bert Bos studied Mathematics in Groningen (1982-1987), and wrote a thesis about Graphic User Interfaces (1987-1993). He worked on an Internet browser and the surrounding infrastructure for the Faculty of Arts in Groningen and is now working for The World Wide Web Consortium on style sheets and math. He lives in Sophia Antipolis near Nice in France. Author of Cascading Style Sheets---designing for the Web (3rd ed.) (2005, Hakon Wium Lie & Bert Bos). He also created a free transitional family in metafont and opentype for use with TeX, Gladiator and Gladiator Sans (1991). Klingspor link. [Google] [More] ⦿ | |
Tips by Jeff Carlson on web typography. German translation. [Google] [More] ⦿ | |
Commercial product for HTML creation. The manual has a lot of web font tips. [Google] [More] ⦿ | |
Alan J. Flavell (Glasgow University) discusses the interface between fonts and browsers. A list of Unicode-compliant fonts is given. There is also information on monospaced fonts. Regarding Webdings, he explains that the font is not Unicode-compliant and thus is inappropriate for web use, as HTML looks for unicode mappings. In other words, the name Webdings is inappropriate. [Google] [More] ⦿ | |
Essay: The Best Choices for Web Fonts. By Jack Yan and Associates. [Google] [More] ⦿ | |
The cascading style sheets info page on fonts translated into Japanese by Kazuteru Okahashi. [Google] [More] ⦿ | |
On the use and specs for fonts in HTML's Cascading Style Sheets (CSS). Another entry point. Aussie mirror. USA mirror. Sri Lanka mirror. Another Aussie mirror. French mirror. Japanese translation by Kazuteru Okahashi. Another German mirror. [Google] [More] ⦿ | |
Charles Upsdell compares the main Windows, Mac and UNIX fonts that ship with the systems. There is information on which fonts to pick for web pages. Another URL. [Google] [More] ⦿ | |
Chengyin Liu
| |
Archive of web page counter fonts, with designs by Andy Church, Andrew Vestal, Alyssa Gobelle, Stephen Marz, Charles Roode, Jones Acres, Hien Le, Matt Sprinkle, Scott Vergara, Scott Hammack, Alex Dolski, Brian Glick, Ike Sato, Wasan Syananondh, and about 40 others. [Google] [More] ⦿ | |
Chris Coyier
| |
Further discussion on font linking and web fonts. [Google] [More] ⦿ | |
Christian Metts
| |
Christian-Heinrich Wunderlich
| |
Code Candies
| Nico Brünjes's German tutorial on @font-0face embedding. You will need a truetype or opentype font on your computer (local URL) or somewhere (global URL). The declaration in the CSS section is then as follows, assuming you'd like to give the name ConradBlack to the font file located on your computer at "/fonts/arrogance.ttf":
[Google]
[More] ⦿
|
A commercial Windows tool to create web pages that use your own fonts. By CoffeeCup Software from Corpus Christi, TX. It also has a medium-sized font archive. [Google] [More] ⦿ | |
Check the colour contrast of your type on certain backgrounds. [Google] [More] ⦿ | |
Conor Muirhead
| |
Commercial product by Hake u. Said GmbH. ConvertPS 5.0 Windows translates the PostScript files and converts them into more compatible vector- and pixel-formats like, e.g., Windows Metafile (WMF) or Bitmaps (BMP). Output formats: Vector (WMF, EMF, DXF, SVG, PDF), Bitmap (BMP, TIFF, JPEG, PNG, GIF). Input formats: PS, EPS, AI, PRN. [Google] [More] ⦿ | |
CopyPasteCharacter
| Martin Ström's outfit. It has an on-line tool for grabbing and using special characters. [Google] [More] ⦿ |
Cory Mawhorter
| |
This Chinese page compares fonts for coding and for small screens: Courier New, Andale Mono, Monaco, Profont, Monofur, Proggy, Droid Sans Mono, Deja Vu Sans Mono, Consolas and Inconsolata. [Google] [More] ⦿ | |
Beautiful demos of what you can do with CSS. By Eric Meyer. [Google] [More] ⦿ | |
Listing of the most popular CSS fonts specified in Japanese web pages. At the top: MS P Gothic, MS UI Gothic, Osaka, Times New Roman, MS Gothic, Arial, Verdana, MS P Mincho, Courier New, Comic Sans MS, and so forth. [Google] [More] ⦿ | |
CSS Sans
| Japanese computer scientists Yusuke Sugomori (University of Tokyo) and Masanari Kakamu created a (free) font implemented entirely in CSS. Each character is a distortion of a plain black HTML div element. Github link. [Google] [More] ⦿ |
Examples of CSS font styles for Cyrillic font choices. Latin sub-page. [Google] [More] ⦿ | |
A style sheet example for creating useful colored variabl-size icons for web sites. [Google] [More] ⦿ | |
CSS Typography
| Garrett Dimon, a a freelance designer and developer, explains the necessity of good CSS code for larger web sites. [Google] [More] ⦿ |
This page lets you test CSS options for typefaces. Examples include body { font-size: 12px; font-family:; } p { font-size: 1em; /* 12px */ line-height: 1.5em; /* 18px */ margin: 0 0 1.5em 0; } you-got24px { font-size: 2em; /* 24px */ line-height: 1.5em; /* 36px */ margin-top: 0.75em; margin-bottom: 0em; } you-got22px { font-size: 1.8333em; /* 22px */ line-height: 1.6364em; /* 36px */ margin-top: 0.8182em; margin-bottom: 0em; } you-got20px { font-size: 1.6667em; /* 20px */ line-height: 1.8em; /* 36px */ margin-top: 0.9em; margin-bottom: 0em; } you-got18px { font-size: 1.5em; /* 18px */ line-height: 1em; /* 18px */ margin-top: 1em; margin-bottom: 0em; } you-got16px { font-size: 1.3333em; /* 16px */ line-height: 1.125em; /* 18px */ margin-top: 1.125em; margin-bottom: 0em; } you-got14px { font-size: 1.1667em; /* 14px */ line-height: 1.2857em; /* 18px */ margin-top: 1.2857em; margin-bottom: 0em; }[Google] [More] ⦿ | |
CSS3 Techniques For Major Browsers using the Power of jQuery | Many exciting new functions and features are being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, and so forth. CSS3 leads to greater flexibility and makes it much easier to recreate previously complex effects. Not all current browsers support CSS3, but it is however possible to create equivalent effects and serve it with the power of jQuery. This article presents 5 CSS3 techniques which can dramatically get you a stunning user interfaces and how to achieve almost the same effects using jQuery for browsers that are not compatible yet with CSS3 new features. [Google] [More] ⦿ |
CSSTXT is an uncomplicated web tool for generating CSS style rules for web typography. [Google] [More] ⦿ | |
Cufon
| Free software published in 2009 to render text in a font of one's choice. Developed by Simo Kinnunen. From the announcement: Cufon aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use. To achieve this ambitious goal the following requirements were set:
Cufon consists of a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript. In reality the generator is little more than a web-based interface to FontForge. First, the generator builds a custom FontForge script based on user input and then runs it, saving the result as an SVG font. The SVG font is then parsed and SVG paths are converted to VML paths. This is a crucial step in achieving stellar performance in Internet Explorer, as it supports VML natively. The resulting document is then converted into JSON with a mix of functional JavaScript. This has numerous advantages:
|
We are in November 2008. The proposals for font usage on web pages are coming in from all sides. These include
| |
Daniel Yacob
| |
Dave Rupert
| |
Dave Shea
| |
Author in 2009 of Downloadable font formats for the Web. [Google] [More] ⦿ | |
Davide P. Cervone
| |
Test page for Jos Buivenga's Delicious face. The fonts are converted to woff, encoded as base64 and embedded in the CSS in the head of the source code of the page. Great piece of coding! [Google] [More] ⦿ | |
Free software tool to experiment with different web typography and colour combinations on a page as well as check for colour accessibility level. [Google] [More] ⦿ | |
Divya Manian
| |
A German language page on the calculation of dpi for screens. Typically, today, they range from 72 dpi to 96 dpi and with larger monitors well over 100 dpi. To have text appear identical on all screens, we should adjust for that discrepancy. [Google] [More] ⦿ | |
Dr. Roland Unger's German language glossary. HTML help. [Google] [More] ⦿ | |
A CSS tutorial on defining drop caps in CSS. [Google] [More] ⦿ | |
A free program based on code by Mauro Persano for turning a truetype font into a PNG image containing the glyphs, plus a font information file. [Google] [More] ⦿ | |
Russian artist and software specialist who was written an on-line HTML creator called Typograph. One of his typographic experiments/illustrations. [Google] [More] ⦿ | |
Eric Miller's tips for embedding fonts in HTML files. [Google] [More] ⦿ | |
Steve Mulder's nice crash course on font embedding. Format 1: "eot" (embedded open type) is a Microsoft IE format supporting truetype and opentype. Format 2: "pfr" (truedoc) is a Netscape/Bitstream way of doing things and supports truetype and type 1. [Google] [More] ⦿ | |
Why type on the web is so bad: very readable essay by Eric Eaton, a senior designer at Wired Digital. [Google] [More] ⦿ | |
Facelift Image Replacement
| FLIR or Facelift Image Replacement is advertised as an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers to elements and everything in between. It is an alternative to sIFR, and is free software by Cory Mawhorter. [Google] [More] ⦿ |
Fahri Özkaramanli
| |
Faruk Ate
| |
FauxFoundry
| In June 2019, together with Laurence Penney, Irene Vlachou initiated the experimental project FauxFoundry, a web font service offering fallback fonts, such that multiple scripts can be presented with reasonable fidelity to the web designer's intent, even when the primary font does not support those scripts. Currently working for Greek, thus providing Greek fallback fonts for fonts that do not contain Greek. The system takes measurements from Latin fonts that represent the parametric axes developed by Type Network. In the process, FauxFoundry developed the FauxForger software utility. [Google] [More] ⦿ |
Fine typography for the web
| Dave Shea gives a slideshow about good typography, and takes us through the various ways of insuring proper font selections. [Google] [More] ⦿ |
Five simple steps to better typography
| |
Flipping Typical
| Comparison tool for fonts on one's computer. By Stuart Robinson. [Google] [More] ⦿ |
Peter Kleiweg's free utility, which creates a set of HTML pages, each showing samples of twenty fonts -- Type1, TrueType, and others that are available to Ghostscript. You can quickly browse your fonts using a HTML browser, and click a sample to view that font's complete character set. A separate script is available that lists detailed info about a particular font. [Google] [More] ⦿ | |
A google document (PDF based) that compares fonts. [Google] [More] ⦿ | |
An on-line utility for testing fonts for use on web pages. Their blurb: font dragr allows you to easily test custom fonts, through the @font-face at-rule, without the need for any CSS coding or knowledge of CSS coding. All you need to do is drag and drop. [...] It's incredibly easy to use. All you need to do is drag and drop a font file from your computer into font dragr in a supporting browser (Such as Firefox 3.6+ or Chrome 6+). [Google] [More] ⦿ | |
Neat explanations on font embedding in web pages by Microsoft. [Google] [More] ⦿ | |
Font embedding: a reality?
| Chris Coyier discusses the font-face tag in CSS, and the lack of success, due to the fact that either browsers are not implementing it, or font designers (like Hoefler, and many others) are explicitly forbidding their font licensees to offer up their fonts via that tag. [Google] [More] ⦿ |
Great manual and essay about CSS2 (cascading style sheets) and the font matching algorithms used to pick the closest font in web pages. Cascading Style Sheets, level 2 W3C Proposed Recommendation 24-Mar-1998. See also here. [Google] [More] ⦿ | |
Font Matrix
| Richard Rutter's nice cross-listing of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite. Useful for specifying fonts in html as well. Original URL from 2007. [Google] [More] ⦿ |
Font Smoothing
| Krzysztof Szafranek explains font smoothing on computer screens. Things like antialiasing and subpixel rendering get a thorough treatment. Subpixel rendering seems to be the method of choice as of 2009, with Windows Vista's version called ClearType and the Masc OS X version called Quartz. I quote some of his conclusions. Unfortunately, a designer cannot ensure that users will see HTML text exactly as designed. Rendering the whole page as an image or Flash file is not a sensible alternative due to performance, usability and accessibility concerns. What, then, can a designer do to ensure maximum legibility and a good look of a type?
|
Font smoothing, anti-aliasing, and sub-pixel rendering
| Joel Spolsky on rendering engines, and on the differences between Mac and Windows. [Google] [More] ⦿ |
Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages. To use it all you have to do is simply enter the text you would like to preview, modify the various CSS properties until you find a style you like, and then click on the Get CSS Code button to generate all the necassary CSS code to reproduce those styles in your webpage. [Google] [More] ⦿ | |
Fontfarm
| Natascha Dell (Fontfarm, Aachen) is a graduate from FH Aachen (Germany) who wrote a thesis in 2004 on the use and abuse of typography on the web. Fonts designed at Fontfarm in 2005-2006 by Kai F. Oetzbach and Natascha Dell: Agendatype (+Swash), Goffik-Outline, Goffik-Shadow, KofiPure (in Sans, Serif and SemisKursiv), NakoticaBarrow (techno), Nafi (2005, upright connected script and some dingbats), Caput (2008, a sans family), Jenny (a six-style family that grew out of Jenson Antiqua into a more angular carapace), Parker-Barrow (a sans+slab experiment). Typefaces by the same pair in 2011: Gedau Gothic (grotesque family), Ergilo (angular serif family). Newtype is a 36-style superfamily for headlines, information design and short passages. |
A hands-on comparison of the main web browser fonts. [Google] [More] ⦿ | |
This list contained the following fonts in January 2009: Graublau Sans Web, Anivers, Delicious, Fontin (sans), Fertigo, Tallys, Diavlo, Pykes Peak Zero, Gentium, Doulos SIL, Charis SIL, Andika Design Review, Linux Libertine, Century Catalogue, Inconsolata, Old Standard Covers, Breip, Tagesschrift, Kaffesatz, Vollkorn-Brotschrift, Prociono, Goudy Bookletter 1911, Liberation Fonts, Droid Fonts, M+ Web Fonts. Another similar list is here. [Google] [More] ⦿ | |
| |
Frank Rausch
| |
FRKT
| A 2009 article on font replacement, written by Oslo-based graphic designer and web developer Johannes Gorset. Verdict: Cufón and typeface.js are based on later technologies (that's not to say they are not widely supported, as is so often the case with new technology and the web), so it should come as no surprise that they perform better in most respects. Unless you are overly bothered about text selection not looking entirely right just yet, you should probably go with the HTML5-based technique Cufón. [Google] [More] ⦿ |
What you can do with font tags on web pages. [Google] [More] ⦿ | |
Garrett Dimon
| |
Garrick Van Buren
| |
George Butler
| |
The Giko Font project is to provide (free open source code) for developing bitmap fonts with a web interface. [Google] [More] ⦿ | |
The font subpages at the San Francisco-based computer software site GitHub. Most links are for apps and small utilities related to fonts. [Google] [More] ⦿ | |
Commercial product by em2 Solutions AB. It is a web server extension that makes it possible to show text with in many languages on many browsers on many platforms. [Google] [More] ⦿ | |
Demo (in Dutch) on how to use the google fonts. See also here and be sure to check the source code. [Google] [More] ⦿ | |
Great page that permits Unicode character description and search. A great tool. Browse by character, script, and so forth. [Google] [More] ⦿ | |
Günter Schuler is a German author interested in good typography. Among the things he seels are the Cleverprinting DTP-Typomter (a handy sheet for measuring type sizes, both absolute and relative), TypeSelect Schriftenfächer (a wall paint-style foldout with typefaces), and Grundkurs Typografie und Layout (an introductory book on typography). [Google] [More] ⦿ | |
Advice on gzipping font files for placing on web pages. [Google] [More] ⦿ | |
CSS co-inventor who proposed the CSS font solution for font selection on web pages in 1994: browser makers should fully implement the CSS font specification by letting raw, unprotected font files be linked to web pages. And revise the CSS specs to allow zipped font collections to be linked to web pages, so that web designers can benefit from the large volume of freeware fonts. He is still a member of the W3C CSS Working Group. He is the CTO of Opera Software and a champion for CSS compliance in all browsers. Lie is also a director of YesLogic, the company behind the CSS-based Prince formatter, which was used to produce a book he co-authored: Cascading Style Sheets: Designing for the Web. He has a Master's degree from the MIT Media Lab and a PhD from the University of Oslo. He is an advocate of Acid2. [Google] [More] ⦿ | |
Useful links related to Hebrew fonts and web pages. [Google] [More] ⦿ | |
Adam Costello, a computer science graduate student at UC Berkeley, shows with the aid of KellyAnnGothic how not to use letters in HTML pages. [Google] [More] ⦿ | |
HTML: Character encoding
| Most HTML character coding tables are incomplete or non-visual. This table by R. Jansen is something else. It is the reference I use. [Google] [More] ⦿ |
Chris Coyier's tool provides one with the standard Latin text already in HTML tags. Clicking on any of the blocks automatically copies the text to your clipboard! [Google] [More] ⦿ | |
Anne DeBlois' tutorial on using fonts in HTML pages. [Google] [More] ⦿ | |
Ron Woodall's nice explanations about font tags for dynamic font inclusion. [Google] [More] ⦿ | |
Mike Sweet's free program for converting HTML files to indexed HTML, PostScript level 1 and 2, and PDF. It has some limitations (no pictures, no stylesheets). Copyright Easy Software Products. [Google] [More] ⦿ | |
Tutorial on the font tags in HTML: font-family, font-style, font-weight, font-size. [Google] [More] ⦿ | |
Tutorial on the font tags in CSS: font-family, font-variant, font-style, font-weight, font-size. [Google] [More] ⦿ | |
Icon Stacks
| Conor Muirhead shows how to combine icon glyphs to create complex icons using clever CSS programming. [Google] [More] ⦿ |
Information Architects
| Blog about information design, with occasional articles about typography, such as Web Design is 95% Typography (2008). That article has good common sense advice, so I quote passages.
|
Set of links related to type for web pages. [Google] [More] ⦿ | |
Webmonkey's intro to font embedding on web pages. [Google] [More] ⦿ | |
Ian Graham's fantastic introduction to HTML. Special characters, ISO Latin-1 character table. [Google] [More] ⦿ | |
On-line illustration of wht one should always prefer black on white instead of white on black. [Google] [More] ⦿ | |
Coding that supports the following languages: Afrikaans, Catalan, Danish, Dutch, English, Faeroese, Finnish, French, German, Galician, Irish, Icelandic, Italian, Norwegian, Portuguese, Spanish and Swedish. See also here, here, here, here, here, here, here, and here. More specifically, other ISO-8859 groups are as follows:
| |
Useful tables of all special characters allowed in HTML. [Google] [More] ⦿ | |
In 2001, Jack Schofield at the Guardian writes a gorgeous piece about the silliness of designing web pages using pixel technology for one browser and one screen. The web users should dictate what they want to see and how, and not the web page designers. Great piece, Jack. [Google] [More] ⦿ | |
One of the greatest introductions to HTML, by Jan Thor. [Google] [More] ⦿ | |
Jaroslav „Dero“ Polakovic
| |
Javascript--CSS Font Detector
| Free on-line software by Lalit Patel (from Orissa, India) for detecting fonts on one's system. See also Johan sundström's version. [Google] [More] ⦿ |
Author of Accessible Web Typography. The web page corresponds to the book. [Google] [More] ⦿ | |
Joe Clark's essays on typography. Typoblog: his old blog on type. Newest URL for his type blog. Author of the must-read book Building Accessible Websites (2002). At ATypI 2003 in Vancouver, he spoke about typography for online captioning. ATypI writes: Toronto journalist, author (Building accessible websites, New Riders, 2003), and accessibility consultant Joe Clark has followed typography as long as he.s followed accessibility for people with disabilities: over 20 years. He is director of the Open&Closed Project, a public-private-academic partnership in research and standardisation in captioning, audio description, subtitling, dubbing, and related fields in audiovisual accessibility. At ATypI 2007 in Brighton, he spoke about Type in the Toronto Subway. [Google] [More] ⦿ | |
Joel Spolsky
| |
Johannes Gorset
| |
John Reeve
| |
Jon Tangerine
| |
jsMath
| Download site for free TeX fonts for jsMath (an impressive free package by Davide P. Cervone for including math on web pages). These fonts can also be used elsewhere of course. Truetype and type fonts are available, and instructions are provided. The list of fonts: from the American Mathematical Society, CMBX10, CMEX10, CMMI10, CMR10, CMSY10, CMTI10; home-made in 2005: jsMath-bbold10, jsMath-cmbx10, jsMath-cmex10, jsMath-cmmi10, jsMath-cmr10, jsMath-cmsy10, jsMath-cmti10, jsMath-cmmib10, jsMath-eufb10, jsMath-eufm10, jsMath-eurb10, jsMath-eurm10, jsMath-eusb10, jsMath-eusm10, jsMath-lasy10, jsMath-lasyb10, jsMath-msam10, jsMath-msbm10, jsMath-rsfs10, jsMath-stmary10, jsMath-wasy10, jsMath-wasyb10; by Basil K. Malyshev: Cmbx10, Cmex10, Cmmi10, Cmr10, Cmsy10, Cmti10. [Google] [More] ⦿ |
Kernest
| A site that offers to host fonts for use in @fontface tags on web pages. I do not quite understand the pricing---somewhere it says, for example, that Abia Wide by Tkachenko will cost 15 dollars per year and per web site. It is unclear who pays who in the triangle "web site (html page) maker", "font designer", "Kernest". I believe that some are free. Fontue is a free open-source, web font server built for Kernest.com. The list of designers participating in this effort is impressive. The list of designers as of March 2010: A. Korolkova | Aj Paglia | Alec Julien | Alexander Fell | Alexander Kalachev | Alexey Kryukov | Alexey Maslov | Andrew Paglinawan | Andrey V. Panov | Andy Chung | Annie Olsen | Apostolos Syropoulos | Apostrophic Labs | Ascender Corporation | B. Jackowski | Barry Schwartz | Ben Weiner | Bernd Montag | Bitstream | Bo Linnemann | Brandon Schoech | Caius Chance | Cal Henderson | Caroline Hadilaksono | Chank Diesel | Charles Bigelow | Choz Cunningham | Chris Miller | Christian Ghirardi | Christophe Féray | Coji Morishita | Colin Willems | Daniel Johnson | Daniel Midgley | Darren Rigby | Dave Crossland | Derek Weathersbee | Diego Quintana | Dieter Steffmann | Dimitri Castrique | Dot Colon | Dustin Norlander | Eat Street Fontmaking Workshop | Ed Merritt | Edgar Tadeo | Eric Schiller | Fontsite | Fredrick Nader | Friedrich Althausen | Garrett Le Sage | Georg Seifert | George Triantafyllakos | Giovanniello | Graham Meade | Greyscale | Gurkan Sengun | Haley Fiege | Han The Thanh | Harold Lohner | Hiran Venugopalan | Hirwen Harendal | J.M. Nowacki | James Puckett | Jan Gerner | Jan Sonntag | Janusz M. Nowacki | Jason Kottke | Jeffrey Visser | Jeroen Klaver | Jess Latham | Johan Aakerlund | Johan Mattsson | John Stracke | Jon Hicks | Jovanny Lemonad | Juan Pablo De Gregorio | Justus Erich Walbaum | Kris Holmes | La Tipomatika | Libertine Open Fonts Project | Lithu K Kumar | Ludivine Loiseau | M+ Fonts | Manfred Klein | Marcelo Magalhaes | Mark Simonson | Marko Jovanovac | Markus Waeger | Matt Mc Inerney | Matthew Welch | Meredith Mandel | Michael Tension | MÃ¥rten Nettelbladt | Nadia Knechtle | Nick Curtis | O. Umpeleva | Orgdot Consortium | Oscar Marchal | Patrick Broderick | Paul Lloyd | Paulo Silva | Peter Hoffman | Peter Wiegel | Philipp H. Poll | Philippe Cochy | Ralph Oliver Du Carrois | Raph Levien | Richard A. Ware | Robby Woodard | Robert Norton | Rodrigo Fuenzalida | Rogier Van Dalen | Roman Yershov | Ryoichi Tsunekawa | Ryoichi Tsunekawa Bagel | Sil Nrsi Team | Sebastian Mechelk | Sergiy Tkachenko | Sparanoid | Steeve Gruson | Stephen C. Gilardi | Stephen G. Hartke | Steve Jordi | Steve Matteson | Thatcher Ulrich | Thomas Schraitle | Tino Meinert | Tom Murphy 7 | Tom Tor | Tup Wanders | Tyler Finck | V. Yefimov | Valek Filippov | Vic Fieger | Victor Gaultney | Wolf Bain X | Yann Le Coroller | Yeah Noah | Yusuke Kamiyamane | Zygfryd Gardzielewski | Afrojet | Catrina | Craig Kroeger | Ficod | Gluk | Inkboy | Laura Kristen. [Google] [More] ⦿ |
Know your type
| Red Labor on making web and screen representations. His recommendations are at a higher level. [Google] [More] ⦿ |
Practical on-line tool for checking the types on your browser. [Google] [More] ⦿ | |
Krzysztof Szafranek
| |
Kyle Meyer
| |
Lalit Patel
| |
Laurence Penney
| |
A MyFonts webfonts feature article. The summary: Layering text adds depth and visual interest to headlines, mastheads and other large display type on your site. There are plenty of fonts that are specifically designed for this technique. Font families designed for this technique will typically have two or more versions of the font, such as a shadow, fill, outline or a texture. It is especially important that the fonts all have the same metric values, because making manual tweaks to spacing and kerning is hard enough in DTP applications; in CSS, it is virtually impossible. The typefaces below all work right out of the box. The basic principle of this technique is that it takes two identical lines of text, applies a different version of the font to each (such as an outline and a fill version) and then layers one above the other. [Google] [More] ⦿ | |
Argentinian tutorial on cascading style sheets, web typography, the main families of web fonts (included in the main operating systems), and legibility. [Google] [More] ⦿ | |
Lettering.js
| Advice and examples of a jQuery plugin for making nice headlines on web pages. [Google] [More] ⦿ |
Linux Web Fonts
| Andrew Daviel's survey and comparison of Linux fonts. [Google] [More] ⦿ |
LiveGe'ez
| Daniel Yacob's fantastic page with a near-complete listing of all available Ethiopic fonts, and with explanations about Ethiopic in HTML pages. [Google] [More] ⦿ |
symbol.ttf: a font with logical symbols. Explanations by Stefan R. Mueller on the use of such fonts in HTML documents. [Google] [More] ⦿ | |
A list of standard typefaces found pre-installed on most systems for reading web pages. With discussion. By Jeff Croft at JeffCroft.com. [Google] [More] ⦿ | |
Useful listing of the Mac OS X and Windows Xfonts, anno 2007.
| |
Scott Grannemann provides information and links for web site designers on fonts and typography. [Google] [More] ⦿ | |
On Art Lebedev's site, articles (snippets, really) on graphic and industrial design, interface engineering, typography, semiotics, and visualization. Has been up since 1997. Translated from Russian. [Google] [More] ⦿ | |
Mark Boulton
| |
Mark Wubben
| |
Marko Dugonjic
| |
Great set of links related to type for web pages. [Google] [More] ⦿ | |
Martin Ström
| |
Web specialist, who wrote Improving Font Rendering With CSS in 2019. [Google] [More] ⦿ | |
Mike Davidson
| |
Thomas Baekdal gives tips about minimum font size specifications in style sheets for web pages. [Google] [More] ⦿ | |
Natascha Dell
| |
Link pages related to font choices, CSS, and web typography. [Google] [More] ⦿ | |
Nico Brünjes
| |
Nimbupani Designs
| Divya Manian discusses in July 2009 about the font situation on the web. [Google] [More] ⦿ |
Very readable essay by Taylor on the use of fonts in web pages. [Google] [More] ⦿ | |
Noura Yehia
| |
The list of alternatives, as of the ummer of 2009:
| |
A free font tool by Raphël Bastide (Paris) to list and organize fonts online. Published in 2014, it can be used to share references with co-workers or students, to make a foundry portfolio, or as a private tool. View Ofont in action. [Google] [More] ⦿ | |
Oliver Reichenstein
| |
Page ranking by google for the term "fonts" reveals that most big commercial font foundries are doing it all wrong by using convoluted tree structures and internal URLs that change at least once a year. The top 30 sites (April 2004) include mostly free font archives (1001freefonts (1), Fontsnthings (4), Acid Fonts (5), 1001fonts (6), Fontfreak (8), Fontalicious (10), Abstract Fonts (11), 007 fonts (13), Cool Archive (16), DaFONT (17), PCFonts (20), Cool Fonts (21), Fontastic (27), ABC Giant (28), Fontfile (29)), shareware/freeware foundries (Larabie (2), Divide by zero (14)), type info sites (SIL.org (12), yours truly (26), Yamada (30)), and the odd commercial foundry/vendor (Agfa (3), Microsoft (7), Chank (9), MyFonts (15), Linotype (18), PhilsFonts (19), Emigre (22), Adobe (24), Blambot (25)). Checked again in May 2008, and the free font archives have moved up dramatically (Dafont (17 -> 1), 1001freefonts (1 -> 3), Urbanfonts (4), Abstract Fonts (11 -> 5), Smashing Magazine (6), Simplythebest Free Fonts (7), 1001fonts (6 -> 8), FontFreak (8 -> 10), Acid Fonts (5 -> 11), Highfonts (12), creamundo (13), Cooltext (16), Fontstock (17), Fontreactor (20), WebFXMall (21), PC Fonts (20 -> 23), Searchfreefonts (25), Actionfonts (27), Font Garden (29), Absolute Fonts Archive (30)). Shareware/freeware foundries basically vanished. International free font places kept up (SIL (12 -> 18), Yamada Language Center (30 -> 22)). Font and font software information sites crept up (w3.org (9), Wikipedia.org (14), Mozilla.org (15), w3schools.com (28)). Commercial vendors took a beating: only Fonts.Com/Monotype (2) and Larabiefonts (24) crack the top 30, but the link page Font Pool (26), which links to commercial foundries should be added to this category. Identifont is at 35, MyFonts at 37, Microsoft in position 38, Adobe at 43, Linotype at 50, Emigre at 82, FontStruct at 144, FontShop at 145, and Typographica at 191. [Google] [More] ⦿ | |
Technical guy who offers CSS and javascript tips regarding fonts and @fontface in web pages. Plenty of technical discussions in blog format. His comments on the Google Webfont API in 2010, right about the time he joined Google Chrome. [Google] [More] ⦿ | |
PCDTR stands for PHP + CSS Dynamic Text Replacement. A free javascript replaces html text using any custom font (styles are defined in the CSS file). The Google code called pcdtr is free to download. [Google] [More] ⦿ | |
Free open source code by Twibright Labs for making HTML pages out of PDF files. Note: I struggled for 30 minutes, and failed to install it for FreeBSD Unix. [Google] [More] ⦿ | |
A (free open source code) PDF/XML conversion program. The project is headed by Steve Dunn. [Google] [More] ⦿ | |
Gueorgui Ovtcharov and Rainer Dorsch at the University of Stuttgart developed free Open Source code for converting PDF files into HTML files. [Google] [More] ⦿ | |
Pelago (was: Reeve Jones Design)
| The Sigmund typeface is designed for dynamic use in web pages. Go here for details. By John Reeve. Just by clicking, generate an HTML img tag that displays text dynamically in the Sigmund font, which is very readable at small screen sizes. See also here. [Google] [More] ⦿ |
Penduka Senaka
| |
Philip Taylor
| |
Fontlab's 2006 type format designed for web site use. Fonts are described in the human-readable XML language, and the glyphs are just bitmap pictures, typically in PNG format. The format is non-proprietary. Editing can be done in a standard editor, or via the (proprietary) BitFonter. Web pages using these fonts must have the photofont plug-in installed, but from there, with the appropriate tags, the screen fonts behave like standard fonts in text. Text is searchable, indexable, and so forth. Photofont Start is a free Adobe Photoshop, Corel Painter and Macromedia Fireworks plug-in released in 2005. In 2008, Photofont WebReady was released by the FontLab people---with the help of sIFR, text on web pages is replaced by embedded text-searchable Flash. Old but dead link. [Google] [More] ⦿ | |
Information and user interface designer at Designr.it in Florence. His diary on the web is exquisitely typeset. He has tens of useful tips for web typography. [Google] [More] ⦿ | |
French type and web typography site, with commentary and tips. [Google] [More] ⦿ | |
PFRs are dynamically downloadable fonts that enable Netscape and Internet Explorer browsers to display character glyphs without relying on native system fonts. Netscape 4 and above have built-in support for PFRs, while Internet Explorer needs an ActiveX plug-in to display characters with PFRs. TrueDoc, the technology behind Portable Font Resources, was developed by BitStream. Alternate URL. Old URL. [Google] [More] ⦿ | |
On-line converter of text to HTML-ready format. [Google] [More] ⦿ | |
Free PERL code for postscript to text to html. [Google] [More] ⦿ | |
Nelson L. Chang's free program for converting postscript files into html files. Improved by Amr Haggag. Of limited use, as it requires many other things. [Google] [More] ⦿ | |
Free UNIX program for making a PostScript program into an HTML file. By Alessandro Agostini, Daniele Andreuccetti and Stefano Cerreti at the Florence Research Area and Electromagnetic Research Institute of National Research Council in Florence, Italy. [Google] [More] ⦿ | |
PostScript to HTML converter by Yannis Nikopoulos, developed in his bachelor thesis at the Computer Science Department at the University of Crete. Free source code. For UNIX only. [Google] [More] ⦿ | |
PostScript to HTML converter by Bradley for certain journals at Johns Hopkins University Press. Not applicable for most documents. He also has a script that parses the ps2ascii output to produce a HTML document for general documents. Free. [Google] [More] ⦿ | |
Pxfon
| Free software by Shaun Inman for creating Cufon-compatible pixel-based font.js files from specially prepared gifs. [Google] [More] ⦿ |
Fantastic pages about typography by Gunnlauger Briem. Some wonderful advice for web page typography. [Google] [More] ⦿ | |
R. Jansen
| |
Red Labor
| |
Remon Lammers
| |
Rendering Complex Type
| |
Rendering SVG font definitions using dojox.gfx
| The Dojo Toolkit is software to help open up the web. Tom Trenka posts a discussion of web fonts, and proposes a Dojo-specific solution that uses rendering SVG font definbitions. [Google] [More] ⦿ |
Richard Rutter
| |
Richard Rutter
| |
Exemplary web page by Brighton-based Richard Rutter on web typography. He showcases the first few pages of Robert Bringhurst's book. [Google] [More] ⦿ | |
Russ Maschmeyer
| |
A comparison of the pre-2005 web fonts everyone uses. [Google] [More] ⦿ | |
Nice German page explaining about fonts in HTML. [Google] [More] ⦿ | |
Sean Hodge
| |
Serif vs sans serif
| Faruk Ate discusses this old dilemma. Serif is more legible in print, but less so on screen. Serif is better for dyslexics though, as there is less confusion. At small screen size, sans serif is recommended. He concludes: Personally, I still prefer sans-serif for large chunks of text with a lovely serif heading. [Google] [More] ⦿ |
Masterful page by David Siegel about the dos, donts, wants and needs of web page design and fonts on them. [Google] [More] ⦿ | |
Shaun Inman
| |
sIFR
| sIFR is a method to insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics. The method, dubbed sIFR (or Scalable Inman Flash Replacement), was developed in 2003 by Shaun Inman and later refined by Mike Davidson and Mark Wubben. It requires javascript, Flash, and some tags in the html code to designate text to be put in a font of one's choice. The on-the-fly replacement or overlay of text by a rectangle of Flash text is automatic, once sIFR is installed. The developer only needs to edit sifr.fla and export the font in .swf. Blog. [Google] [More] ⦿ |
sIFR 3
| Mark Wubben, its Dutch hacker/inventor, explains about sIFR 3: sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of JavaScript, CSS, and Flash, which renders the font. It degrades gracefully if Flash is not present. sIFR 3 is open source and licensed under the CC-GNU LGPL. [Google] [More] ⦿ |
Simo Kinnunen
| |
Smashing Magazine: 5 Principles and Ideas of Setting Type on the Web
| A discussion of the best web type design principles, by Sean Hodge. [Google] [More] ⦿ |
Smashing Magazine: 50 Useful Design Tools for Beautiful Web Typography
| A discussion of the best web type design tools, by Noura yehia. [Google] [More] ⦿ |
Socitype
| Socitype is free software by Christian-Heinrich Wunderlich that allows one to place little single-letter gifs in HTML pages. Free complete gif collections of a "socialist" font are included. [Google] [More] ⦿ |
Special characters and mathematical symbols in HTML. [Google] [More] ⦿ | |
An excellent Russian tutorial on fonts in web pages. [Google] [More] ⦿ | |
Examples of the most frequently used screen fonts. In this test, Palatino Linotype, Georgia and Verdana come out as winners. [Google] [More] ⦿ | |
We are in April 2010, and Apple has just launched its iPad. Stephen Coles is not happy with Apple in general, and summarizes Apple's typographic disasters. Some passages: The string of odd missteps began with the release of Mac OS X. Amid a bunch bundled fonts not worth mentioning, the system came with Lucida Grande, an excellent screen font family based on Kris Holmes' Lucida Sans. The clean, readable face, contemporary but fairly neutral, was used throughout the OS X interface and embraced by web designers (along with its Windows equivalent Lucida Sans Unicode) as their go-to family for small text. Yet, to this day, there is no Lucida Grande italic. I can't explain why, and neither has anyone at Apple. This is the short and simple reason why sites like Facebook don't use italic. If you design with Lucida your options for emphasis and hierarchy are limited to size and weight. Meanwhile, Microsoft - the company that traditionally eats Apple's dust in design - worked with some of the world's best type designers to develop the ClearType fonts, six complete families designed specifically for the screen. A lack of Lucida Italic could be considered a mild irritant, but Apple's typographic neglect in OS X ran deeper. The system came with a font manager that was, until recently, the least reliable software bundled with a Mac. Even now it has has a reputation that belies Apple's high customer satisfaction. The words "Font Book" are often accompanied with "sucks" and "hate". Then came the iPhone, its fantastic display with a high pixel-density enabled legible type at small sizes. But Apple essentially erased that potential by choosing Helvetica as the iPhone's system font. Sure, Helvetica is a graphic designer's favorite, but its closed forms and tight spacing hinder reading, especially when small. It was a classic style-over-substance decision. The even more egregious spit in the typeface of readability was forcing Marker Felt users of the Notes app. More often than not, Apple's recent decisions about type either ignore its importance or value form over function. The iPad represents a new opportunity to reverse this trend. A device designed for media consumption could validate Apple's dedication to design by emphasizing design's most basic element: typography. But so far, it flops. [And he goes on with details about the iPad's flaws in the typography department.] [Google] [More] ⦿ | |
Stuart Robinson
| |
A nice discussion in 2002 by Wolfgang Schimmel (from Vienna) on fonts and modern versions of HTML. [Google] [More] ⦿ | |
SVG, or Scalable Vector Graphics, allows for simple definitions of curves in editable text files. They can be used to define scalable fonts (without kerning and hinting or any other bells and whistles though). It is a a modularized language for describing two-dimensional vector and mixed vector/raster graphics in XML. [Google] [More] ⦿ | |
HTML abbreviations for all accented letters. [Google] [More] ⦿ | |
Taviso
| |
A comparison between the main web page fonts based on percent installed. For monospaced fonts, Tejat reports these percentages: on Windows machines, 96% for Lucida Console. On Macs, Andale Mono wins with 85%. On Linux, Bitstream Vera Sans Mono grabs 80%. For sans typefaces, these the three winners are, respectively, Lucida Sans Unicode (93%), Lucida Grande (88%) and Bitstream Vera Sans (79%). [Google] [More] ⦿ | |
A small web page by yours truly for testing what a given font name in the "font-family" field of a web page produces. The results depend upon one's operating system and browser! [Google] [More] ⦿ | |
WebPrimitives' commercial TEX to html converter that does not use gifs. Does most flavors of TEX. [Google] [More] ⦿ | |
The anatomy of web fonts
| Recommendations by Andy Hume on screen fonts. He discusses x-height (should be large), color (use white on dark becausec screens are additive color systems, mch brighter and more tiring than subtractive color systems, used, e.g., in print), width and letter spacing (be generous), punch width (or space within letters: should be generous), contrast (should be low: simple strokes with consistent thickness and weight). [Google] [More] ⦿ |
The Grid System
| Great discussions of and links to the grid system, the basis of good typography. From the web site: Made popular by the International Typographic Style movement and pioneered by legends like Josef Müller-Brockmann and Wim Crouwel, the grid is the foundation of any solid design. The Grid System is an ever-growing resource where graphic designers can learn about grid systems, the golden ratio and baseline grids. Created by Antonio Carusone, graphic designer and author of the design and typography blog AisleOne. Special thanks to Duane King for his help and wisdom. [Google] [More] ⦿ |
Really an HTML construction page, but some links to free fonts are provided here. [Google] [More] ⦿ | |
Mathematical typesetting forum and links at Drexel University. Subpage on math typesetting for the internet. [Google] [More] ⦿ | |
Alan Zeldman on spaces and quotes in web pages. [Google] [More] ⦿ | |
Tom Trenka
| |
A great article by Toni Kukurin from 2010 entitled An Analysis of Typography on the Web explains the basic rules and tricks for designing solid and readable web pages. [Google] [More] ⦿ | |
TrueFont Family (or: TFF)
| Remon Lammers from The Netherlands has a great little tool (in CSS and HTML) that permits one to use one's own fonts or fonts available on the internet on web pages. Dynamic text replacement based on images---no Flash or plugins. [Google] [More] ⦿ |
ttf2eot
| Small free utility (by "Taviso") to convert truetype fonts to EOT (embedded OpenType). EOT is used by Internet Explorer to support css @font-face declarations. The developer is Taviso. A front end to this software was written by Casey Kirsle in 2009. See also here on Github or here or here or here or here or here or here. [Google] [More] ⦿ |
Free software. I quote: This plugin lets you use images to replace the titles of your posts, thus circumventing the problem of guessing what fonts your end-users might have installed. This is primarily a reworking of the Image Headlines plugin by Brian "ColdForged" Dupuis, so that it would work in WordPress 2.3. Of course, that was a reworking of another plugin by Joel Bennett. Anyway, this plugin lets you replace text on your site (titles specifically, but you can actually replace just about anything) with atttractively rendered TrueType font images. [Google] [More] ⦿ | |
At Reservocation, an interesting discussion about aliasing and anti-aliasing type on the web, with contributions by Todd Dominey, Jeffrey Zeldman, Gabe Kean, Jim Coudal, and Craig Kroeger. [Google] [More] ⦿ | |
Intro to typefaces at Adobe. Tips for type on web pages. [Google] [More] ⦿ | |
Type-a-file
| Russ Maschmeyer's absolutely great HTML / CSS code for typesetting web pages. [Google] [More] ⦿ |
Typechart
| On-line type testing and type previewing tool. The CSS code is generated on the fly and ready for use. Compare Windows Cleartype rendering with Apple font rendering. By Penduka Senaka. [Google] [More] ⦿ |
Javascript-selectable typefaces, based on David Chester's Typeface.js. [Google] [More] ⦿ | |
HTML pre-processor for web typography (hanging punctuation, soft hyphen insertion, optical margin outdents, small-caps conversion and punctuation substitution). [Google] [More] ⦿ | |
TypeShow
| Software for testing typefaces and showing them on web sites. Developed by Frank Rausch at LucasFonts in Berlin. [Google] [More] ⦿ |
Typesites
| Kyle Meyer's type blog concerned with web typography. Based in Minneapolis, MN. He also runs Astheria. [Google] [More] ⦿ |
Typetester
| On-line screen font tester, written by Marko Dugonjic (Croatia). [Google] [More] ⦿ |
Crystal Waters' guide to creating accessible Web sites. [Google] [More] ⦿ | |
typografie.dero.name
| Screen typography advice by Jaroslav „Dero“ Polakovic. In Czech. [Google] [More] ⦿ |
A fantastic tutorial on typography for HTML and web pages (in German). It deals with selections of quotes and apostrophes in many languages, the minus sign, the hyphen and dash, spaceds, the colon, the dieresis, numbers, and scientific and financial units. [Google] [More] ⦿ | |
A gentle German introduction to web typography. Not many details though. [Google] [More] ⦿ | |
Typogrify
| Tools and filters to improve web typography, such as nice curly quotes, improved spacing between caps, beautified ampersands, and so forth. The original Typogrify is Python code by Christian Metts. Typogrify.module uses Hamish Macpherson's PHP port of that code, php-typogrify. Another URL. Jeff Croft's page on Typogrify. [Google] [More] ⦿ |
A discussion on the use of icons in text in html pages, making use of Unicode-compliant fonts. Some browser comparosons are included. [Google] [More] ⦿ | |
Alan Flavell's Unicode test pages. A great resource for font developers. Flavell works at Glasgow University. Unicode tables, fully listed. [Google] [More] ⦿ | |
Designed by Andrew Hume in 2004, this site is dedicated to web typogaphy. [Google] [More] ⦿ | |
For drop caps and fancy titles, some CSS tricks of the trade. [Google] [More] ⦿ | |
A brief discussion of font embedding in HTML pages. [Google] [More] ⦿ | |
Val Casey, of Frog Design, provides "Notes on Web Design". This piece has some enormous blunders (italics and obliques are mixed up; kerning and tracking are ill-defined), so read it with care. [Google] [More] ⦿ | |
Vendor of a Font Card and a Font Chart, as well as a four-page laminated HTML reference card and color reference cards. [Google] [More] ⦿ | |
W3C: discussion of style sheets for the web. [Google] [More] ⦿ | |
A visual on-line comparison, side-by-side, of your system fonts. [Google] [More] ⦿ | |
A discussion of font selection in HTML pages. [Google] [More] ⦿ | |
Great pages explaining the dos and don'ts of typography on web pages. [Google] [MyFonts] [More] ⦿ | |
Excellent tutorial for web font linking. Browsers currently supporting this are Safari, Firefox, and Opera. In the style sheets of an HTML page, one needs code like this: @font-face { font-family: "Pur"; src: local('Pur'), url(http://fontlibrary.org/member/benweiner/Pur.otf) format("opentype"); font-weight: 400; font-style: italic; font-variant: normal; font-stretch: normal; }[Google] [More] ⦿ | |
Michael Jansson explains away some web font myths. [Google] [More] ⦿ | |
Free cod to subset truetype fonts before inclusion on web pages via Web Fonts. [Google] [More] ⦿ | |
Web Font Optimizer
| Free font subsetting code for web pages. By Philip Taylor, 2009. [Google] [More] ⦿ |
Web font stacks
| George Butler provides several useful font stacks for beginning web page designers. Examples include
|
Article by Forrest L. Norvell on the poor state of web typography. He tells us how he constructs his style sheets (css files), and how he had to struggle with various font names and font choices. [Google] [More] ⦿ | |
Web typography sucks
| Richard Rutter (Clearleft) and Mark Boulton on web typography. Very useful presentation. [Google] [More] ⦿ |
Bitstream's 200USD product (free demo) for making .pfr fonts for use with trueDoc (dynamic fonts in Netscape). Comes with 200 truetype fonts. PC and Mac. [Google] [More] ⦿ | |
Warren Steel has a great discussion and links on fonts in web pages. [Google] [More] ⦿ | |
Dave Hyatt talks about the WebKit feature of Safari, introduced in 2007: WebKit now supports CSS @font-face rules. With font typeface rules you can specify downloadable custom fonts on your Web pages or alias one font to another. This article on A List Apart describes the feature in detail. All of the examples linked to in that article work in WebKit now. Stephen Coles reacts: For the uninitiated, this means any TrueType font can be called by a style sheet and then downloaded by the web browser. This reopens the legal can of worms that falls off the shelf every time we talk about font embedding. Good fonts cost money. Like most software, each user or CPU must be licensed to use a commercial font. When you start talking about every visitor of a web page downloading the font well you enter very sticky territory indeed. John Gruber: The fonts youre allowed to embed legally aren't worth using; the fonts that are worth using aren't embeddable. [Google] [More] ⦿ | |
Great tutorials on all of HTML, including fonts. [Google] [More] ⦿ | |
Microsoft's free WEFT (Web Embedding Fonts Tool). The only tool out there that lets you convert fonts to Embedded OpenType format. PC only! "WEFT lets Web authors create 'font objects' that are linked to their Web pages so that when an Internet Explorer user views the pages they'll see them displayed in the font style contained within the linked font object. " Alternate URL. [Google] [More] ⦿ | |
Author of "Great Web Typography" (Wiley, 2003). [Google] [More] ⦿ | |
Whatfont Bookmarklet
| A small free tool, to be placed in the bookmark bar of a web browser. It permits one to see what font is being used in text that is visited by one's mouse. By Chengyin Liu. [Google] [More] ⦿ |
Wordmark
| An on-line tool to showcase the fonts installed on one's computer. Description: [...] Wordmark.it detects fonts installed on your system with a small Flash script written by Marko Dugonjic of Type Tester. It also uses Remy Sharp's font detection script. [...] I'm Fahri Özkaramanli (b. Nicosia, 1980), a freelance visual communication designer living in Istanbul. I received my BA in Visual Communication Design at Istanbul Bilgi University in 2005 where I am a candidate in VCDMFA and currently teaching Web Design and Interactive Web Projects courses as a part time instructor. [Google] [More] ⦿ |
CSS tutorial on how to simulate worn type. [Google] [More] ⦿ | |
Yusuke Sugomori
| |
Nice concise help for the use of fonts in HTML. By Belinda Zarate. [Google] [More] ⦿ |
|
|