Elements of Typographic Design


Lan­guage is entwined with typo­graphy. Type can be defined as the dis­play and arrange­ment of lan­guage. As design­ers, we should care about this.

Type­set­ting is the pro­cess of tak­ing raw text and mark­ing it up. Mak­ing head­ings, lists, emphas­ised text etc.

The typo­graphic grid is a found­a­tion upon which lay­outs can be built.

Con­cep­tu­ally, con­tent has levels of import­ance. Typo­graph­ic­ally, Hier­archy visu­al­ises this.

The font used to dis­play the content.

How the arrange­ment and lay­out of the type aids reading.

Com­bin­ing type with other graphic ele­ments such as pho­to­graphs, illus­tra­tions, video or other UI elements.

Col­our, when dis­cussed in typo­graphic terms, can mean two things: red, green, blue etc. or dark or light typo­graphic col­our. Dark typo­graphic col­our is dense type–tight lead­ing or line height, tight whitespace. Light typo­graphic col­our is the opposite.

One of the unfor­tu­nate things on the web is that, gen­er­ally, we’re design­ing not know­ing what the con­tent is. We have an idea of what the con­tent might be, but when deal­ing with con­tent man­age­ment sys­tems and the flow of data, it’s very dif­fi­cult to know. But con­tent is an import­ant part of typo­graphic design and this con­nec­tion is one of the cas­u­al­ties of the web stand­ards man­tra of sep­ar­at­ing con­tent and present­a­tion. When we do that, it’s very dif­fi­cult to tell stor­ies with design.

Source via Mark Boulton.