background preloader

Typography

Facebook Twitter

Type-Neue — An ever growing independent link directory of quality fonts. Type study: Typographic hierarchy. This is part of a series of guest posts on web typography. Today’s post was written by Frank Chimero. Workers of the web are familiar with establishing a hierarchy through markup by using tags like <h1>and <em>, but what of the aesthetics of it? On the web, a large chunk of our content is text. This means it’s important to understand how to reinforce this hierarchy typographically.

A clear understanding of hierarchy results in more beautiful, meaningful, and communicative designs that better serve their audience. I’m going to address these concepts with an example that slowly builds complexity by introducing new visual elements. Fig. 1 To begin, I’m not using any typographic devices to establish the hierarchy: it’s all one typeface in one size and weight (fig. 1). Fig. 2 Above we have the same typeface and type size, but we’ve started to introduce some clarity to the information by chunking it into logical groups (fig. 2).

Fig. 3 Fig. 4 Fig. 5 Fig. 6 Detail from newyorker.com Like this: Lobster Font Family – Google Web Fonts. Grumpy wizards make toxic brew for the evil Queen and Jack. Normal 400Grumpy wizards make toxic brew for the evil Queen and Jack. One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. aa bb cc dd ee ff gg hh ii jj kk ll mm nn oo pp qq rr ss tt uu vv ww xx yy zz ªª µµ ºº ßß àà áá ââ ãã ää åå ææ çç èè éé êê ëë ìì íí îî ïï ðð ññ òò óó ôô õõ öö øø ùù úú ûû üü ýý þþ ÿÿ āX ăX ąą ćć ĉĉ ċX čč ďX đX ēX ĕX ėX ęę ěX ĝX ğX ġX ģX ĥX ħX ĩX īX ĭX įX ıı ijij ĵX ķX ĸX ĺX ļX ľX ŀX łł ńń ņX ňX ʼnX ŋX ōX ŏX őX œœ ŕX ŗX řX śś ŝX şX šš ţX ťX ŧX ũX ūX ŭX ůX űX ųX ŵX ŷX źź żż žž ſX ƀX ƃX ƅX ƈX ƌX ƍX ƒƒ ƕX ƙX ƚX ƛX ƞX ơX ƣX ƥX ƨX ƪX ƫX ƭX ưX ƴX ƶX ƹX ƺX ƻX ƽX ƾX ƿX ǀX ǁX ǂX ǃX DžX džX LjX ljX NjX njX ǎX ǐX ǒX ǔX ǖX ǘX ǚX ǜX ǝX ǟX ǡX ǣX ǥX ǧX ǩX ǫX ǭX ǯX ǰX DzX dzX ǵX ǹX ǻX ǽX ǿX ȁX ȃX ȅX ȇX ȉX ȋX ȍX ȏX ȑX ȓX ȕX ȗX.

Lato Font Family – Google Web Fonts. Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google. In the last ten or so years, during which Łukasz has been designing type, most of his projects were rooted in a particular design task that he needed to solve.

With Lato, it was no different. Originally, the family was conceived as a set of corporate fonts for a large client — who in the end decided to go in different stylistic direction, so the family became available for a public release. When working on Lato, Łukasz tried to carefully balance some potentially conflicting priorities. He wanted to create a typeface that would seem quite “transparent” when used in body text but would display some original traits when used in larger sizes. Learn more at www.latofonts.com. Download Lobster font. Impallari.com. A common problem that affect most script fonts, is that each letter must be draw in a way that connect with the next and previous letters. And that's quite difficult. By having 26 lowercase character, that gives you more than 600 possible combinations for each letter (and arround 15600 for the whole alphabet). It's next to impossible to make it always connect seamesly whitout compromising the shape that each letter was originally intended to be.

That's why trying to make script fonts works it's like magic. Font designers use all kind of tricks to make it work. But, in the end, the results always compromises the shape of the original letters to make the whole alphabet work together. We will took a different approach. We will draw a lot of different versions of each letter and a hell lot of different letter-pairs (aka "ligatures") so we can always use the best possible variation of each letter depending of the context of the letter inside each word.

That's called "terminal forms". Piron Free Font. Almost an year after the release of Piron (one of our best-known typefaces) we’ve made the decision to get back to it and redesign it. So here it comes Piron v.2 although it’s still far from perfect it is at least much better than its predecessor. The changes which we made are numerous – the basic letterforms, the spacing and kerning and so on and on. We’ve decided to go to a more “classical” design of the letterforms so we looked a lot at classic slab serif typefaces. Download Piron Free Font V.2 With 1 and 2 are marked respectively – the previous version of Piron and Piron v.2 Together with the overall improvement of the letter forms, the letter widths were improved too.

The character set was increased from 176 characters of Piron v.1 to the 282 characters of Piron v.2. The ascenders were made higher and the descenders shortened which lead to a much better text color. Lato: new free open-source sanserif family by Lukasz Dziedzic. TyPoland presents its first public typeface release Lato Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish).

In December 2010 the Lato family was published under the open-source Open Font License by his foundry tyPoland, with support from Google. In the last ten or so years, during which Łukasz has been designing type, most of his projects were rooted in a particular design task that he needed to solve. With Lato, it was no different. Originally, the family was conceived as a set of corporate fonts for a large client — who in the end decided to go in different stylistic direction, so the family became available for a public release. When working on Lato, Łukasz tried to carefully balance some potentially conflicting priorities. The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness. I’ll appreciate any remarks, comments etc. Pompadour Numeral Set (Free Download) | Andy Mangold.

Open Source Ampersands. Siruca Pictograms™, the first Open Source project of Fabrizio Schiavi. I’d love to design a lot of new picts for my Siruca Pictograms™ but I can’t find the time, so I asked collaboration to some others icon designers. You can participate to the grow of this project if you like. I’ll publish it just below the text in this page with your name and a link to your site. Don’t worry if you don’t know any font editor, you can send me a Freehand, Illustrator or any vectorial file with your design and I’ll fix it. Siruca Pictograms™ is designed to works with Siruca™ font. It’s a stencil font with rounded terminations, and this characteristic must be keeped.

To simplify my work, please, draw your pictograms as path with trace —in the example on the left: I need the blu path. Have a good trip! 104 Free Fonts for Web Designers and Logo Artists | Fonts. It’s very essential for Designers to have an good understanding of typography and selection as the importance of typography in design can’t be neglected. The proper selection of typography can convert your normal design into very attractive piece of art. Among other things, effective typography manages to achieve three necessary objectives of web designing are Look, Appearance and Outcome which helps you to keep apart from normal wave.

As we know that typography can be used as a way of mutual understanding between you and your users. To communicate effectively, typography requires appropriate typefaces as there are a lot of unsung fonts out there that have really inspired us. Below you’ll find Over 100 Free Downloadable Fonts for Web Designers and Logo Artists by which you can save money and focus on making great applications. The basic purpose behind this post is to show you Popular, Professional and most importantly Free Downloadable font types to save your time searching them online. Die 100 Besten Schriften.

Periodic Table of Typefaces on the Behance Network. Large original English version HERESpanish version HEREPortuguese version HERE PRINTS, SOURCE FILES, and other Periodic Table of Typeface related goodies are available HERE The Periodic Table of Typefaces is obviously in the style of all the thousands of over-sized Periodic Table of Elements posters hanging in schools and homes around the world. This particular table lists 100 of the most popular, influential and notorious typefaces today. As with traditional periodic tables, this table presents the subject matter grouped categorically.

The Table of Typefaces groups by families and classes of typefaces: sans-serif, serif, script, blackletter, glyphic, display, grotesque, realist, didone, garalde, geometric, humanist, slab-serif and mixed. Each cell of the table lists the typeface and a one or two character "symbol" (made up by me simply based on logic), the designer, year designed and a ranking of 1 through 100. The sites used to determine the rankings are as follows : 3 Free Online Tools to Extract Text from Images. Whenever there is a need for a particular text from a certain image, we normally have to type in the whole text. Not any more, with OCR software, you can easily extract texts from images and scanned pages. OCR stands for Optical Character Recognition. These software extracts text from an image and converts it into an editable form. This can be a real time saver when you are scanning a document or converting a book to digital format. In this post, I have listed three such free online tools that you can use.

To compare them better for accuracy, I have used the same screenshot (below) from a webpage in all three. Free OCR Free OCR is an easy to use web service using which you can extract text from your image files in few simple steps. After processing, a text box containing the text extracted from the image will be shown on the next page. Free OCR supports PDF and JPG, GIF, TIFF, BMP and PNG image formats.

Registration is not required but it has few restrictions: Visit: Free OCR Limitations: Typograph – Scale & Rhythm. This page falls somewhere between a tool and an essay. 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. Of course, good typesetting requires something more than selecting a series of font sizes, just as music consists of something more than choosing notes. Vertical Tempo Most pages of continuous prose pulse with a particular vertical rhythm, established by the lines of its main words, sentences, and paragraphs. For this, Bringhurst suggests another rule of thumb: Add and delete vertical space in measured intervals. Size and rhythm make each other interesting. Sizing up the <body> The first step: establish the size of the main text. Here, it pays to work with the grain.

Declare <body> font-size using % The em. Awesome Fontstacks.