Notes on a web journey

posted on: 31 May 2011

Meaningful typography

filed under: @ 12:32:43

A modular scale is a sequence of numbers that relate to one another in a meaningful way. Learn how to apply modular scales to bring resonance to your designs.

More Meaningful Typography

tags:

posted on: 20 April 2010

OpenType

filed under: @ 10:26:04

A through explanation of what is OpenType.

Beginners Guide to OpenType

tags:

posted on: 17 September 2009

Typedia

filed under: @ 09:44:51

In a nutshell, Typedia is a community website to classify typefaces and educate people about them. Think of it like a mix between IMDb and Wikipedia, but just for type. Anyone can join, add, and edit pages for typefaces or for the people behind the type.

Typedia

tags:

posted on: 27 April 2009

Typographica favorite typefaces

filed under: @ 19:29:03

Favorite typefaces of 2008

It's said that when launching a new ship, it's bad luck if the ceremonial bottle of champagne doesn't break. Well, if the ship in question is Typographica's long-awaited redesign, then there is no need to worry, because this list - the site's fifth annual accounting of the best in new typeface design - represents the proverbial bottle being blasted into oblivion, showering all onlookers with a selection of amazing typefaces.

Favorite typefaces of 2008

tags:

posted on: 24 April 2009

Welovetypography

filed under: @ 10:12:34

welovetypography web site

WLT is an image, video and text “bookmarking” site that is wholly dedicated to type-related content. Think of it as a type-centric and visional delicious, if you like.

welovetypography

tags:

posted on: 09 April 2009

Improved typography in web design

filed under: @ 20:12:21

Typographic scale

Many people, designers included, think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there. But there is much more to achieving good typography and it's in the details that designers often neglect.

8 Simple Ways to Improve Typography In Your Designs

tags:

posted on: 25 January 2009

Diacritics and vertical metrics

filed under: @ 10:36:47

On I Love Typography :

tags:

posted on: 13 January 2009

Typography in graphic design

filed under: @ 10:29:04

A book in PDF format by Massimo Vignelli on understanding typography in graphic design (via AisleOne):

The Vignelli Canon (pdf)

tags:

posted on: 08 December 2008

Type treatments

filed under: @ 19:11:22

Question mark

30 inspiring type treatments

tags:

posted on: 30 October 2008

Standardizing font embedding

filed under: @ 20:04:03

The first W3C Recommendation for CSS level 2 (1998) included a feature called “Web Fonts” to deal with the situation where a style sheet referred to a font that wasn't present on the user's machine. One thing it allowed was a link to a remote font file so that it could be downloaded. Only Microsoft decided to implement it.

For and against standardizing font embedding

tags:

posted on: 24 October 2008

New York signs

filed under: @ 19:37:02

This site intends to survey all of the signs in New York City from 14th Street to 42nd Street. Of course, this is not possible, since there would be tens of thousands of signs within this area. The 29 crosstown streets are each 10 to 11 blocks long (1st Ave. to 11th or 12th Aves.). This gives some 300 blocks, each containing, say, 100 signs of one type or another. This would total 30,000. Even if we eliminated the repetitive traffic signs (actually, each one is different, in setting if not otherwise), the remainder would probably be over 20,000 ...

New York sign
I'm Italian so I couldn't resist..I don't know any of the foods written on the sign...maybe Frank is not Italian? Just kidding, I actually like this web site quite a lot.

NEW YORK CITY SIGNS -- 14TH TO 42ND STREET

tags:

posted on: 22 October 2008

Quotation marks and texture

filed under: @ 08:52:03

The final test for running text is legibility, so failing to notice would mean the style was not imposing on the text. The texture was good. When they occur, stylistic interruptions provide me with food for thought. If the punctuation interrupts the meaning, it demands fresh scrutiny. Double quotation marks seemed to interrupt by emphasizing too heavily.

Quotation Marks & Texture

tags:

posted on: 06 October 2008

Type is art

filed under: @ 09:02:03

TYPE IS ART, use parts of characters to create new forms:

Type is art screenshot

Type is Art

tags:

posted on: 01 October 2008

Web typography CSS

filed under: @ 18:49:02

TYPECHART lets you flip through, preview and compare web typography while retrieving the CSS :

TYPECHART

tags:

posted on: 16 September 2008

Handwritten typographers

filed under: @ 10:51:23

Hit pause for a moment and consider how greatly we - people in the digital age - are indebted to typographers. Almost all of our visual communication is delivered using the products of their craft: newspapers, SMSes, instant messages, emails, web pages, signs, posters, billboards; the list of purposes is endless. In these days where looping strokes have been replaced by keyboard clickety-clack, typographers define the style and tone of our missives. Would you like to be elegant, modern, childish or ... disturbed? Then you can choose between Garamond, Montag, Comic Sans, Zebraflesh, and a thousand more. There's great power in a typeface, but what's always interested me more than the typeface is the designer behind it - why did they create the typeface? Where did their inspiration come from? How did they start?

Handwritten typographers

tags:

posted on: 12 September 2008

Letters on the wall

filed under: @ 09:27:45

In Melbourne I developed a way-finding-system for the Eureka Tower Carpark while working for Emery Studio. The distorted letters on the wall can be read perfectly when standing at the right position.

Car park type - up sign

Eureka Tower Carpark

tags:

posted on: 11 September 2008

Typography on dark backgrounds

filed under: @ 19:27:03

On designfeedr :

Stunning illustrated typography on dark backgrounds

tags:

posted on: 04 September 2008

Typography posters

filed under: @ 09:41:03

On SCP :

CO2 climate change

Design Inspiration: typography posters

tags:

posted on: 02 September 2008

Font Foundry

filed under: @ 19:16:44

The library and the blog of Jos Buivenga (LJB) where you can find his (8) free fonts:

tags:

posted on: 24 August 2008

Instead of Helvetica

filed under: @ 12:04:03

On davidthedesigner a series of articles on:

52 fonts you could use instead of helvetica

tags:

posted on: 23 August 2008

Calligraphy

filed under: @ 09:10:08

A beautiful post on BibliOdyssey:

Calligraphy Exhibition

Beautiful calligraphy images. Links to the artists' pages are provided.

tags:

posted on: 22 August 2008

History of Type #5

filed under: @ 10:26:31

One more article on the history of type on I Love Typography :

A Brief History of Type - Part 5
Slab Serif / Egyptian

tags:

posted on: 19 August 2008

Ornament type

filed under: @ 10:06:05

i love typography's Sunday Type post is, as usual, a treasure chest:

Sunday Type: ornament type

tags:

posted on: 28 June 2008

Font stacks

filed under: @ 09:47:28

An interesting article on the use of font-stacks:
Better CSS Font Stacks

And a guide to the most common fonts on Windows, Mac and Unix platforms:
CSS font sampler and survey

tags:

posted on: 03 June 2008

History of type

filed under: @ 10:32:02

Four beautiful articles on type history:

tags:

posted on: 28 April 2008

Cars and type

filed under: @ 10:13:06

Welcome to CarType. A comprehensive study and collection of reviews and typographical applications of emblems, car company logos and car logos with images, comments, links, car company information and general interest.

cartype

tags:

posted on: 28 April 2008

Type and design on the web

filed under: @ 10:06:33

There are some basic approaches, guidelines and goals to consider when working with type on the Web. Overall, the medium of Web typography involves readability, accessibility, usability, and brandability. On the Web, these aspects function together to accomplish design's goals of communication and user interaction.

5 Principles And Ideas Of Setting Type On The Web

Design is broken up into a number of basic principles that apply to all design from type creation to painting to page layout, both on the web and in print. However, especially on the web, these rules tend to be forgotten and we just go with what feels “right”. This isn't because designers are feeling too loose to abandon these rules, but rather, most people working on the web don't even know they exist - if they do, they don't understand how to use them.

The Elements of Design Applied to the Web

tags:

posted on: 20 April 2008

The ampersand

filed under: @ 11:37:08

Via Veerle's blog:

The term ampersand, as Geoffrey Glaister writes in his “Glossary of the Book”, is a corruption of and (&) per se and, which literally means “(the character) & by itself (is the word) and”. The symbol & is derived from the ligature of ET or et, which is the Latin word for “and”.

Ampersands in history

The ampersand

tags:

posted on: 16 April 2008

Designing with type characters

filed under: @ 09:44:51

Another post on Authentic Boredom :

Techniques for designing with type characters

A very beautiful way of using characters.

tags:

posted on: 03 April 2008

Typeface design process

filed under: @ 19:07:06

In this article I will attempt to illustrate my design process - from typeface concept to a marketable font. Not many folks are willing to write about this. Perhaps they find it boring, irrelevant or just a little bit personal. I suspect it is a mix of all the above.

Font first sketches

Newzald: From Moleskine to Market

Very interesting article. Thanks Kris.

tags:

posted on: 20 March 2008

Typography explanations

filed under: @ 09:36:04

Via AceJet170:

Numerals (or figures) can take various forms. The figure style you choose ought to be appropriate to the project you are working on. Readability is key. But which style is best for which purpose?

Oldstyle/Lining/Tabular figures explained

Like most punctuation, the paragraph mark (or pilcrow) has an exotic history. It's tempting to recognize the symbol as a “P for paragraph” though the resemblance is incidental: in its original form, the mark was an open C crossed by a vertical line or two, a scribal abbreviation for capitulum, the Latin word for chapter.

Pilcrow & Capitulum

tags:

posted on: 05 February 2008

Easy to read

filed under: @ 09:37:41

On Information Architects Japan:

The 100% Easy-2-Read Standard

Good article, I often end up having to adjust the font size. I would have thought almost anyone knew about sizing text at this point in time but many times readability is still a problem.

tags:

posted on: 23 December 2007

Typographic contrast and vector polishing

filed under: @ 09:55:02

Two articles on WebDesignerWall:

Typographic Contrast and Flow

Vector Polishing Techniques

tags:

posted on: 12 December 2007

Typesetting tables and PNGs on IE6

filed under: @ 19:06:36

Two articles on 24ways:

Typesetting Tables by Mark Boulton

Transparent PNGs in Internet Explorer 6 by Drew McLellan

tags:

posted on: 03 December 2007

Text size in CSS

filed under: @ 08:40:02

An article on A List Apart:

How to Size Text in CSS

tags:

posted on: 09 November 2007

Interface design and typographic design

filed under: @ 10:45:08

Published in 1954, Fitts's Law is an effective method of modeling the relationship of a very specific, yet common situation in interface design. That situation involves a human-powered appendage at rest (whether it's physical like your finger or virtual like a mouse cursor) and a target area that's located somewhere else.

Visualizing Fitts's Law

Good typographic design tells a story. It works at a micro level such as typesetting, and typeface selection etc. But it also works at a macro level. Macro level typography is about layout, rhythm and whitespace. But it's also about content and the story the designer is trying to tell through the type.

Content AND Presentation

tags:

posted on: 17 August 2007

Typographic inspiration and instruction

filed under: @ 08:49:02

Some resources to make it easier to find typographic inspiration and instruction:

40 sources

tags:

posted on: 03 July 2007

Typography and Web Advertising

filed under: @ 09:26:03

Web pages are more akin to print editorial pages than print advertising pages in their complexity and sequentiality. Web ads, however, can be compared to television commercials: web ads are brief, five-second spots, compared to the thirty-second spots that appear, for example, on the network news.

Typography and Web Advertising

tags:

posted on: 23 June 2007

Incremental leading

filed under: @ 18:57:03

By Mark Boulton:

Incremental leading

tags:

posted on: 26 March 2007

Uncommon knowledge 3

filed under: @ 13:32:08

Third post of the Uncommon knowledge series by AceJet170 :
003
and a comment post on it:
uncommon knowlege

tags:

posted on: 09 February 2007

Verse quotations

filed under: @ 09:07:01

On webtypography.net:

Indent or center verse quotations

tags:

posted on: 08 February 2007

Transit Authority Graphics

filed under: @ 09:47:08

Via Ace Jet 170:

NY City Transit Authority Graphics Standards

tags:

posted on: 04 January 2007

Typography and web design

filed under: @ 19:45:01

Three article typography related on iA:

The 100% Easy-2-Read Standard

Web Design is 95% Typography (1)

Web Design is 95% Typography (2)

tags:

posted on: 22 December 2006

Type foundries

filed under: @ 08:57:21

On Ideasonideas:

Five foundries

tags:

posted on: 29 September 2006

Type and standards

filed under: @ 09:05:23

Two articles on Think Vitamin:

Looking at type

Choosing the best fonts for your site is about more than making it look pretty: different typefaces send out different signals.

Why standards still matter

The last couple of years may have seen an increase in the level of interest and action around web standards. But it still isn't filtering down to the mainstream.

tags:

posted on: 13 September 2006

Releasing core fonts

filed under: @ 19:31:02

I believe that the Net should be a place open to all. Those that can afford to buy have no problem but those that don't should still have a chance. Lately Andrei Herasimchuk as asked for some fonts to be freely available. I agree, so I thought I'll make my case and join my voice to theirs (as asked by Andrei):

So, Mr. John Wornock, thanks for all you've done and we'd appreciate if you'd release some of those fonts.

tags:

posted on: 08 August 2006

Kerning, design school and printing

filed under: @ 11:13:22

Three interesting posts on Noisy Decent Graphics:

tags:

posted on: 26 July 2006

Better typography

filed under: @ 11:10:23

Five simple steps to better typography
five good articles by Mark Boulton

Photoshop type tips
a good tip on how to choose fonts

tags:

posted on: 09 July 2006

Lost Things in the Garden of Type

filed under: @ 10:35:23

Via typographic trivia on India,Ink. :

Lost Things in the Garden of Type

tags:

posted on: 06 July 2006

Quotation marks

filed under: @ 11:02:34

Using proper quotation marks:

  • On a Mac, use Option+] and Shift+Option+] for the left (open) and right (closed) single quotes. For Windows, use ALT 0145 and ALT 0146 for the left and right single quotes (hold down the ALT key and type the numbers on the numeric keypad)
  • On a Mac, use Option+[ and Shift+Option+[ for the left and right double quotes. For Windows, use ALT 0147 and ALT 0148 for the left and right double quotation marks (curly quotes)
  • In HTML code the characters as ‘ for and ’ for and “ for and ” for (ampersand, pound sign, number, semi-colon)
  • The Unicode numeric entities of ‘ for and ’ for and “ for and ” for (ampersand, pound sign, number, semi-colon)

When using the ALT keystrokes in Windows, use the numeric keypad not the row of numbers above the alphabet and be sure Num Lock is turned ON.

There are some important differences between Windows and non-Windows display of characters:
on the use of some MS Windows characters in HTML

tags:

posted on: 17 January 2006

CSS typography and background images

filed under: @ 21:31:35

Typography and CSS on Digital Web Magazine

On 24 Ways css background images

tags:

posted on: 29 December 2005

Forms,typefaces and Zs

filed under: @ 20:10:30

tags:

posted on: 16 December 2005

The anatomy of web fonts

filed under: @ 21:05:35

An article on Sitepoint about web fonts:

Anatomy of web fonts.

tags:

posted on: 11 December 2005

Typography on the Web

filed under: @ 11:17:18

The Elements of Typographic Style Applied to the Web. A practical guide to web typography: webtypography.net

tags:

CSS,Javascript and Php studies

Anti spam email
A solution to writing an anti spam email contact link
filed under: Javascript
Background image
A background image randomizer that I used in the second version of this site.
filed under: Javascript/CSS
Javascript menu
A menu that uses Javascript and session cookies.
filed under: Javascript/CSS
MiniSite
Experimenting with CSS and Javascript.A simple but, in my opinion, nice navigation “system”. The MiniSite is a one page site.
filed under: Javascript/CSS
Photo display
Protect copyrighted photos: a simple but effective solution.
filed under: Javascript/CSS
Photo gallery
A photo gallery made for a friend
filed under: Javascript
PHP menu
A PHP menu that can be updated without having to re-publish all the pages is on.
filed under: PHP
Pop-up menu
A very simple pop up menu powered by Javascript. It works also if Javascript is disabled.
filed under: Javascript/CSS
RSS feed
How to write and use an RSS feed
filed under: rss-xml
Tag replacer
The Tag replacer explained and a link to it.
filed under: PHP
Tags search
A search form build and powered using Javascript and the DOM
filed under: Javascript