background preloader

Typograph – Scale & Rhythm

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

Related:  MaterialTypographyTypeface

Kick-Start Your Project: A Collection of Handy CSS Snippets Don't start your project with an empty style sheet: there are many great snippets that can make your life easier and speed up web development. We are going to show you some handy snippets that you might find useful for kick-starting your next project. In one of the previous articles “Basic Ready-to-Use CSS Styles”, we saw how we could create a suite of classes to help the design process while making a website. Creating Exciting And Unusual Visual Hierarchies Advertisement Layout, for both print and screen, is one of the most important aspects of graphic design. Designs that extend across multiple pages or screens, whether containing large or small amounts of type, must be carefully controlled in a way that is enticing and is easy for all to access. Careful control of visual hierarchy is a key aspect of the design decisions we have to consider. In this article, we will look at how frequently type needs to be broken down into different levels, such as topic, importance and tone of voice.

Beginners Guide to OpenType OpenType (OT) is a cross-platform type format that includes expert layout features to provide richer linguistic support and advanced typographic control. Using OT technology you can substitute your characters for different glyphs1 using many different methods; Ligatures, Small Caps, Oldstyle Figures, Fractions, Superscript/Subscript, Ordinals, Alternates, Titling Characters and many more. This beginners guide will help to illustrate some of the more common features found in OT fonts and when they should be used. Small Caps Small-cap glyphs are smaller versions of normal-cap glyphs. They have many uses, but are generally used to prevent capitalised words from appearing too large when set alongside lowercase text.

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. Advanced Typography techniques using CSS » - Web Design Marketing Podcast &amp; 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. 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.

Simpletip - A simple jQuery tooltip plugin Simple tooltips Here's some examples of simple tooltips using some of the default options provided by the simpletip library. Hover over me to see a bog standard tooltip using all default options. $(). simpletip Hover over me to see a fixed position tooltip. $(). Click to see a persistent tooltip that only closes when clicked! WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin Liu ← Back to Chengyin's main page What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that's too complicated. It should be just a click away. Hence I wrote WhatFont, with which you can easily get font information about the text you are hovering on. Readability Update: On February 1, 2011, Readability was re-launched into a full-fledged reading platform that includes mobile support, queuing articles for reading later and a greatly improved reading view. In addition, the platform provides a unique model for supporting publishers and writers through your reading activity. Visit to learn more. Reading anything on the Internet has become a full-on nightmare. As media outlets attempt to eke out as much advertising revenue as possible, we’re left trying to put blinders on to mask away all the insanity that surrounds the content we’re trying to read. It’s almost like listening to talk radio, except the commercials play during the program in the background.

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. The Taxonomy of Type This is not a detailed overview of typography, and was not intended to be. 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.

FooTable FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome - No matter how many columns of data you may have in them. What Does It Do? FooTable transforms your HTML tables into expandable responsive tables.

Related:  Typographie