background preloader

Five simple steps to better typographyMark Boulton

Five simple steps to better typographyMark Boulton
– April 13th, 2005 – Typography, I find, is still a bit of mystery to a lot of designers. The kind of typography I’m talking about is not your typical “What font should I use” typography but rather your “knowing your hanging punctuation from your em-dash” typography. So, in an attempt to spread the word here’s the first of five simple steps to better typography. Measure the Measure. The Measure is the name given to the width of a body of type. One point = 1/72 of an inchOne pica = 12 pointsOne em = The distance horizontally equal to the type size, in points, you are using. But, with the advent of DTP packages and the website design the following are also now used: MillimetresPixels There is an optimum width for a Measure and that is defined by the amount of characters are in the line. CSS and fluid? What is interesting here is fluid designs on the web. The Measure and leading. A simple rule is your leading should be wider than your word spacing. Reversing out? Tracking Your responsibility Related:  Text & Fontsweb typography

Five simple steps to better typography – Part 3Mark Boulton – April 25th, 2005 – I’m pleased this series is turning out to be so popular and it’s somewhat confirmed what I suspected. A bit of a thirst for simple typographic design theory. As I’ve been writing this series i’ve deluged by email and comments from people agreeing, disagreeing, asking for more information etc. What’s great is designers are thinking and talking about typography again. Designers are questioning typography and not just letting the font and the software do the work. The third installment of this series is dedicated to just one typographic element - Ligatures. Ligatures are combinations of letters - some of them are functional, some are decorative. They are generally comprised of certain characters which are created to stop collision of elements of letterforms. It’s when these overlaps collide with letters next to them that we have problems. Ligatures and language have been closely tied throughout typographic history. Take the word fjord for example. Usage in print

A history and some revival fonts < The Fell Types The Fell Types took their name from John Fell, a Bishop of Oxford in the seventeenth-century. Not only he created an unique collection of printing types but he started one of the most important adventures in the history of typography. You will find here a non-exhaustive history and a modern digitization of some of them. Download the 75 best free fonts | Typography In this freshly updated free fonts for designers post, we bring you the world's best free fonts. We've filtered out the diamonds from the thousands of less perfectly designed free fonts available online, for you to use in your designs and illustrations. Get Adobe Creative Cloud now This list represents the 55 best free fonts we've found in eight categories. Don't forget, we have many other articles covering specialist font types including handwriting fonts, kids' fonts, cursive fonts, beautiful fonts, web fonts, professional fonts and more. Most of the typeface collections listed here can be used in your projects for free, but please be sure to check the terms. Serif fonts 01. This free serif display font takes inspiration from the late 18th century European Enlightenment and the work type designer John Baskerville. The typeface design is a project led designed by Dutch designer Claus Eggers Sørensen. 02. Lora is a free font that has its roots in calligraphy. 03. Image 1 of 2Image 2 of 2

Fonts - Type topics: Glossary This section provides a small glossary of terms frequently used in the type world. alignment The positioning of text within the page margins. Alignment can be flush left, flush right, justified, or centered. Flush left and flush right are sometimes referred to as left justified and right justified. ascender The part of lowercase letters (such as k, b, and d) that ascends above the x-height of the other lowercase letters in a face. baseline The imaginary line on which the majority of the characters in a typeface rest. body text The paragraphs in a document that make up the bulk of its content. boldface A typeface that has been enhanced by rendering it in darker, thicker strokes so that it will stand out on the page. bullet A dot or other special character placed at the left of items in a list to show that they are individual, but related, points. cap height The height from the baseline to the top of the uppercase letters in a font. centered character, character code character mapping color condensed dpi

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 :

- 1229x994 [1215x835] Sometimes the toughest step in building a new website or redesign can be the conceptual ones. Selecting a color palette is one of them that can be tough if you don’t have the right tools. So where do you start? It all comes down to basic color theory and the color wheel. Basic Color Theory Scientifically speaking, color is the visual presence of light in different wavelengths and relates to how these wavelengths are absorbed or reflected. The most common way we, as designers identify color is by name. The color wheel is a circle dating to the days of Sir Isaac Newton in the late 1600s. The expanded color wheel, which is the basis for most RGB color pickers in design software, is an extension of the basic wheel. Primary Colors Red, yellow and blue are primary colors. Primary colors are the basis for the entire color spectrum. Secondary Colors Green, orange and violet (purple) are secondary colors. Secondary colors are formed when two primary colors are mixed in even amounts. Tertiary Colors

Five simple steps to better typography ? Part 5Mark Boulton – May 18th, 2005 – The final part in this series, I’m glad to say is a little more cut and dry than the last in the series. It’s more about historical typographic theory but with a simple, practical guide to ensuring a balanced use of typeface weights. Typeface weight, and the choice of weight, is perhaps one area of typography that to most designers is simply a matter of choice. Solving the design problem Let’s start by addressing the root of the decision to set type in different weights - solving a design problem. An aesthetic problem. There may be other reasons as well, but I believe these are the main cause. First off a bit of history I like these history bits, they really are informative. Uppercase and Lowercase, and the relationship between them, have been around for over twelve hundred years. Italics were a strange bunch to begin with. Some of the newest additions to the weights of typefaces came with bold, and condensed, as late as the early nineteenth centry. The practical bit

The Future Of CSS Typography Advertisement There has been an increasing and sincere interest in typography on the web over the last few years. Most websites rely on text to convey their messages, so it’s not a surprise that text is treated with utmost care. In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text. Keep in mind that these new properties and techniques are either new or still in the works, and some of the most popular browsers do not yet support them. But we feel it’s important that you, as an informed and curious Web designer, know what’s around the corner and be able to experiment in your projects. A Glance At The Basics One of the most common CSS-related mistakes made by budding Web designers is creating inflexible style sheets that have too many classes and IDs and that are difficult to maintain. The Font Property White Space (al)

WebDesignHelper.co.uk - Design Theory 9 - Typography (Part 1) Typography (Part 1) Visual contrast and page design Good typography depends on the visual contrast between one font and another, and the contrast between text blocks and the surrounding empty space. Nothing attracts the eye and brain of the viewer like strong contrast and distinctive patterns, and you only get those attributes by carefully designing them into your pages. Use the major HTML headings sparingly. Visual logic versus structural logic The framers of the original HTML standards were physical scientists who wanted a standard means to share documents with minimal markups aimed at revealing the logical structure of the information. The standards organization responsible for codifying the HTML language is responding the widespread complaints of graphic designers that the heading tags in Web documents often produce clunky, over-large titles and subtitles. Legibility depends on the tops of words Your choice of uppercase or lowercase letters can have a dramatic effect on legibility.

Born Typeface | Born is a mediterranean typeface open to new times | Carlos de Toro | Diseño gráfico y tipografía | Barcelona & Logroño Su historia Born es mucho más que una tipografía, es también una historia; La de mi año 2013. La historia de una mudanza a la gran ciudad, el resultado de conocer grandes personas de todas partes del mundo y también sus culturas, de conversaciones en clases, bares, trenes… de compartir momentos, experiencias, conocimientos… Born es el resultado de todas estas vivencias y personas: y ahora yo comparto contigo este pedacito de historia. Born, nacida en la ciudad de Barcelona a primeros del 2013, lleva también el nombre de unos de los barrios más pintorescos de la Barcelona actual, donde a orillas del mar mediterráneo lo antiguo y de toda la vida, las nuevas tendencias y la multiculturalidad se unen y fusionan entre sus estrechas y serpenteantes calles, creando una simbiosis entre tradición y modernidad. Se trata de una tipografía mediterránea, abierta a los nuevos tiempos.

25 Awesome Graffiti Fonts for Designers Advertisement Graffiti is the name for images or lettering scratched, scrawled, painted or marked in any manner on property. Graffiti is any type of public markings that may appear in the forms of simple written words to elaborate wall paintings. Graffiti has existed since ancient times, with examples dating back to Ancient Greece and the Roman Empire. Typography is all about expressing and Graffiti Fonts are an important part of Typography. Graffiti Fonts are widely used in several posters & designs. We already have good collection of Professional fonts, Brush Fonts and have also listed Best Sites to Download Free Fonts, Cool Designs. Rufa Download Information on Rufa ReskaGraf Download Information on ReskaGraf graffonti Download Information on graffonti elafont gohtic! Download Information on elafont gohtic! Astigma Download Information on Astigma Grafitti Font-Beta test Download Information on Grafitti Font-Beta test Tags Xtreme Download Information on Tags Xtreme Posca Mad Thrasherz Urban & Slick

How to Safely Match Web Design and Typography As web designers, our designs have to be both usable and attractive, communicate information and create a name. Our designs must be technically proven and tested for our dear readers. With that in mind, web designing is definitely a form of communication and nowadays, this type of communication is very, very important. As a form of communication, we, as web designers do the speaking and we hope our readers and viewers listen. For all types of communication, the most important thing is to be able to fully transmit the message to the receiving end. Now, 95% of the information communicated on the internet is written language. Marriage of Typography and Web Design: Why is Typography Important? Whenever people visit a website you have designed, chances are they won’t care much about the illustrations or pictures or sounds, people will immediately look at the text. People search the internet hoping to find the information they need. So, why is typography important? 1. 3. In order to wow(!) Serif

Related: