background preloader

Typography

Facebook Twitter

Designers

FontFace.com - Great FREE Fonts! PC Fonts, Mac Fonts and the Font of the Day! Web FontFonts (FF Release 52) Our popular email newsletters are a benefit of FontShop.com membership.

Web FontFonts (FF Release 52)

We regale our subscribers with new and free fonts, typographic tips and trends, and important FontShop developments. Get FontShop News: April FontFont Release 66 Yanone’s FF Antithesis, and an extension to FF Good. Plus, next.FontShop.com in beta. March. A Basic Look at Typography in Web Design. Web design is so important to ensure a site has a good user experience and each aspect of it can have a huge impact on the usability of your site.

A Basic Look at Typography in Web Design

One of these aspects, Typography is an often overlooked, but integral part of design and something your web design company shouldn’t be overlooking. Think of all the different uses of typography on the web, from large headlines and bold blocks of text to smaller-sized text in body copy, and you’ll soon realize that not only is it a crucial part of a web design, but that it’s a pure combination of art and science. We’ve come a long way since the start of the internet, but the use of typography is as important today as it was back in the day. Typography Basics Typography is the use of type in a design. There are two major classifications of fonts to choose from: serif and sans serif fonts. Serif fonts have serifs or extra embellishments at the end of stokes; some call them feet or tails. Design Observer.

Scribus Open Source Desktop Publishing. JESUS RODRIGUEZ VELASCO. 9-Bits. The Taxonomy of Type. This is not a detailed overview of typography, and was not intended to be.

The Taxonomy of Type

Instead, this article’s purpose is to help us as designers to distinguish basic properties of types. Typography encompasses a large field of interests, and to put it all into one article would be difficult and unnecessary. If you are interested in learning more, we encourage you to check out the reference materials we provide at the end. This article doubles as a giveaway contest. We’ve teamed up with the folks at Bohemian Coding, Hex, and Mark Batty Publisher to give prizes to Phuse readers. Also, if you haven’t already, follow us on Twitter and grab our feed. The origins of typography trace back to about 1,200 years ago. The old classification systems, however, are no longer relevant to the modern typography. Many will even argue that classifying typefaces is impossible because we are applying a linear system to non-linear data. Why Classification Is Important for Designers Serif Sans-serif Display What?

Advanced Typography techniques using CSS » - Web Design Marketing Podcast & Blog. While the descriptions and basic uses for CSS typography controls have been beaten to death, there are still many rich typographic abilities of CSS that are not well documented.

Advanced Typography techniques using CSS » - Web Design Marketing Podcast & Blog

This is an example of what you can do by combining and tweaking type using css. I am not at this time going to be describing the code in much depth, but if you are interested in learning how I did it download my advanced css typography example page and look through the source code. I hate to say “Looks best in…” however, for these examples they really do work best in the default font for your browser. So for this page at least, please resize the text to default for the full effect. Reflections – This only works for words/letter combinations that look the same if they are flipped (ie: very few.) Web Design Rockstarz Drop Charectors – This technique uses a low line height and a bottom border to allow some characters (such as the lowercase g) to drop below the line. Funky Webdesign!

Fancy Headlines Flowing Headlines. Typograph – Scale & Rhythm. This page falls somewhere between a tool and an essay.

Typograph – Scale & Rhythm

It sets out to explore how the intertwined typographic concepts of scale and rhythm can be encouraged to shake a leg on web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you can play upon it. Choosing sizes Don’t compose without a scale. The Elements of Typographic Style Applied to the Web - a practical guide to web typography. Mike Davidson - sIFR. Over the last several months, a small group of web developers and designers have been hard at work perfecting a method to insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics.

Mike Davidson - sIFR

The method, dubbed sIFR (or Scalable Inman Flash Replacement), is the result of many hundreds of hours of designing, scripting, testing, and debugging by Mike Davidson (umm, that’s me) and Mark Wubben . Through this extensive work, we, along with a invaluable stable of beta testers, supporters, and educators like Stephanie Sullivan and Danilo Celic of Community MX , have completely rebuilt a DOM replacement method originally conceived by Shaun Inman into a typography solution for the masses.

It is this technology which provides the nice looking custom type headlines you see on sites like this one, Nike, ABCNews, Aston Martin, and others. How it works A normal (X)HTML page is loaded into the browser. Accessibility details Compatibility Permanence. The Grid System.