An effective, well-organized workflow is an important asset of professional web designers. The more useful and time-saving your tools are, the more time you can focus on important things, thus creating a foundation for timely good-quality results. The problem is that there are just way too many tools, services and resources out there, so it has become difficult to keep track on them and find those tiny little time-savers that will spare you headaches and save time in a long run.And this is where we come in. Back in old days, Smashing Magazine used to publish lists after lists, with plethora of links that covered different topics all somehow related to web design and development. We have undergone quite a development since then, and are now publishing almost only in-depth articles — written by some of the best professionals in the industry. However, useful, carefully prepared and filtered lists are still useful, and therefore we keep publishing them as well.Below you’ll find 50 useful tools and time-savers for web designers developers. Among other things, you will find recently released tools, useful reference sheets, articles and further resources. Such posts are prepared over months, each containing resources found, reviewed or bookmarked by the Smashing Editorial Team. We hope that at least some of them will help you improve your workflow!You may be interested in the following related posts:50 Powerful Time-Savers For Web Designers50 New Useful CSS Techniques, Tools and Tutorials45 Incredibly Useful Web Design Checklists and Questionnaires[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]TypographyMeet Your Type: A Field Guide to Typography (free PDF)This eBook will help you better understand the foundation of typography and overcome common obstacles and problems when choosing type.Web Font Specimen This template lets you check the typography by analyzing the HTML-specimen in your browser. The specimen contains whole paragraphs in various line heights and font sizes, different headings, ordered and unordered lists, as well as italic and bold text. You can analyze the body size comparison that reveals aspects of the typeface that can’t otherwise be seen and study single glyphs, measure, grayscale as well as light on dark and dark on light previews. You may want to check out Good Web Fonts for the actual specimens of various legible screen fonts.Font Anatomy WallpaperThis wallpaper (1920×1200) covers the terminology of typography, showcasing individual parts of the characters of the alphabet.Web FontFont User Guide (PDF)This Web FontFont User Guide contains information about typography aimed at different groups of people: web developers, system administrators and website visitors. You may want to consider giving it to your clients or colleagues.AltFontPrev This is a simple JavaScript bookmarklet that lets you view the font stack of any website and then deactivate each font with a single click. It makes it easy not only to make sure everything looks okay when certain fonts aren’t installed on a user’s system, but also to view the fonts included in the website’s font stack in a single click, rather than opening the source code. You can even specify a custom font, which makes it handy when you’re considering changing a design’s current font.Typografix This tool is an HTML re-processing script for creating beautiful typography. It corrects things like ellipses and smart quotes and adds tags for <script>, <pre> and <code> automatically. The en dash, for example, is created automatically when a hyphen is surrounded by spaces, and the em dash is created when two dashes appear in a row. Typografix is written in C#, requires Windows Installer 3.1 and .NET Framework 3.5 SP1.Unicode Codepoint Chart This chart is broken down neatly by type of character and symbol (and by language in many cases), with a visual reference under each category. From there, just click on the symbol or character you want and you’re brought to a page with detailed information about the character, along with a browser test page, an outline (in SVG format) and a variety of encodings and character sets (HTML entity, UTF-8, UTF-16, UTF-32, ISO-8859-8, etc.).BookmarkletsQuix We have covered Quix several once already, but when one talks about bookmarklets, it is just necessary to mention Quix as well. Wouldn’t it be nice to have a powerful command line in your browser, some kind of shell that lets you use handy commands and shortcuts for a quicker and more productive workflow? That’s exactly what Quix offers. The tool is a clever extensible bookmarklet that lets you both access your bookmarks and perform various operations on other websites.WP-Toolbar bookmarklet This tool will save a lot of clicks as you edit or update posts on your WordPress-powered blog. The bookmarklet gives you quick access to the entire administrative back-end directly in your browser’s window. There is also a GreaseMonkey script that automatically loads the toolbar when you visit a particular website.Print Friendly BookmarkletThis bookmarklet strips advertising, navigation and all things that you don’t want to have when you decide to print our a page. It formats the content of an article or a document for great readbility and generate a minimal and clean PDF for printing.Bookmarklet Combiner This tool creates a master bookmarklet which can either run all bookmarks at once or display a menu at some area of the page. Nice service for users who wants to avoid using a special folder only to hold all bookmarklets.The Printliminator The Printliminator is a bookmarklet with some simple tools you can use to makes websites print better. One click to activate, and then click to remove elements from the page, remove graphics, and apply better print styling.Bespin BookmarkletUsing the Bespin Bookmarklet, you can replace any textarea you encounter with a Bespin editor, making editing the text much more pleasant.CSS, HTML and JavaScript ToolseCSStender Extensions built with eCSStender simplify the design process because you can author modern CSS using advanced selectors, properties such as border-radius, or custom font faces and rest assured that your design will work — even in IE6.CoffeeScript This is a little programming language that compiles JavaScript while simplifying the code that developers actually have to deal with. It works with current JavaScript libraries and compiles clean code, leaving even comments intact. Once developers familiarize themselves with how CoffeeScript works, they could potentially save themselves a lot of time and headaches with the simplified code.#grid #grid is a little tool that inserts a grid onto the Web page. You can hold the grid in place and toggle it between the foreground and background. To display the grid, just press a hot key on your keyboard, and you can set your own short keys to switch views.Primer CSS This tiny generator works online and has only one function: it extracts from an HTML page (copying and pasting will do) a framework of classes and IDs that can be used as the foundation of an external style sheet. This can be wonderful if you work by first doing the structure in HTML, and then the forms and colors in the style sheet.CSS Usage CSS Coverage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site. Each time you run a scan, the CSS files that are included in the current page are shown with the number of times the rules has been found applied on your page before it.JS.Class: Ruby-style JavaScript JS.Class is a set of tools designed to make it easy to build robust object-oriented programs in JavaScript. It’s based on Ruby, and gives you access to Ruby’s object, module and class systems, some of its reflection and metaprogramming facilities, and a few of the packages from its standard library. It also provides a package manager to help load your applications efficiently.JS Bin JS Bin is an application specifically designed to help JavaScript- and CSS-developers to test snippets of code, within some context, and debug the code collaboratively. JS Bin allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code, new tabs doesn’t). Once you’re happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required.jQuery 1.4.2 Visual Cheat Sheet jQuery Visual Cheat Sheet is a updated version of the useful jQuery Cheat Sheet. It includes all the reference you will need for jQuery 1.4.2 API.Turbine Turbine is a collection of PHP-powered tools that decrease CSS development time and help you avoid headaches. Among other things, it has a simple syntax, automatic packing and gzipping of multiple style files, OOP-like inheritance and templating features as well as a shell for experiments and debugging.Jo: JavaScript Application Framework for HTML5 Jo embraces JavaScript’s object model and leverages CSS3 to handle as much of the presentation and animation as possible. It also provides a consistent and modular event model between objects and plays nicely with other libraries like PhoneGap.Sencha: HTML5 Mobile App Framework Sencha Touch allows you to develop web apps that look and feel native on Apple iOS and Google Android touch screen devices.Aloha Editor, The HTML5 EditorAloha Editor is an advanced browser-based editor that is faster than other editors and provides you with better and richer formatting in real-time in your browser.JavaScript Regex Syntax HighlighterDo you want RegexPal-style regex syntax highlighting on your webpages? This library takes care of it for you, so you can spend more time writing regular expressions and less time deciphering them. Currently, JavaScript regexes only are supported.OpenStack Open Source Cloud Computing SoftwareThe goal of OpenStack is to allow any organization to create and offer cloud computing capabilities using open source software running on standard hardware. OpenStack Compute is software for automatically creating and managing large groups of virtual private servers.sweet-templateSweet (Simple WEb front-End Template) is a lightweight JavaScript template with high performance. It’s small, fast, easy to use, and, most important, extensible. It also can be integrated with jQuery.jQuery DeconstructedThe Deconstructed series is designed to visually and interactively deconstruct the internal code of JavaScript libraries, including jQuery, Prototype and MooTools. It breaks the physical JavaScript into visual blocks that you can easiliy navigate. Each block opens to reveal its internal code. Clickable hyperlinks allow you to follow program flow.Alloy UI Alloy is a UI metaframework that provides a consistent and simple API for building web applications across all three levels of the browser: structure, style and behavior.Google JavaScript Style GuideThis document provides a set of conventions (sometimes arbitrary) that hold the style guidelines used for Google code. It covers general good practices for open-source projects and well-written and well-documented code. It covers a lot of ground, from “use camelCase for variable names” to “never use global variables” to “never use exceptions.”gleeBox Gleebox provides a way to navigate web pages via keyboard. For instance, it allows you to hit the ‘G’-key and every link on the page will be highlighted. This application is available as an extension for Firefox and Google Chrome.shellinabox Shell In A Box implements a web server that can export arbitrary command line tools to a web based terminal emulator. This emulator is accessible to every browser that supports JavaScript and CSS and does not require any additional browser plugins.Juicer: a CSS and JavaScript packaging tool Juicer is a new command line tool that helps by resolving dependencies, merging and compressing files. It can check the syntax, add cache busters to and cycle asset hosts on URLs in CSS files.Jake: A Build Tool for JavaScript Jake is a new build tool built entirely in JavaScript that runs on top of the CommonJS. As its name suggests, it is based on the existing and already popular Rake tool and benefits from the same simplicity.Closure Compiler The Closure Compiler is a tool for making JavaScript download and run faster. It is a true compiler for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.Useful Online Tools and ServicesComparePSD (Win only) This tool lets you compare two Photoshop files side by side and see every little difference. Look for differences by layer or by effect. You get a scaled view of the files, so you can see them next to each other and pick out differences more quickly. ComparePSD is available for Windows only and is free to download and use.Secure Passwords GeneratorThe tool lets you enter parameters, including the length of the password, whether to include uppercase and/or lowercase letters or numbers or punctuation and whether to eliminate characters that resemble each other (such as i and l, 1 and I, and o and 0). Then, just select the number of passwords to generate, and it returns a list. It even includes phonetics for each password to make it easier to read out loud (in case you’re giving a password to someone over the phone, for example).SwatchSpot: Random Color Swatch GeneratorThis tool creates random color swatches to inspire you. Lock in the colors you like and shuffle away the ones you don’t. Once you’re done, grab the color codes or download your palette.Yuuguu: Instant screen sharing and web conferencing This tool provides instant web-conferencing, online meetings and collaboration and enables you to work with your cusomers, partners and colleagues right away, without a single download. The free version allows for 100 minutes per month of web conferencing.Web Form Recovery Firefox Plugin Lazarus securely auto-saves all forms as you type, so after a crash or server timeout you can go back to the form, right click, “recover form”, and breathe a sigh of relief.Which loads faster?This tool lets you see two websites load side by side in real time. Then it shows how long each took to load and the percentage difference.FaaryFaary is an online form builder that operates with the help of text lines, and the form is generated as such. The tool creates an HTML form with CSS, which can be downloaded as a ZIP archive.Scr.imScr.im lets you use a shortened URL to give out your email address safely and securely on forums. Just enter your email address on Scr.im and it will give you a link to a page with your email address, with security to prevent bots from viewing it.Name ChecklistThis tool will help you find out if your brand name, username, domain and vanity url are still available online or they are already taken.Quora – Web DesignQuora is a continually improving collection of questions and answers created, edited, and organized by everyone who uses it. You can follow web design, usability and related discussions and ask your questions as well.Ex-blockerThe Ex-blocker is a plugin that hides any information about your ex online. The tool is available as a Firefox and Chrome extension. Todo.txt Command Line InterfaceIf you’ve got a file called todo.txt on your computer right now, this script is for you. You probably don’t want to launch a full-blown text editor every time you need to add an item to your to-do list, or mark one that’s already there as complete. With this simple shell script, you can interact with todo.txt at the command line for quick and easy, Unix-y access.Note and PointThis gallery highlights beautiful Keynote, PDF and PowerPoint-slides on the Web (mostly Web design-related) which is great for inspiration if you are thinking about creating beautiful and attractive slides for your next presentation.ManyBooksThis site offers a huge collection of public domain e-books, as well as other newer books that have been released in the public domain or under Creative Commons licenses, in a variety of formats.TweetmentThis service allows you to design sexy web pages for your tweets.Browser Cover GeneratorThis simple tool generates a browser preview of an uploaded image and can add address bar URL, window title, shadow, status bar and various browser skins to the image.Linkification Firefox Plugin Linkification Converts text links into genuine, clickable links. To view and set options, you can use the Linkification right-click context menu.Useful References and GuidesDesign Is HistoryThis resource showcases the evolution of design through time. It was created as a teaching tool for young designers just beginning to explore graphic design and as a reference tool for all designers. As a designer it is important to understand where design came from, how it developed, and who shaped its evolution. The more exposure you have to past, current and future design trends, styles and designers, the larger your problem-solving toolkit. The larger your toolkit, the more effective of a designer you can be.User Interface Style Guides This page features some useful links to style guides used by large websites, corporations and news agencies (e.g. the BBC Style Guide), including editorial guidelines, quality guidelines and online standards.Trademarkia Trademarkia is a free search engine for U.S. federally registered trademarks on the Internet. They provide up to the minute contextual information about the current use of interesting business names, slogans, and logos through pictures, commercials, and conversations from Flickr, Google, Youtube, and Twitter for each U.S. trademark filed with the United States Patent and Trademark Office (USPTO) since the year 1870.Icon Reference ChartThis chart, created by Jon Hicks, was created to collect the sizes, formats and the related information about icons used on different devices. At the moment it covers browsers, Android, iPad, iPhone, iPhone 4, Linux, Mac OS X and Windows. And you can also download a template for iPhone and iPad icons. Useful.OpenWith.orgOpenWith is a directory of existing file extensions and free tools to open them. You’ll find a free program for just about everything you would ever need to open, including source code, data files, disc images, spreadsheets and video files.ScriptSrc.netThis site puts all the latest versions of script tags from the various JavaScript libraries in one place. Whether you use jQuery, swfobject, Chrome Frame, MooTools, Ext JS, YUI, Prototype, Dojo or Scriptaculous, you’ll find the most recent script tags here.Colours In Cultures Chart This map shows how colours are perceived in different cultures and nations across the globe.Guidelines and standards manuals Handy examples of guidelines and standards manuals used by companies and brands online. Also check Branding & Corporate Identity Design page.Code Standards and Front-End Development Best Practices This document outlines de-facto code standards in professional modern front-end development. The primary motivation of the document is code consistency and best practices. By maintaining consistency in coding styles and conventions, we can ease the burden of legacy code maintenance, and mitigate risk of breakage in the future. Nice and useful overview.Essential Tools You Always have Handy When Fixing a PC Problem? This forum thread features must-have tools that you should keep loaded on your thumb drive when asked to deal with a family member of friend’s personal computer issue.Project Management For DummiesBecause of the ever-growing array of huge, complex, and technically challenging projects in today’s world, project management has become a critical skill. This page provides a nice project management cheat sheet that will help you handle your project management assignments, such as confirming a project’s justification, developing project objectives and schedules, and maintaining commitment for a project.Expression Engine Reference ChartA quick and useful reference guide for ExpressionEngine users. A PDF-version is available as well.Computer Hardware Chart A detailed and handy hardware chart for notebook RAM, desktop RAM, CPU sockets, hard drives, ports, processor card slots, processor card sockets, peripheral cards, desktop card slots and power connectors.Corporate Identity / Logo Usage GuidesA collection of documents that illustrate how organizations and companies ensure that their branding remains consistent online and in print.ASCII: The Pronouncation Guide ASCII stands for American Standard Code for Information Interchange. Computers can only understand numbers, so an ASCII code is the numerical representation of a character such as ‘a’ or ‘@’ or an action of some sort. The non-printing ASCII characters are rarely used for their original purpose. This page features an ASCII character table and includes descriptions of the first 32 non-printing characters and the guide to their pronouncation.Name Pronunciation GuideInogolo is a practical, easy-to-use website devoted to the English pronunciation of the names of people, places, and miscellaneous stuff. The site contains a searchable database of names with both phonetic and audio pronunciations in English.Usability and User ExperienceHand picked UX related resourcesUXMARKZ is a collection of hand picked UX related resources, updated daily. You will find interesting sites, articles, videos, images and slideshows from the field of interaction design, usability, information achitecture, user interface design and other. All submissions are moderated.UX MythsThis ressource is supposed to help you build your website based on evidence, not false beliefs. UX Myths collects the most frequent user experience misconceptions and explains why they don’t hold true. And you don’t have to take their word for it, the site shows you a lot of research findings and articles by design and usability gurus.User Interface Design Patterns for Ideas and InspirationA user interface design pattern library. It is a collection of Web design patterns and best practices which helps you to find inspiration and design interfaces with great user experience. It is also a user interface gallery full of real world examples of our patterns.Last ClickHow Do I Win Rock Paper Scissors Every Time?Now, that’s a handy resource: have you ever gotten tired of being crushed by Rock, cut to shreds by Scissors, or smothered by Paper? This graphic has information compiled about Rock, Paper, Scissors (RPS) from the World RPS Society, the masters of Rock, Paper, Scissors, to help you overcome your opponents and understand the strategies needed to win Rock, Paper, Scissors every time.The Universal Packing ListThis tool generates a custom packing list for your journeys. You have to provide some basic information about the journey and a packing list appears immediately.Not Beans AgainAn online tool that finds a recipe from your ingredients. Enter what you have got in your fridge to the “Ingrediometer” and see if the tool can come up with a recipe for you.A Coder’s Guide to CoffeeAs most software and creative professionals know, coffee is an important technology for boosting mental acuity and maintaining peak on-the-job performance. But did you also know that coffee can be a damn tasty beverage? All you need is the appropriate amount of disrespect for the mainstream coffee industry and a desire to enjoy a better beverage.FlipboardFlipboard is a free personalized social magazine for your iPad. It allows you to quickly flip through news, photos and updates your friends are sharing on Facebook and Twitter. The emergence of tools like this is what will make iPad a truly useful and handy device for many people.Related PostsYou may be interested in the following related posts:50 Powerful Time-Savers For Web Designers50 New Useful CSS Techniques, Tools and Tutorials45 Incredibly Useful Web Design Checklists and Questionnaires© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: Coding, Design, tools, typography, usability, Workflow
-
I posted to smashingmagazine.com
50 Useful Tools and Resources For Web Designers
http://feedproxy.google.com/~r/SmashingMagazine/~3/NZyXEoFio7I/
July 26 2010, 5:30am | Comments »
-
I posted to smashingmagazine.com
The Beauty Of Typography: Writing Systems And Calligraphy, Part 2
http://feedproxy.google.com/~r/SmashingMagazine/~3/TxT6p4WQQkQ/
The beauty of writing systems is that each has something unique from which to draw inspiration. Two weeks ago, in the first part of this article, we covered Arabic and East-Asian languages (Chinese, Japanese, Korean and Vietnamese) and a few Indic scripts (Devanagari, Thai and Tibetan).We are now back for the second (and last) part, which is a bit different but just as interesting. You will see that some features of the languages presented here clearly correspond to our Latin-based system, while others are unfamiliar. The point of this second part is to complete our look at writing systems of the world and to think more generally about what they signify. We’ll cover the following:HebrewModern European scripts (Latin, Greek, Cyrillic, Armenian, Georgian)MongolianInuktitutInternational Phonetic Alphabet[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]Writing Systems Of The WorldBefore we get started, let’s take a moment to understand where everything fits in: Click on the image to see it full-size.Figuring out how many languages are spoken in the world is hard, but estimates are at around 7000 languages and dialects, with hundreds of script for writing them down. Fortunately, the major writing systems fall into four broad categories:Alphabetic As you probably know, an alphabet is a segmental writing system in which a standardized set of letters (graphemes) roughly represents phonemes. The word “alphabet” is derived from Alpha and Beta, the first two symbols of the Greek alphabet. Two types of alphabets are important in classifying writing systems:Adbjad, which contains symbols for consonants only, or vowels optionally written with diacritics (e.g. Arabic and Hebrew).Adbugida, whose basic signs denote consonants with inherent vowels. “Following” vowels other than inherent ones are denoted by diacritical marks or another systematic modification of the consonants (e.g. Devanāgarī).Logographies In a logographic system, each character (logogram) represents a single complete grammatical word and is more precise than a morpheme (e.g. Chinese).Syllabaries As the name suggests, in a syllabic system, characters represent or approximate syllables (or more precisely “moras”), which make up words. A symbol typically represents a consonant sound followed by a vowel sound, or a vowel alone (e.g. Japanese).Featural A featural writing system represents finer details than an alphabet. Each symbol represents not a whole phoneme but rather the phonetic features that make up the phoneme, such as voicing or place of articulation (e.g. Korean).Unluckily for us, most writing systems cannot be classified as purely one type. Indeed, many languages include several of these features. In English, for example, the clusters of phonemic letters are a complex match to their sounds.End of parenthesis. I could go on, but then this would not be the article you signed up for. So, we’ll go back to our subject and start exploring the typographic beauty of languages. If you’re interested in this classification of fascinating writing systems, then this Wikipedia article is a great start.HebrewThe Hebrew alphabet is a descendant of the Aramaic alphabet, which is itself a descendant of the Phoenician alphabet. Like Arabic, the Hebrew alphabet is an abjad in its traditional form (i.e. an alphabet consisting only of consonants), written from right to left. It has 22 letters, 5 of which have different forms at the end of a word (called “sofit”). The Hebrew alphabet has only one case, so capitalization is not used, and it is often called the “alefbet” because of its first two letters.DiacriticsAgain like Arabic, modern Hebrew orthography includes several types of diacritics as aids to pronunciation. These are written above, below or inside the letter, in ways that do not alter the spacing of the line. Text containing these markings is referred to as “pointed” text and contains three types of marks:The niqqud (points) are used most. They represent vowels or are used to distinguish between alternative pronunciations of several letters of the alphabet.The geresh (indicating initialisms) and the gershayim (indicating acronyms) are diacritics that affect pronunciation. They are also used to denote Hebrew numerals but are not considered part of the niqqud.The cantillation are accents that show how Biblical passages should be chanted and that sometimes function as punctuation. Letters are in black, points in red and cantillation in blue.Fonts The Hebrew letter ה (heh) in four fonts (from right to left): modern Hebrew block, modern Hebrew handwriting, Torah scroll writing, “Rashi” script.Hebrew can be written in three main scripts:Cursive Hebrew Used almost exclusively when handwriting in modern Hebrew, because it is faster to write than traditional Hebrew.Rashi A semi-cursive script used in books for editorial insertions or biblical commentary. (Named after Rashi, one of the great medieval Jewish scholars and biblical commentators.)Block Used mostly in books. A stylized form of the Aramaic script.GematriaIn Hebrew, each letter is also used to denote numbers. One interesting thing about Hebrew is “Gematria,” the system of assigning numerical value to a word or phrase, in the belief that words or phrases with identical numerical values bear some relation to each other. The best-known example is the Hebrew word “Chai” (meaning “life”), which is composed of two letters that add up to 18. For this reason, 18 is a spiritual number in Judaism, and many Jews give gifts of money in multiples of 18. The word “Chai” is composed of the two letters: Chet (ח) and Yod (י). There are 22 solid figures composed of regular polygons (5 Platonic solids, 4 Kepler-Poinsot solids and 13 Archimedean solids). Because the Hebrew alphabet has 22 letters, we can infer a correspondence between these two seemingly unrelated categories. The art of gematria is knowing which solid to associate with which letter.This system is used to gain insight into related concepts and to find correspondence between words and concepts. According to most practitioners, there are several methods of calculating the numerical value of individual words and phrases. When converted to a number, a word or phrase can then be compared to another word or phrase, from which a similarity can be identified.CalligraphyOver 150 laws govern how the Hebrew alphabet can be written by a Jewish scribe. Needless to say, we won’t list them all here, but a few are below, including the standard for writing the letter “tsadi,” which consists of the letters Yud and Nun. For more information, this website is quite extensive.European AlphabetsIn this part, we’ll cover the five modern European alphabetic scripts: Latin, Greek, Cyrillic, Armenian and Georgian.LatinThe basic modern Latin alphabet (containing 26 letters, possibly also used in combination with diacritics) is the best known of the Latin alphabets. The writing system is not only the most used in Europe but is the most widely used alphabetic writing system in the world today. Consequently, we have many Latin-derived alphabets.Some languages have fewer than 26 letters, such as the Italian alphabet, which has only 21 letters (thanks to the person who pointed this out in a comment). Most Latin-derived alphabets use the basic 26 letters, plus extensions. Diacritics are the most common way to extend the alphabet, but not the only way, as we will now see.1. Adding diacritics One way to extend the basic alphabet is by adding diacritics to existing letters, a practice followed by most Latin-based languages (English pretty much being the exception). The illustration below is from the very interesting article “On Diacritics” from I Love Typography, showing various diacritics in use.2. Joining multiple letters to make ligatures Another way to extend the alphabet is by joining multiple letters to make ligatures. Fusing two or more ordinary letters creates a new glyph or character. Typical ligatures in the Latin script.3. Clustering letters Diagraphs and trigraphs are pairs and triplets of letters to which a special function has been assigned. They are not proper characters and do not correspond to the value you would get by combining two or three characters normally. Rather, they are pairs or triplets of letters with a special function. In Welsh, the digraph “Ll” is fused as “ll” to form a ligature.Digraphs and trigraphs are found in alphabets other than the Latin one, and we can discern various patterns in their form:4. Collating The question arises: how to sort all these modified letters? This is where collating comes in handy. Collation is the assemblage of written information into a standard order. One common type of collation is alphabetization, although collation is not limited to ordering letters of the alphabet.These additional letters can be regarded as distinct new letters and are assigned specific positions in the alphabet (such as the symbols Å, Ä and Ö in Swedish):A · B · C · D · E · F · G · H · I · J · K · L · M · N · O · P · Q · R · S · T · U · V · W · X · Y · Z · Å · Ä · ÖIn other cases, especially with letter-diacritic combinations, extensions are identified by their base letter (as with Ä, Ö, Ü and ß in German).A · B · C · D · E · F · G · H · I · J · K · L · M · N · O · P · Q · R · S · T · U · V · W · X · Y · Z ( + Ä · Ö · Ü · ß)To complicate things further, there are languages in which certain extensions are regarded as new letters and others are not. For example, in Spanish, the character Ñ is considered a distinct letter and is sorted between N and O in the dictionary; but the accented vowels Á, É, Í, Ó, Ú are not distinct from the unaccented vowels A, E, I, O, U, respectively.A · B · C · D · E · F · G · H · I · J · K · L · M · N · Ñ · O · P · Q · R · S · T · U · V · W · X · Y · Z ( + Á · É · Í · Ó · Ú · Ü )Cyrillic AlphabetThe Cyrillic alphabet was developed by the Slavs in Bulgaria in the 9th century. It is based on the system of Greek capital letters, augmented by ligatures and consonants from the older Glagolitic alphabet to account for sounds not found in the Greek. The Greek alphabet. The Russian Cyrillic alphabet.The early Cyrillic alphabet came to dominate over Glagolitic in the 12th century. Since its creation, it has adapted to changes in the spoken language and developed regional variations to suit the features of national languages. Variations of the Cyrillic alphabet are used nowadays for languages throughout Eastern Europe and Asia.It is interesting how different some of these letters can be depending on whether they’re written in regular or italic cursive:Likewise, uppercase, small caps and lowercase can be quite different:ArmenianThe Armenian alphabet has been used for the Armenian language since the 5th century. Until the 19th century, the Armenian language had only one written form: Old Armenian. Since then, phonological changes have split it into two dialects: Eastern and Western Armenian. A typeface created by Khajag that improves on the legibility of current typefaces used in school textbooks.Schools nowadays teach only the Eastern dialect as the written form because it is closer to the historical Old Armenian form, even though the Western dialect is more widely spoken. The following chart shows the alphabet, with its Eastern (EA) and Western (WA) phonetic values:Punctuation in Armenian is quite interesting, because it is completely different than what we are used to: The Erkatagir script is monumental in style. The majuscule letters are large, erect, with gracefully rounded lines that connect (or spring from) the vertical elements of the letters. All letters are written on a base line between two imaginary parallel lines, with ascending and descending elements only slightly extending beyond. Round Erkatagir is characterized by a contrast of thick vertical forms and razor-thin connecting curved strokes. [text from 15levels]The Bolorgir, or minuscule, ancestor of modern Armenian type fonts, dominated scribal hands from the 13th to 16th centuries and continued well through the 19th. It has developed more elegant and graphic forms, and although by definition a round script, the characters are slanted and the letters have sharp corners. The contrast between base shapes and connecting strokes is not as extreme as in Erkatagir; it is a more cursive script (characters are closer to one another), smaller in size and different in shape. [text from 15levels]The Notrgir, or notary script, is a blend of Bolorgir and Sła’gir, dominated by small cursive forms. Back in the 17th and 18th centuries, the secretary—working as a scribe in the royal court or Catholicosate—employed as a matter of necessity time-saving cursive versions of Bolorgir and even smaller Notrgir letters. The structure may have entered Armenian writing traditions in the late Byzantine Greek or Latin periods. [text from 15levels]GeorgianGeorgian (ქართული დამწერლობა) is the writing system of the Georgian language (of course), but also of other languages in the Caucasus, mostly South Caucasian languages. Georgian has always used three distinct alphabets: Asomtavruli, Nuskhuri and Mkhedruli. They have progressed through three forms, all dissimilar, even though they share the same letter names and “collation” (now you know that’s just a fancy way of saying alphabet order). The word meaning “alphabet” (ანბანი [anbani]) is derived from the names of the first two letters of each of the three Georgian alphabets, the modern one containing 33 letters.Georgian is interesting because of its double influence. Like its neighboring language, Armenian, it displays Greek influences in its letter-ordering, while Iranian influences are visible in the cursive shapes of the letters (especially the ancient forms), and the abundance of sibilants are reminiscent of Pahlavi, an ancient Iranian script.MongolianThe Mongolian script has a long history. It was developed as an adaptation of the script of the Uyghurs, who were captured by the Mongols during a war against the Naimans around the 12th century CE. But it didn’t fit the Mongolian language: the spelling was ambiguous because Uyghur letters represented multiple sounds. In addition, the spelling fossilized while the sounds naturally evolved, thus separating the written and spoken language. Language reform during the 16th century CE alleviated the problem, and the resulting script is known as Mongolian:Mongolian is special for its vertical writing. The Uyghur script and its descendants—Mongolian, Oirat Clear, Manchu and Buryat—are the only vertical scripts written from left to right. This happened because the Uyghurs rotated their script (which was derived from Sogdian, a right-to-left script) 90° counter-clockwise to emulate Chinese writing, but without changing the relative orientation of the letters.For more inspiration from the Mongolian script, don’t miss these antiques of Mongolian calligraphy.InuktitutInuktitut (ᐃᓄᒃᑎᑐᑦ, literally meaning “like the Inuit”) is the language of the Inuit people, specifically the Inuit of the Canadian Eastern Arctic. It also refers to the Inuit language as a whole, which itself is more of a dialect continuum than a single language. Roughly four dialects and variants groups are on this continuum, depending on the region where they are spoken. The Canadian census reports that approximately 35,000 Inuktitut speakers are in Canada, including about 200 who reside outside of traditionally Inuit lands.With only 0.01 people per square kilometer of land, Nunavut is one of the least populated regions in the world. And yet it has four official languages: English, French, Inuktitut and Inuinnaqtun. For this reason, the government of Nunavut adopted a clean sans-serif font called Pigiarniq (designed by Tiro Typeworks) that enables its people to use all four languages in a uniform manner. The result is a professional-looking free font family: Preview of the Pigiarniq font: regular, light, italic, bold, heavy.International Phonetic AlphabetLet’s finish this series with the International Phonetic Alphabet (IPA). This system of phonetic notation is based on the Latin alphabet and is designed to represent only distinctive qualities of spoken language: phonemes, intonation and the separation of words and syllables. Phonetic transcriptions of the word “international” in two English dialects.The general principle followed by the International Phonetic Association is to provide one symbol for each distinctive sound, meaning:Individual sounds are not represented by letter combinations, and multiple sounds are not represented by individual letters (the way “x” represents [ks] or [ɡz] in English);Letters do not have context-dependent sound values (as “c” does in English and other European languages);Two sounds are usually not given separate letters if no known language distinguishes between them (a property known as “selectiveness”).Interestingly, all pronunciations in the languages we have looked at can be summarized in the following IPA chart. That’s right: one page! Occasionally, the International Phonetic Association adds, removes or modifies symbols; but as of 2008, the IPA proper has 107 distinct letters, 52 diacritics and 4 prosody marks.Obviously we won’t look at the chart in detail. Below, though, is the IPA chart for vowels, mapped according to the position of the tongue.The IPA is a special type of notation, and yet we can still make out familiar words and names:ResourcesHebrew GematriaFinding numerical relationships between words and phrases.Writing SystemWikipedia’s article about writing systems.Ancient ScriptsA compendium of world-wide writing systems from prehistory to today.Hebrew diacriticsA Wikipedia article about Hebrew diacritics.Hebrew scriptsThis page presents various forms of the Hebrew script.Sacred Hebrew CalligraphyAn article covering various aspects of the Hebrew calligraphy.On DiacriticsArticle from “I Love Typography” exploring diacritics.Chai symbolA Wikipedia article about the Chai symbol.Digraph A Wikipedia article about digraph.ArekAn Armenian typeface.Ruben MalayanThe vision of this project is to create a book that encompasses most fascinating examples of Armenian calligraphy through time.Mongolian Calligraphy in Contemporary ArtHistory and analysis of Mongolian calligraphy.InkwayAntiques of Mongolian Calligraphy.International Phonetic AlphabetA Wikipedia article about the IPA.DisclaimerThis article is partly based on the copyrighted Wikipedia articles (“Writing System“,”Hebrew diacritics“, “Chai symbol“, “International Phonetic Alphabet“); it is used under the Creative Commons Attribution-ShareAlike 3.0 Unported License (CC-BY-SA). You may redistribute it, verbatim or modified, providing that you comply with the terms of the CC-BY-SA.(al)© Jessica Bordeau for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: script, typography, writing system
- Tags:
- design
- typography
- script
- writing system
June 22 2010, 5:39am | Comments »
-
I posted to smashingmagazine.com
The Beauty Of Typography: Writing Systems And Calligraphy Of The World
http://feedproxy.google.com/~r/SmashingMagazine/~3/cQ1ho0YMEA8/
The beauty of typography has no borders. While most of us work with the familiar Latin alphabet, international projects usually require quite extensive knowledge about less familiar writing systems from around the world. The aesthetics and structure of such designs can be strongly related to the shape and legibility of the letterforms, so learning about international writing systems will certainly help you create more attractive and engaging Web designs.Pick any language you like: Arabic, Chinese, Japanese, maybe Nepali? Each is based on a different writing system, which makes it interesting to figure out how they work. Today, we’ll cover five categories of writing systems. This may sound tedious and academic, but it’s not. If you take the time to understand them, you’ll find that they all give us something special. We’ve tried to present at least one special feature of each language from which you can draw inspiration and apply to your own typography work. We’ll cover: East Asian writing systems, Arabic and Indic scripts (Brahmic). If you are interested, we will cover Cyrillic, Hebrew and other writing systems in the next post.[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]East Asian Writing SystemsObviously, the Chinese uses Chinese characters (where they are known as hanzi). But Chinese characters are also used in various forms in Japanese (where they are known as kanji) and Korean hanja). In this section, we will look at four East Asian writing systems: Chinese, Japanese, Korean and Vietnamese.Chinese CharactersChinese characters are symbols that do not comprise an alphabet. This writing system, in which each character generally represents either a complete one-syllable word or a single-syllable part of a word, is called logo-syllabic. This also means that each character has its own pronunciation, and there is no way to guess it. Add to this the fact that being literate in Chinese requires memorizing about 4,000 characters and you’ve got quite a language to learn. Fortunately for us, we don’t need to learn Chinese in order to appreciate the beauty of its writing.Because many commonly used Chinese characters have 10 to 30 strokes, certain stroke orders have been recommended to ensure speed, accuracy and legibility in composition. So, when learning a character, one has to learn the order in which it is written, and the sequence has general rules, such as: top to bottom, left to right, horizontal before vertical, middle before sides, left-falling before right-falling, outside before inside, inside before enclosing strokes.The Eight Principles of YongThe strokes in Chinese characters fall into eight main categories: horizontal (一), vertical (丨), left-falling (丿), right-falling (丶), rising, dot (、), hook (亅) and turning (乛, 乚, 乙, etc.). The “Eight Principles of Yong” outlines how to write these strokes, which are common in Chinese characters and can all be found in the character for “yǒng” (永, which translates as “forever” or “permanence”). It was believed that practicing these principles frequently as a budding calligrapher would ensure beauty in one’s writing.Four Treasures of the Study“Four treasures of the study” is an expression that refers to the brush, ink, paper and ink stone used in Chinese and other East Asian calligraphic traditions. The head of the brush can be made of the hair (or feather) of a variety of animals, including wolf, rabbit, deer, chicken, duck, goat, pig and tiger. The Chinese and Japanese also have a tradition of making a brush from the hair of a newborn, as a once-in-a-lifetime souvenir for the child.Seal and Seal PasteThe artist usually completes their work of calligraphy by adding their seal at the very end, in red ink. The seal serves as a signature and is usually done in an old style.Horizontal and Vertical WritingMany East Asian scripts (such as Chinese, Japanese and Korean) can be written horizontally or vertically, because they consist mainly of disconnected syllabic units, each conforming to an imaginary square frame. Traditionally, Chinese is written in vertical columns from top to bottom; the first column on the right side of the page, and the text starting on the left.In modern times, using a Western layout of horizontal rows running from left to right and being read from top to bottom has become more popular. Signs are particularly challenging for written Chinese, because they can be written either left to right or right to left (the latter being more of a traditional layout, with each “column” being one character high), as well as top to bottom.Different StylesIn Chinese calligraphy, Chinese characters can be written in five major styles. These styles are intrinsic to the history of Chinese script.Seal script is the oldest style and continues to be widely practiced, although most people today cannot read it. It is considered an ancient script, generally not used outside of calligraphy or carved seals, hence the name.In clerical script, characters are generally “flat” in appearance. They are wider than the seal script and the modern standard script, both of which tend to be taller than wider. Some versions of clerical are square, and others are wider. Compared to seal script, forms are strikingly rectilinear; but some curvature and influence from seal script remains.The semi-cursive script approximates normal handwriting, in which strokes and (more rarely) characters are allowed to run into one another. In writing in the semi-cursive script, the brush leaves the paper less often than with the regular script. Characters appear less angular and rounder. The characters are also bolder.The cursive script is a fully cursive script, with drastic simplifications and ligatures, requiring specialized knowledge to be read. Entire characters may be written without lifting the brush from the paper at all, and characters frequently flow into one another. Strokes are modified or eliminated completely to facilitate smooth writing and create a beautiful abstract appearance. Characters are highly rounded and soft in appearance, with a noticeable lack of angular lines.The regular script is one of the last major calligraphic styles to develop from a neatly written early-period semi-cursive form of clerical script. As the name suggests, this script is “regular,” with each stroke written slowly and carefully, the brush being lifted from the paper and all strokes distinct from each other.A rather different writing system is Japanese, which is syllabic, meaning that each symbol represents (or approximates) a syllable, combining to form words. No full-fledged script for written Japanese existed until the development of Man’yōgana (万葉仮名), an ancient writing system that employs Chinese characters to represent the Japanese language. The Japanese appropriated Kanji (derived from their Chinese readings) for their phonetic value rather than semantic value.The modern kana systems, Hiragana and Katakana, are simplifications and systemizations of Man’yōgana. Thus, the modern Japanese writing system uses three main scripts: Kanji, which is used for nouns and stems of adjectives and verbs; Hiragana, which is used for native Japanese words and written in the highly cursive flowing sōsho style; and Katakana, which is used for foreign borrowings and was developed by Buddhist monks as a shorthand. In Japan, cursive script has traditionally been considered suitable for women and was called women’s script (女手 or onnade), while clerical style has been considered suitable for men and was called men’s script (男手 or otokode).The three scripts are often mixed single sentences.As we can see, the modern kana systems are simplifications of Man’yōgana. It is interesting to see how they have been simplified. Development of hiragana from man’yōgana. Katakana, with man’yōgana equivalents. (The segments of man’yōgana adapted into katakana are highlighted.)Korean SquaresKorean is itself a very different writing system. It uses Hangul, a “featural” writing system. The shapes of the letters are not arbitrary but encode phonological features of the phonemes they represent.Hangul has existed since the middle of the 15th century (approximately 1440). But tradition prevailed, and scholars continued to use Classical Chinese as the literary language, and it was not until 1945 that Hangul became popular in Korea.Jamo (자모; 字母), or natsori (낱소리), are the units that make up the Hangul alphabet. “Ja” means letter or character, and “mo” means mother, suggesting that the jamo are the building blocks of the script. When writing out words, signs are grouped by syllables into squares. The layout of signs inside the square depends greatly on the syllable structure as well as which vowels are used.initialmedialinitialmedialinitialmed. 2med. 1initialmedialfinalinitialmedialfinalinitialmed. 2med.finalinitialmedialfinal 1final 2initialmedialfinal 1final 2initialmed. 2med.We won’t get into the detailed rules, but here is an example for inspiration:Vietnamese RotationThe Vietnamese writing system in use today (called Chữ Quốc Ngữ) is adapted from the Latin alphabet, with some digraphs (i.e. pairs of characters used to write individual phonemes) and nine additional diacritics (accent marks) for tones and certain letters. Over the course of several centuries—from 1527, when Portuguese Christian missionaries began using the Latin alphabet to transcribe the Vietnamese language, to the early 20th century, when the French colonial administration made the Latin-based alphabet official—the Chinese character-based writing systems for Vietnamese gradually became limited to a small number of scholars and specialists.However, the Chinese philosophy still exerts a strong influence. The stylized work above is by painter Tran Dat, who introduced a harmony between the shapes of Chinese and Vietnamese characters. If you rotate the first image 90 degrees counter-clockwise, you can make out the Vietnamese words. It is meant to be displayed vertically so that it appears as ancient Chinese text at first.ArabicHere we’ll explore the beauty of Arabic, which has many styles and techniques. The Arabic alphabet was developed from the Nabataean script (which was itself derived from the Aramaic script) and contains a total of 28 letter. These 28 letters come from 18 basics shapes, to which one, two or three dots are added, above or below the letter. Arabic uses a writing system that we haven’t seen yet: an abjad, which is basically an alphabet that doesn’t have any vowels—the reader must supply them.Contextual ShapingThe shape of these letters changes depending on their position in the word (isolated, initial, medial or final). Here, for example, is the letter kaaf:DiacriticsThe Arabic script is an impure abjad, though. Short consonants and long vowels are represented by letters, but short vowels and long consonants are not generally indicated in writing. The script includes numerous diacritics, which serve to point out consonants in modern Arabic. These are nice and worth taking a look at.Alif as a Unit of ProportionGeometric principles and rules of proportion play an essential role in Arabic calligraphy. They govern the first letter of the alphabet, the alif, which is basically a straight vertical stroke.The height of the alif varies from 3 to 12 dots, depending on the calligrapher and style of script.The width of the alif (the dot) is a square impression formed by pressing the tip of the reed pen to paper. Its appearance depends on how the pen was cut and the pressure exerted by the fingers.The imaginary circle, which uses alif as its diameter, is a circle within which all Arabic letters could fit.Different StylesArabic script has many different styles—over 100 in fact. But there are six primary styles, which can generally be distinguished as being either geometric (basically Kufic and its variations) and cursive (Naskh, Ruq’ah, Thuluth, etc.).Kufi (or Kufic) is noted for its proportional measurements, angularity and squareness.Tuluth means “one third,” referring to the proportion of the pen relative to an earlier style called Tumaar. It is notable for its cursive letters and use as an ornamental script.Nasakh, meaning “copy,” is one of the earliest scripts with a comprehensive system of proportion. It is notable for its clarity for reading and writing and was used to copy the Qur’an.Ta’liq means “hanging,” in reference to the shape of the letters. It is a cursive script developed by the Persians in the early part of the 9th century AD. It is also called Farsi (or Persian).Diwani was developed by the Ottomans from the Ta’liq style. This style became a favorite script in the Ottoman chancellery, and its name is derived from the word “Diwan,” which means “royal court.” Diwani is distinguished by the complexity of lines within letters and the close juxtaposition of letters within words.Riq’a is a style that evolved from Nasakh and Thuluth. It is notable for the simplicity and small movements that are required to write in it, thanks to its short horizontal stems, which is why it is the most common script for everyday use. It is considered a step up from the Nasakh script, which children are taught first. In later grades, students are introduced to Riq’a.Teardrop-Shaped CompositionHere is an animation showing the composition of the Al Jazeera logo:Bi-DirectionnalityWhen left-to-right text is mixed with right-to-left in the same paragraph, each text should be written in its own direction, known as “bi-directional text.”Material UsedIn case you want to try, you’ll want to know what material to use. There is a lot of typical tools, such as brush pens, scissors, a knife to cut the pens and an ink pot. But the traditional instrument of the Arabic calligrapher is the qalam, a pen made of dried reed or bamboo. “The traditional way to hold the pen,” wrote Safadi in 1987, “is with middle finger, forefinger and thumb well spaced out along the [pen's] shaft. Only the lightest possible pressure is applied.”As for the ink, you have many options: black and brown (often used because their intensity and consistency can be varied greatly) as well as yellow, red, blue, white, silver and gold. The important thing is that the greater strokes of the composition be very dynamic in their effect.A Few TechniquesThe development of Arabic calligraphy led to several decorative styles that were intended to accommodate special needs or tastes and to please or impress others. Here are a few outstanding techniques and scripts.Gulzar is defined by Safadi (1979) in Islamic calligraphy as the technique of filling the area within the outlines of relatively large letters with various ornamental devices, including floral designs, geometric patterns, hunting scenes, portraits, small script and other motifs. Gulzar is often used in composite calligraphy, where it is also surrounded by decorative units and calligraphic panels.Maraya or muthanna is the technique of mirror writing, where the composition on the left reflects the composition on the right.Tughra is a unique calligraphic device that is used as a royal seal. The nishanghi or tughrakesh is the only scribe trained to write tughra. The emblems became quite ornate and were particularly favored by Ottoman officialdom.In zoomorphic calligraphy, the words are manipulated into the shape of a human figure, bird, animal or object.SiniSini is a Chinese Islamic calligraphic form for the Arabic script. It can refer to any type of Chinese Islamic calligraphy but is commonly used to refer to one with thick tapered effects, much like Chinese calligraphy. It is used extensively in eastern China, one of whose famous Sini calligraphers is Hajji Noor Deen.Perso-Arabic Script: Nasta’liq ScriptThe predominant style in Persian calligraphy has traditionally been the Nasta’liq script. Although it is sometimes used to write Arabic-language text (where it is known as Ta’li, with Farsi used mainly for titles and headings), it has always been more popular in Persian, Turkic, and South Asian spheres. It is extensively practiced as a form of art in Iran, Pakistan and Afghanistan. Nasta’liq means “suspended,” which is a good way to describe the way each letter in a word is suspended from the previous one (i.e. lower, rather than on the same level).The Perso-Arabic script is exclusively cursive. That is, the majority of letters in a word connect to each other. This feature is also included on computers. Unconnected letters are not widely accepted. In Perso-Arabic, as in Arabic, words are written from right to left, while numbers are written from left to right. To represent non-Arabic sounds, new letters were created by adding dots, lines and other shapes to existing letters.Indic Scripts (Brahmic)The Indic or Brahmic scripts are the most extensive family of writing systems that we haven’t looked at yet: abugidas. An abugidas is a segmental writing system which is based on consonants and in which vowel notation is obligatory but secondary. This contrasts with an alphabet proper (in which vowels have a status equal to that of consonants) and with an abjad (in which vowel marking is absent or optional).Indic scripts are used throughout South Asia, Southeast Asia and parts of Central and East Asia (e.g. Hindi, Sanskrit, Konkani, Marathi, Nepali, Sindhi and Sherpa). They are so widespread that they vary a lot, but Devanagari is the most important one.Devanagari Ligatures and MatraHindi and Nepali are both written in the Devanāgarī (देवनागरी) alphabet. Devanagari is a compound word with two roots: deva, meaning “deity,” and nagari, meaning “city.” Together, they imply a script that is both religious and urban or sophisticated.To represent sounds that are foreign to Indic phonology, additional letters have been coined by choosing an existing Devanagari letter that represents a similar sound and adding a dot (called a nukta) beneath it. It is written from left to right, lacks distinct letter cases and is recognizable by a distinctive horizontal line running along the tops of the letters and linking them together.In addition, a few other diacritics are used at the end of words, such as the dots illustrated below and the diagonal line, called virama, drawn under the last letter of a word if it is a consonant. One interesting aspect of Brahmic and in particular of Devanagari here is the horizontal line used for successive consonants that lack a vowel between them. They may physically join together as a “conjunct,” or ligature, a process called samyoga (meaning “yoked together” in Sanskrit). Sometimes, the individual letters can still be discerned, while at other times the conjunction creates new shapes.Here is a close-up of a nice ligature, the ddhrya ligature:A letter in Devanagari has the default vowel of /a/. To indicate the same consonant followed by another vowel, additional strokes are added to the consonant letter. These strokes are called matras, or dependant forms of the vowel.Thai Stacking DiactriticsThe writing system of Thai is based on Pali, Sanskrit and Indian concepts, and many Mon and Khmer words have entered the language.To represent a vowel other than the inherent one, extra strokes or marks are added around the basic letter. Thai has its own system of diacritics derived from Indian numerals, which denote different tones. Interestingly, like many non-Roman scripts, it has stacking diacritics.Tibetan MantrasThe form of Tibetan letters is based on an Indic alphabet of the mid-7th century. The orthography has not altered since the most important orthographic standardization, which took place during the early 9th century. The spoken language continues to change. As a result, in all modern Tibetan dialects, there is a great divergence of reading from the spelling.The Tibetan script has 30 consonants, otherwise known as radicals. Syllables are separated by a tseg ་, and because many Tibetan words are monosyllabic, this mark often functions almost as a space.As in other parts of East Asia, nobles, high lamas and persons of high rank were expected to have strong abilities in calligraphy. But the Tibetan script was done using a reed pen instead of a brush. As for a mantra, it is a sound, syllable, word or group of words that is considered capable of “creating transformation.”The use of mantras is widespread throughout spiritual movements that are based on or off-shoots of practices from earlier Eastern traditions and religions. The mantras used in Tibetan Buddhist practice are in Sanskrit, to preserve the original mantras. Visualizations and other practices are usually done in the Tibetan language. Vajrasattva mantra in Tibetan.SummarySo what should you take away from this article? We have seen that Arabic and Chinese calligraphy have many different scripts variations. From geometric to cursive to regular script, there is no such thing as one calligraphic style for a language.Sometimes there is even no such thing as one script per language. This is why Japanese is interesting: it is written in three different scripts that mix nicely. The construction of the Korean language is also fascinating: characters are grouped into squares that create syllables. Writing systems are ultimately diverse in construction, which makes them so interesting.Many languages also have various components that can be used in our typography. Arabic and Thai, among many others, have a large system of diacritics. Arabic has a decorative aspect. Ligatures are directly related to our Latin alphabet but can be quite elaborated in such scripts as Devanagari.You could do a lot to spice up your own designs. Did you catch the red Chinese seal, which contrasts with the usual black ink. Have you thought of rotating your fonts to give them a whole new look, as Vietnamese calligraphers do? What about the Arabic teardrop-shaped writing? If you missed all of this, you have no choice but to scroll back up and take a closer look.Bonus: How to Integrate These Languages on a Website?Working with foreign languages in international design projects can get a bit tricky. Obviously, studying the specifics of the language that you are supposed to work with will help you better anticipate user’s needs and avoid embarassing problems or misunderstandings. Tilt.its.psu.edu presents general guidelines for integration of various international languages in websites. Below you’ll find references to specific pages that cover details for writing systems presented in this article.JapaneseArabicChineseDevanagariThai TibetanVietnamese(al)© Jessica Bordeau for Smashing Magazine, 2010. | Permalink | 9 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: arabic, art, calligraphy, chinese, hindi, iranien, japanese, nepali, tibetan, typography
May 18 2010, 11:25am | Comments »
-
I posted to smashingmagazine.com
20 Fresh High Quality Free Fonts
http://feedproxy.google.com/~r/SmashingMagazine/~3/6RBdC2Y8EDI/
Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for them and we find them, so you don’t have to.In this selection we’re glad to present you Kilogram, Adelle, Ayita Pro, Hattori Hanzo Typeface, Andron, Tertre, Luxi Sans, Sapir, Otari and a couple of other high-quality free fonts. Please read the license agreements carefully before using the fonts — the license can change from time to time.25 New High Quality Free Fonts15 Beautiful High-Quality Free Fonts40 Excellent Free Fonts For Professional DesignYou can find over 80 more free fonts in our section Fonts.[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]20 Fresh High Quality Free FontsKilogramA very bold, striking and unique font which may perfectly serve for headlines. The font can be downloaded and used free of charge for both non-commercial and commercial work.Luxi SansA very clean and legible sans-serif font that can be used for headings and body copy.Otari Bold Limited (Registration is required)Otari is vibrant and contemporary, but serious and built to last. Its character shines in display type, but doesn’t interfere at text sizes. Otari Bold Limited is available for free download.Museo Slab 500 and 500 Italic (Registration is required, PDF Specimen)Museo Slab is robust slab serif which comes in 12 styles. The font family supports a very wide range in languages and is a complete OpenType typeface. Each weight counts 455 glyphs.Adelle Bold and Adelle Bold Italic (Registration is required, discount code is provided)The OpenType Basic version, full commercial licence, of Adelle Bold and Bold Italic can be downloaded free of charge. Adelle is a slab serif typeface conceived specifically for intensive editorial use, mainly in newspapers and magazines. The typeface can be used for subheadings and headlines.Lobster fontA bold condensed script font with hundreds of subtle ligatures and alternates. The Lobster font contains over 70 ligatures and 37 terminal forms. The font supports full Latin1 Charset.Hattori Hanzo TypefaceThis free font is stylish and clean; it was created for headings and short text and is especially suited to items such as infographics and charts. Designed by Roman Shamin.Sketchetik Light (Registration is required)Sketchetik is a hand-drawn font in four styles: light, regular, bold and black. It is recommended for use as display typeface. Only light weight is available for free download and use. Registration is required to download the files.Ayita Pro SemiBold | Ayita Pro Thin Italic (Registration and checkout are required)Ayita Pro is a cheerful sans serif design by Jim Ford. Ayita’s open shapes render faithfully at small point sizes and on device screens while the compact design allows more characters per line for headlines. The Ayita Pro fonts feature a typographically-rich Latin character set, with OpenType features for advanced design applications.Andron (Private use only!)A rich serif font designed by Andreas Stötzner. It contains accents for Roman, Germanic, Slavi, Hungarian, Baltic and Turkish languages. The font is being designed, and the author could use some feedback. Also notice other open source fonts available on the site.Free Font SapirActually, Sapir was designed as a stop gap, while waiting for better, professionally designed fonts for linguistics. Available in two styles — Regular and Italic. Designed by Eric Schiller.Fat Love (personal use only, currently unavailable, mirror)An experimental bold typeface with playful letters. Created by Jonathan Calugi. Available for personal use only, no commercial use.Tertre Extra Bold and Extra Bold Italic (Registration is required)Tertre is a display/short text typeface with a wide range of applications from signage or posters to menus and pricelists; branding, packaging or publishing. The letters have no overhangs and the stroke thickness of capitals and lower case letters is identical, making hinting or anti-aliasing more uniform at any point size and zoom combination. Two weights, Extra Bold and Extra Bold Italic are available for free download and use.Franchise BoldFranchise is a strong display typeface meant to communicate your message quickly and with power. The characters are drawn to achieve a unifomity without compromising style. Strong, memorable and free. You may want to support the designer by making a small donation.Surface MediumFree humanist sans-serif font that may serve for catchy and attractive corporate headlines in web designs and booklets. Unfortunately, only one style (Medium) is available. Free for personal and commercial use.Clementine Sketch FontTo make this font display correctly — that is, with the beginnings and ends of each word closed — you must begin each word with a capital letter and end each word with the symbol ^. (There are two irregularities: W & V. If a word contains a W, you must end the preceding letter with a ^. If a word contains a V, you must end the preceding letter with a ^ and capitalize the letter following the V.) example: Amazingly^ Fe^w^ Discotheques^ Pro^vIde^ Jukeboxes^.SorayaHalf serif, half sans serif. Capital letters A-Z, available only in Illustrator AI format.Triskweline: A new fixed-width font for programmersThe TrueType TTF version of Triskweline works only at size 10 pt, which should do for your programming editor of choice. However, printing will look funny, as will using the font in word processors like Word or drawing tools like Corel Draw. If your editor supports it, prefer the pixel-font versions of Triskweline (.FON or .PCF).Barrister SansBarrister Sans is a geometric sans-serif designed initially as a corporate Cyrillic typeface which quickly evolved into fully grown typeface, available in Latin, Cyrillic and Greek codepages. It includes a set of 5 weights plus their matching italics, with several Opentype features as ordinals, fractions & tabular lining. Barrister Sans is a modern tech-looking sans serif alternative for all your needs. Available for free download until the 16th of May 2010.ReminderPlease notice that the free fonts listed below are still available for free download and use.FF Nuvo OT Medium (Registration is required) Designed by Siegfried Rückel, it’s a contemporary type design with vertical contrast, and especially the characters a, g and y show the calligraphic touch. Suitable for magazine design from headlines to longer texts as well as for advertising, packaging and corporate design. A free download for a limited time. OpenType.Mayberry Pro SemiBold (Registration is required) AscenderFonts still offers the font Mayberry Pro Semi Bold for free download. This font belongs to the Mayberry Pro family. This family is a humanist sans serif designed by Steve Matteson to provide optimal legibility on screen in applications ranging from User Interfaces to web pages. The registration is required to download the font.Last ClickSo You Need A Typeface (Infographics)A nice infographics that can actually help you select a typeface for your design work. You may want to search for the path to Comic Sans.© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Be the first to comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: Fonts, free, typography
- Tags:
- free
- typography
- Fonts
May 11 2010, 11:08am | Comments »
-
I posted to smashingmagazine.com
50 Helpful Typography Tools And Resources
http://feedproxy.google.com/~r/SmashingMagazine/~3/OBqSzEBgwt4/
- Tags:
- typography
- Fonts
May 6 2010, 10:37am | Comments »
-
I posted to designmeltdown.com
Floral typography
http://feedproxy.google.com/~r/designmeltdown/uecD/~3/sM2k9gZJTPI/
While not web focused, I can’t help but share sets like this. I love typography, and illustrative type is some of the most amazing stuff. This set of samples is all done in a floral style. http://vandelaydesign.com/blog/design/showcase-of-floral-typography/
- Tags:
- typography
February 4 2010, 10:00am | Comments »
-
I posted to smashingmagazine.com
25 New High Quality Free Fonts
http://feedproxy.google.com/~r/SmashingMagazine/~3/ky-bskVcB9k/
Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for them and we find them, so you don’t have to.In this selection we’re glad to present you PT Sans, FF Celeste Sans Offc Black, Secca STD, Cantarell and many other regular and experimental high-quality free fonts. Please read the license agreements carefully before using the fonts — the license can change from time to time.You may also want to take a look at our previous typography-related posts:20 New High Quality Free FontsIn this previous “free fonts” edition we present Madawaska ExtraLight, Apparatus SIL, League Gothic, Contra and many other high-quality free fonts.40+ Excellent Freefonts For Professional DesignThe price of good fonts usually reflects their quality and starts at 50$ per typeface. However, before purchasing a font you will probably use only once in your designs you might want to take a glance at outstanding free alternatives first.50 Useful Design Tools For Beautiful Web TypographyA review of useful typographic tools, techniques and resources for creating effective and expressive designs. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly.[Offtopic: by the way, did you already get your copy of the brand new Smashing Book?]New High Quality Free FontsPT Sans (PDF specimen) The Russian type design company “Paratype” released an extensive free sans-serif family with 8 font weights: Regular, Italic, Bold, Bold Italic, Caption Regular, Caption Bold, Narrow Regular and Narrow Bold (700+ glyphs each). The family can be used for legal documents on screen and in print. The family contains glyphs to various Cyrillic languages as well Latin glyphs, signs, fractions, numerators etc. A very impressive free font. License: free for personal and commercial projects.FF Celeste Sans Offc Black Set (Registration is required)FF Celeste Sans Offc Black Set comes in an easy-to-use format optimized for everyday use in Microsoft Office apps. You can use the style-linked (regular and italic in one menu item) FF Celeste Sans Offc for free. License: free for personal and commercial projects.Secca STD (2 Demo fonts) (Registration is required)Secca is a fine and simple typeface honoring the roots of early German grotesque type designs but mastered for the needs of today. The weights work perfectly for body text. Two weights are available for free downloads: Secca Std Demo Regular and Secca Std Demo Bold. Designed by Andreas Seidel. A registration is required.Fh_Lentil Regular (the designer has removed the font)For more fonts, and other resources, visit Fictionalhead.com’s Fonts New font created for personal use. Additional families being developed (bold, italic, etc.) to be released at a future date. License: free only for personal projects.Mr Jones BookMr Jones was originally conceived as a family for print design consisting of a sans and a headline. The lowercase are wide for legibility at small sizes while the caps are narrower to save space and keep an even balance of negative space when used in body copy. The overall widths of certain characters have been adjusted to almost extremes to keep an even balance of white space around each letter. He works well in body copy, but will need decreased tracking for larger settings. Two weights are available for free download: Mr Jones Book and Mr Jones Book Italic. Designed by Richard Miller.ClutcheeClutchee Font is perfect for t-shirts, also applicable for any type of graphic design, web, print, motion graphics etc. License: free for personal and commercial work.DigiticaA very interesting, original geometric font, designed by Samuel Delabarre and available for free download. License: free for personal and commercial work.CantarellThe typeface is designed as a contemporary Humanist sans serif, and was developed for on-screen reading; in particular, reading web pages on an HTC Dream mobile phone. Each font file currently contains 391 glyphs, and fully support the following writing systems: Basic Latin, Western European, Catalan, Baltic, Turkish, Central European, Dutch and Afrikaans. To date, Pan African Latin has only 33% glyph coverage. Since the design is aimed at display on-screen at small sizes, the printed output (especially of the bold and oblique) may not work well. License: free for personal and commercial work.tribbon ‘Layered’ fontThis layered ‘ribbon’ style font was created by Dominic Le-Hair. It is a working ‘ribbon’ style font that consists of several layers and is available in both TTF and OTF font formats for free download. License: free only for personal work.Exus PilotAn original geometric free font in True Type format. A good choice for poster design. Designed by Mauro Hernández. License: free for private and commercial projects.OrbitronA geometric sans-serif typeface intended for display purposes. It features four weights (light, medium, bold, and black), a stylistic alternative, small caps, and a ton of alternate glyphs. Orbitron was designed so that graphic designers in the future will have some alternative to typefaces like Eurostile or Bank Gothic. License: free for private and commercial projects.Ripe Font FamilyA geometric post-modern slab serif face. The serifs feature simplistic rounded terminals and its stroke is uniform. Ripe was designed to be a practical typeface. Each character is distinct, yet consistent. Its subtle differences are clear enough to be easily read at both high and low resolutions, perfect for print, web and screen media. The family has 4 weights (Regular, Light, Semibold, Bold) containing 577 characters in each weight. License: free for private and commercial projects.Goudy Trajan RegularGoudy Trajan is based on the drawings by American type designer Frederic W. Goudy of his rendition of the capital letters inscribed on the Trajan column. One of the most elegant typefaces in the CastleType library, Goudy Trajan works especially well at large sizes. The Regular weight (shown above) contains many alternate letters and discretionary ligatures for more versatile typography. It also includes the Cyrillic alphabet and over 100 classic fleurons. Click here to view all glyphs. Download specimen. “Goudy Trajan is possibly the finest font I have discovered” (D.S. from Omaha, Nebraska.) The Goudy Trajan family includes: Regular, Medium, and Bold. A single font is available for free download. License: free for private and commercial projects.St Transmission (free for personal use only)This free font is available in two weights: thin and extrabold. It has standard OpenType features such as ligatures, slashed zero, contextual alternates and lining figures. The Extrabold weight is ideal for bold headlines. Designed by Sascha Timplan. License: free only for private projects.Keeparty (Large preview)A very original, colorful typeface created by Eugene Rudyy. License: free for personal and commercial projects.LOT (large preview)LOT is a free font applicable for any type of graphic design – web, print, motion graphics etc. It is a good fit for T-shirts and other items like logos or pictograms. Format: Opentype (.otf) Compatible: PC and Mac. The font contains 78 glyphs. License: free for personal and commercial projects.Recycle it fontLicense: free for personal and commercial projects.Denne’s aliensA hand-written, original, playful font with basic glyphs set. Designed by Denise Bentulan. License: free for personal projects, designer’s permission is required to use the font for commercial purposes.Pac FontAn older, yet quite original and attractive free font. License: free for personal use only.MergeA very simple, yet playful and nice looking free font, designed by Philatype type foundry and released for free download in the OpenType format. License: free for personal and commercial projects.Further useful collections24 high quality free and stunning symbol fontsFonts are the vital need of any designer. But now a days font demands are increasing in regular computer users as well. Depending on the needs and modern trend we are going to list down some really beautiful and unique examples of 24 High Quality Free And Stunning Symbol Fonts. We hope these fonts will be useful for you.Top 10 Programming FontsA round-up of 10 readily-available monospace fonts. Many of these fonts are bundled along with modern operating systems, but most are free for download on the web. A few, notably Consolas, are part of commercial software.40 free unique cartoon and comic fontsHave you ever feel that traditional fonts are a little too boring and plain for your designs and artworks? Ever wanted to use fonts that are funkier, stylish and fun to look at? Cartoon and comic fonts are very popular and most people are only familiar with Comic Sans MS and that’s about it. We have now discovered 40 unique and refreshing cartoon and comic fonts for you to give your artwork and design that extra ummmppphhh. Here are a few for sneak preview and the full list is right after the jump.5 Excellent Calligraphic FontsA small collection of nice calligrapic fonts found over at Dafont.com.Related PostsYou may also want to take a look at our previous typography-related posts:20 New High Quality Free FontsIn this previous “free fonts” edition we present Madawaska ExtraLight, Apparatus SIL, League Gothic, Contra and many other high-quality free fonts.40+ Excellent Freefonts For Professional DesignThe price of good fonts usually reflects their quality and starts at 50$ per typeface. However, before purchasing a font you will probably use only once in your designs you might want to take a glance at outstanding free alternatives first.50 Useful Design Tools For Beautiful Web TypographyA review of useful typographic tools, techniques and resources for creating effective and expressive designs. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly.© Smashing Editorial for Smashing Magazine, 2010. | Permalink | 56 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: Fonts, typography
- Tags:
- design
- typography
- Fonts
January 18 2010, 1:11am | Comments »
-
I posted to smashingmagazine.com
15 Fresh High-Quality Free Fonts
http://feedproxy.google.com/~r/SmashingMagazine/~3/yV21Ra6QEdY/
Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for them and we find them, so you don’t have to. In this selection we’re glad to present you Junction, Nadia Serif, Nilland, CartoGothic Std, Bergamo Std, Comic Serif, Birra Stout, Vegur and a couple of other high-quality free fonts. Please read the license agreements carefully before using the fonts — the license can change from time to time.
- Tags:
- free
- typography
- Fonts
May 11 2009, 7:39am | Comments »
-
I posted to smashingmagazine.com
50 Useful Design Tools For Beautiful Web Typography
http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
Typography is elegant when it is attractive and communicates the designer’s ideas. When chosen wisely and used carefully, it can be very effective in supporting the overall design. Designers are always exploring different techniques with type: some use images or sIFR to produce very beautiful typography, while others prefer CSS alone to get the typography just right. Today, we will look at 50 most useful typographic tools, techniques and resources for creating effective and expressive designs. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly. These tools are great for experimenting with different font types for your website. Below we cover typographic tools, useful typographic references, font browsers, typographic CSS- and JavaScript-techniques, hyphenation techniques, sIFR tools and resources, grids and related tools, free and commercial fonts, a guide to Web typography, examples of great Web typography. Please feel free to suggest further tools and resources in the comments to this post. And if you like this post please feel free to subscribe to our RSS-feed and follow us on Twitter . You may want to take a look at the following related articles:
50 Extremely Useful PHP Tools 50 Extremely Useful CSS Tools
- Typographic Tools Instead of doing your own testing, use the useful and time-saving tools below. They’ll help you play with typography and make choices by giving you a real-time preview of many of the available CSS font properties. HTML IpsumA useful little website created by Chris Coyier. It provides you with the standard Latin text already in HTML tags. Clicking on any of the blocks automatically copies the text to your clipboard!
TypechartTypechart lets you flip through, preview and compare Web typography while retrieving the CSS. You can browse different typographic styles. Each style corresponds to a style ID, which allows you to annotate prototypes and retrieve the CSS while coding. Another useful feature is that you can compare Windows (ClearType) rendering with Apple font rendering.
TTFTitles WordPress PluginThis 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 (via hyperdjango).
FontstructFontStruct is a free font-building tool that lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.
abcTajpu Firefox ExtensionType in accented letters, international characters or symbols into Firefox or Thunderbird, either simply by using a context menu (there being support for many languages), or quickly by keyboard macro (you can even define your own).
PXtoEMThis tool converts pixel-units to em-units using the 16px browser default size (via @briancray and @CasJam on Twitter).
Em CalculatorEm Calculator is a small JavaScript tool that helps you make scalable and accessible CSS design. It converts sizes in pixels to relative em units, which are based on a given text size.
CSSTYPECSSTYPE v2 lets you preview your text as you modify it. You can set the font-family, size, color, letter-spacing, word-spacing, line-height and other properties. The CSS code can be generated easily once you are satisfied with the previews.
CSS-Typoset Matrix and code generatorThis tool (unfortunately, only in German) calculates font-sizes and line-height in em and px and presents them in a matrix. The tool computes both symmetrical and asymmetricam margin. Useful!
wp-typogrify WordPress Pluginwp-typogrify is a collection of Django template filters that help prettify your web typography by preventing ugly quotes and widows and providing CSS hooks to style some special cases. Python-script for Django is available as well.
FontBurnerAfter you find the font that you would like to use, Font Burner gives you a chunk of code that you will insert into the head of your webpage. Provided you don’t have any stylesheet conflicts, the new font will show up on your site immediately.
Convert TrueType Font to sIFR Flash FileUpload your typeface and the tool generates the Flash-file (swf) and sends it to your e-mail. Text 2 PNG ConversionThis service provides you with the ability to convert you headlines and navigations to PNG images automaticlly. It works by adding a JavaScript file and selecting which tags to replace. Useful, for instance if you want to generate an image with an embedding e-mail-address. 7 Free Tools To Identify A FontA list of free online tools to speed up the identification process. 21 Typography Web Applications You Can’t Live Without 2. Useful typographic references Better CSS Font StacksA couple of useful font cascades for your CSS-stylesheet.
FontsMatrixMatrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite (via @lucianosb on Twitter)
Common fonts to all versions of Windows & Mac equivalentsThe list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as “browser safe fonts”.
Default Mac OS X 10.4 fonts list (via Elementiks)
Default Windows fonts list (via Elementiks)
3. Choosing a font Type TesterType Tester is an online application that allows you to test different typefaces. You have three columns of text and can modify the typography any way you please. You then get the CSS that accompanies your selections.
STC fontBROWSERThis tools enables you to preview fonts installed on your system online.
Font PickerThis simple tool shows you all the fonts installed on your computer and helps you choose which one is most suitable for a particular project. Also available as Adobe AIR application. FontTesterFont 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.
CSS Type SetCSS Type Set is a handy tool that lets you preview your CSS text as you modify it, and it generates the code for you immediately (@jmreedy).
Flipping TypicalThis is a nice way to explore the popular typefaces you have on your computer and see which one fits the project you are working on. This is done by creating text that is displayed using various typefaces from your computer.
4. Typographic Techniques 12 Examples Of Paragraph TypographyA showcase of some interesting techniques for designing paragraphs, by Jon Tan. Some of these styles are experiments using pseudo elements and adjacent sibling selectors; browser support is not consistent.
Rendering Complex Type — Who’s got the Love?Learn how to create a complex typographic sample with pure CSS.
10 Examples of Beautiful CSS Typography and How They Did ItA lot of great websites out there have beautiful typography using only CSS. But simply looking at them gives you only half the picture. This post showcases examples of good clean typography using nothing but CSS, and it explains what the designers did to achieve this beautiful type.
typeface.jsWith typeface.js, you can embed custom fonts on your Web pages so that you don’t have to render text as images. What makes it different is that it’s JavaScript only, not JavaScript and Flash like sIFR, or JavaScript and PHP like FLIR. So, instead of creating images or using Flash just to show your website’s text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as though your visitors had the font installed locally. It’s pretty easy to use: load the typeface.js library and some typeface.js fonts, then proceed as normal.
Facelift Image Replacement (FLIR)Facelift Image Replacement (FLIR) is 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 is automatically inserted into your Web page via JavaScript and is visible in all modern browsers. Any element with text can be replaced, from headers (<h1>, <h2>, etc.) to <span> elements and everything in between! FLIR is SEO-friendly and only renders an image if JavaScript is enabled on the user’s browser. If you are using WordPress for your blog, you might find this plug-in useful to easily apply FLIR to your Web pages.
P+C DTRPHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method, allowing you to take a vanilla, standards-based (X)HTML Web page and dynamically create images to replace page headings, using only PHP and CSS. The technique is currenty unavailable for download.
Advanced Typography Techniques Using CSSWhile descriptions and basic uses of CSS typography controls have been beaten to death, many rich typographic capabilities of CSS are still not well documented. This post is a great example of what you can do by combining and tweaking type using CSS. Different techniques are introduced: reflections, drop characters, handwriting, newspaper headlines and more.
Typographic Contrast and FlowTypographic contrast is important because not every piece of content on a page has the same weight: some have greater significance than others. By creating contrast, you direct the reader’s attention to the important messages and also enhance visual appeal. Here are seven basic methods for creating typographic contrast, using size, typeface, color, case, style/decoration, weight and space.
5. Hyphenation OnLine HyphenationThis tool takes care of automatic Automatic hyphenation for texts and sites. The tool uses ­ and inserts hyphens in the right places to make the justified text look readable. The tool is a little bit buggy and not perfect, but is still useful. HyphenatorHyphenator.js brings client-side hyphenation of HTML documents to every browser by inserting soft hyphens using hyphenation patterns and Frank M. Liang’s hyphenation algorithm commonly known from LaTeX and OpenOffice. The goal is to provide hyphenation in all browsers that support JavaScript and the soft hyphen for at least English, German and French. Here is the server-side script that does the hyphenation. 6. sIFR sIFR 2.0: Rich Accessible Typography for the MassessIFR (or Scalable Inman Flash Replacement) is a technology that allows you to replace text elements on the page with Flash equivalents. It uses JavaScript to target certain text page elements and replace them with Flash, which results in the same text but rendered in a new font. This means you are free to use any font you wish in your design, instead of being limited to a very small set of “safe” Web fonts. sIFR is easier to implement than any other image replacement technique. Instead of manually generating each header with an image editor, you’re able to skip the editor completely.
sIFR liteA solution similar to the original sIFR package, but smaller (3.7 Kb) than the original (22 Kb) and including even more nifty features. It auto-detects the color of text elements, is completely object-oriented, doesn’t use CSS selectors and targets elements by tag name and class. sIFRvaultA repository of sIFR fonts, rated, tagged and available for download. Users can submit their SWF-files as well. Please notice that you need to respect all copyright and licensing laws - some of the featured fonts appear to be commercial (via chrisjlee).
jQuery sIFR PluginThe jQuery sIFR Plugin is an addon for jQuery that makes it easy to replace text in a web page with flash text (sIFR). It gives you a function in javascript to replace text in a web page dynamically with sIFR (Scalable Inman Flash Replacement) text, using native jQuery functionality along with the jQuery Flash Plugin.
Multi color sIFR 2.0.1This version of sIFR supports strong, em and span-elements and can color parts of the headline in colors.
jQuery sIFR PluginThe jQuery sIFR Plugin is an add-on for jQuery that makes it easy to replace text on a Web page with Flash text (sIFR). The jQuery sIFR Plugin does all the work of figuring out the text, files, sizes, colors and any other configuration needed to convert text to a beautiful sIFR font, with consistent behavior across all major browsers.
sIFR GeneratorThe big disadvantage of sIFR is that creating sIFR files is a tedious task that also requires Adobe Flash Studio in order to create a .swf file with the font of your choice. At least, that was the big disadvantage until now. sIFR Generator is an online tool that allows you to create sIFR .swf files with a few clicks of your mouse. Simply upload the TTF font of the font you want to convert, preview and download. 7. Grids gridr buildrrrThis tool generates various grids on the fly and allows users to define the width of the grids, gutter as well as boxes for the layout.
The Grid SystemAn aggregator of articles, tools, books and resources related to grid-systems.
Typographic GridIf your website is heavy with text content, you will need to pay attention to the underlying grid. Check out Typography Grid, created recently by Chris Coyier: “I was just screwing around with typography and getting things to line up according to a strict horizontal and vertical grid. It was inspired by the Compose to a Vertical Rhythm article by Richard Rutter a few years ago, except uses unitless line height.” Check out the demo here.
Grid DesignerAnyone looking for a little help to get going with grid design should look at this handy tool. Grid Designer 2 lets you set variables for your layout, such as the number of columns, the width in pixels, gutters and margins. You can also set variables for the typography, so that you can control the size, weight, line height and other variables for your paragraphs and titles. After you set up your desired layout, all you have to do is export the CSS to use in your own design.
Vertical rhythm calculatorThis AIR application allows Web developers who use XHTML and CSS to build their pages to understand and calculate values for vertical rhythm. Enter your starting values in the application, and then you have the option of copying the resulting CSS code onto you clipboard for pasting into your existing style sheet.
8. Free and Commercial Fonts 40+ Excellent Freefonts For Professional DesignAn overview of over 40 excellent free fonts you might use for your professional designs in 2009.
60 Brilliant Typefaces For Corporate DesignOver 60 first-class commercial typefaces for corporate design.
80 Beautiful Typefaces For Professional DesignOver 80 gorgeous typefaces for professional design, based upon suggestions from designers and web-developers all over the world.
FontsquirrelA growing collection of free high-quality fonts. More high-quality free fonts.
Top 10 (Commercial) Fonts Of 2008This article lists this year’s most successful fonts on MyFont – in each genre. Based on sales numbers.
Clean font showcaseAn extensive collection of clean, legible free fonts.
Veerle Pieters’ 10 favourite typefaces
9. A Guide to Web Typography Good typefaces are designed for a purpose. Below, you will find very informative articles and guidelines, created by masters of typography to show us the overall effect that good type has on a project. On Choosing TypeA good article from I Love Typography on choosing the right typeface. The article explains everything from choosing between serif and sans-serif fonts to remembering to honor and read the content. It’s a great post for improving your typography skills.
The 100% Easy-2-Read StandardBest practices for good typography on the Web from Oliver Reichenstein.
Don’t be afraid of Serif FontsDavid Rodriguez discusses the advantages and disadvantages of sans-serif and serif fonts and suggests best practices. Elegant Web TypographyA great presentation by Jeff Croft about Web typography.
10 Common Typography MistakesThe goal of this post is to help designers and clients understand the importance of good typography skills and avoid some common mistakes. The Non-Typographer’s Guide to Practical Typeface SelectionCheck out Cameron Moll’s magic formula for picking the right typeface for your needs.
Make a list of those familiar typefaces that you trust and know will work well in a variety of projects. Supplement that list with a list of unfamiliar typefaces that address specific objectives for the project at hand. Test each typeface in small and large sizes. Test in both caps and lowercase.
The Principles of Beautiful TypographyThis is a great article that is actually extracted from the SitePoint book The Principles of Beautiful Web Design. The article goes into detail on fonts, letter forms, spacing, text size and more. It’s a great and informative read. Five Simple Steps to Better TypographyA series of articles by Mark Boulton that is highly worthwhile to read. 101 Typography Resources for Web DesignersA great list of typography-related resources from our author, Steven Snell. 10. Examples of Great Web Typography Some of the designs shown below demonstrate that sometimes less really is more. Others made it onto the list because they use text very well and demonstrate how the grid can be used to do wonders for the whole design. Jon Tangerine
Viget Inspire
works4sure
24ways
Alex Buga
Wilson Miner
Colour Pixel
Maxvoltar
Mark Dearman
Blogger Bake Off
Fixie Consulting
Drupalcon
Guilherme Neumann
Sursly
17 Stimulating Flickr Groups to Get You Typographically InspiredThis is a list of some of the best typography Flickr groups to feed your creative appetite.
17 Stimulating Flickr Groups to Get You Typographically InspiredIn this collection, you’ll find a variety of websites that showcase creative and functional uses of typography.
(al)
- Tags:
- useful
- typography
- tools
- Fonts
- CSS
January 27 2009, 8:00pm | Comments »
1 2