DesignM.ag » Typography http://designm.ag Articles and Resources for Web Designers Mon, 23 Mar 2015 21:01:36 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.3 Introduction to Grid-Based Typography in Web Designhttp://designm.ag/typography/grid-based-typography-in-web-design/ http://designm.ag/typography/grid-based-typography-in-web-design/#comments Mon, 16 Mar 2015 15:01:58 +0000 http://designm.ag/?p=118930

Advertise here with BSA


What do math teachers and city planners have in common aside from indispensable yet low-compensating jobs? A love for grids, of course! This is one of those special topics that seems really important because it is really important but still doesn't get enough attention. It's on par with balancing a checkbook and learning to properly mimic funny accents.

grid typography styles book glyphs lettering

Thankfully grids can be useful to many career paths outside of mathematics and architecture. I want to focus on the benefits of grid structure when it comes to designing web typography. A typical layout often uses many small blocks of text which are crucial to a good user experience. This post should offer some introductory ideas for designers who want to create better websites focusing on organized typography.


Advertise here with BSA

]]>

Advertise here with BSA


What do math teachers and city planners have in common aside from indispensable yet low-compensating jobs? A love for grids, of course! This is one of those special topics that seems really important because it is really important but still doesn’t get enough attention. It’s on par with balancing a checkbook and learning to properly mimic funny accents.

grid typography styles book glyphs lettering

Thankfully grids can be useful to many career paths outside of mathematics and architecture. I want to focus on the benefits of grid structure when it comes to designing web typography. A typical layout often uses many small blocks of text which are crucial to a good user experience. This post should offer some introductory ideas for designers who want to create better websites focusing on organized typography.

Sizes and Positioning

On the Internet font sizes are generally relative. This would be in contrast to print designers who have free reign over their typography. When something is designed for print the letters may be rescaled to larger or smaller dimensions – but the final product is set in stone. Web browsers don’t work the same as magazines because that would imply shape-shifting magazines. Or that browsers should all use the same scale for sizing fonts… but let’s not get carried away.

Since different monitors run at different resolutions, web browsers have become more adaptive. Font sizes are relative to each display so the size and alignment of paragraph text on the page is prone to shift around.

Line height is a magical property which can be adjusted using CSS. Each line of text is fitted using a certain adjusted line height to create a bit of padding above and below the line. Otherwise text would be scrunched up real tight and look horribly disfigured.

Fancy-shmancy designer terminology calls this effect leading. The distance between lines of text will be the difference between readability and inability(to read). This rule is also applied to headings which need an appropriate distance from smaller text. Distinguishing between different sizes can be easier when using different font styles and font faces.

Baseline Design

Grids result in a fine line between rigid structural guidelines and obsequious attention to detail. Find your structure but be willing to deviate if a better opportunity presents itself. Patterns are important but they don’t need to repeat throughout all areas of your design.

baseline text typography grid example

A website header may use different typographic grid styles compared to the body, sidebar, and footer section. Typefaces may be similar but patterns which demarcate individual page sections will be more recognizable. Enter the concept of baseline grid design which expands on the use of whitespace within grids.

Creating a baseline grid is as simple as recognizing the vertical flow of content. There are many great articles which cover this process in detail for CSS and Photoshop designers. It all boils down to vertical spacing between lines of text and individual blocks of text. The baseline consists of different numbers for font sizes and line height values. An orderly page is a readable page because the space between content is predictable even from a distance.

Finding your Rhythm

No this doesn’t mean that learning to swing dance would help with web design(although it does come in handy). Rhythm in the context of design is all about balancing a composition. It’s been discussed many times before that vertical rhythm is the key to great typography. The size of letters along with the space between letters will define how text appears in a layout.

Specifically the most important concept is distance. It’s really about the notes you’re not playing. Or in this case it’s about the space you’re not using. Vertical rhythm can be accomplished with consistent spacing between elements like headers and paragraphs. There should be plenty of extra space between paragraphs so that readers naturally associate the gap as a break.

Most content is often structured into paragraphs to split up different ideas. Headings are used to differentiate between many separate ideas with encapsulating paragraphs. Similar content may include blockquotes, lists, images, or other media.

By following one structured rhythm for margins & line-height you create a repeated design for every block of content. Readers absorb your design like evasive subtext on a first date, and they eventually begin to recognize a pattern. Order and predictability is what makes good page rhythm. And good page rhythm should make you excited enough to dance the night away.

Grid Design in Photoshop

Usually it’s better to start designing something in a graphics editor before jumping right into code. Photoshop is the most common program which offers guides and rulers as tools for building grids. When designing a mockup try creating guides to align content naturally with your layout.

Alternatively you might try automating the grid process with a plugin like GuideGuide. This is free to download and works with Photoshop CS5-CC. The plugin creates a new panel where you enter specific pixel values for columns and margins. This will add pixel-perfect guides without the need to drag out individual guides from rulers.

guideguide plugin free photoshop guides rulers

Since content often changes from a mockup to the real website it’s not worth over-planning the entire design. Setup rulers for important sections of vertical rhythm like content sliders and primary page headers. Leave the rest to your eyeball and see how it translates into code.

With a bit of practice you’ll learn the best positioning for rulers in mockup design. Each layout will be different than the last but content structure is generally uniform. Don’t try to make every line of text pixel-perfect in Photoshop because you might change plans when coding for the browser. Have a general idea of the design and keep your focus on the big picture.

Final Thoughts

This article may be over but the learning is far from done. I hope these ideas can help web enthusiasts break into the topic of general grid-based design. Reading is always useful but it’s important to move these ideas from your squishy brain matter into real design work. Photoshop can be quite forgiving if you have patience and tenacity for failure. The best part is once you can see how text forms into grids you’ll never want to go back to the dark ages building off chaotic design intuition.


Advertise here with BSA

]]>
http://designm.ag/typography/grid-based-typography-in-web-design/feed/ 0
35 Stunning Examples of Elegant Script Typographyhttp://designm.ag/typography/35-examples-of-elegant-script-typography/ http://designm.ag/typography/35-examples-of-elegant-script-typography/#comments Mon, 16 Jun 2014 14:53:21 +0000 http://designm.ag/?p=85168

Advertise here with BSA


Who doesn't honestly love sophisticated culture? A three-piece suit with the cane & top hat seems to evoke the same feeling of a classy script typeface. Curly lettering with fancy linework has provided an articulate beauty in the design world.

With so many custom fonts you might expect all script writing to appear very similar. But custom designers put a lot of work into lettering which often turns into logos, posters, business cards, and other forms of promotional material. Check out this collection of script typography made for print and digital mediums. If you really love fancy design consider a quick look through this gallery with your favorite opera glasses.

Keep on Keepin' On

keep on keepin on elegant script typography


Advertise here with BSA

]]>

Advertise here with BSA


Who doesn’t honestly love sophisticated culture? A three-piece suit with the cane & top hat seems to evoke the same feeling of a classy script typeface. Curly lettering with fancy linework has provided an articulate beauty in the design world.

With so many custom fonts you might expect all script writing to appear very similar. But custom designers put a lot of work into lettering which often turns into logos, posters, business cards, and other forms of promotional material. Check out this collection of script typography made for print and digital mediums. If you really love fancy design consider a quick look through this gallery with your favorite opera glasses.

Keep on Keepin’ On

keep on keepin on elegant script typography

Fart

green fart flatulence lettering drawing

Dyslexia Sexia

dyslexia sexia script print design

Branthony

branthony script writing text type design

Save The Date

save the date finished lettering writing typography

Huxtable

huxtable to the max writing typography

Let It Be

let it be written lettering script design

Canspiration

can inspiration script fancy text

Sullen

sullen style writing design typography letters

Elevate

elevate logo draft concept design typography

Valentine

valentine day script card writing design

Nutella

nutella script writing typography brown yellow

Gusto

dark gusto written script typography

Risky

risky business as usual white lettering

Northern Shore

northern shore script text typography design

Faith

faith hand written drawing typography

Novoelle

novoelle logo design progress script

Hey!

fancy text hey written script typography

Happy Mother’s Day

happy mothers day inspiration drawing script

Smooth

smooth script text drinking liquor glass

Baselime

baselime vector design typograpy ui

Honcho

dark written text honcho final sketch

Our Heart

our heart written script typography lettering

Bon Appetit Magazine

ncl writing bon appetit magazine painted

SignNow

signnow final sketch design logo text

Gandul

gandul written script writing design

Flourish Fridays

flourish friday script lettering writing design print

The Script Letter

calligraphy handwriting script letter design

Life and Jazz

life and all that jazz written type

Sweet P

sweet p pretty written script text

Errday

errday script white text lettering

Tennessee Whiskey

tennessee whiskey hand lettering writing text

Lipsum

lipsum by emrah kara designer typography

Highly Honored

highly honored written text typography design

The Holdup

dark walls the holdup written typography


Advertise here with BSA

]]>
http://designm.ag/typography/35-examples-of-elegant-script-typography/feed/ 0
Dashes, Quotes and Ligatures: Typographic Best Practiceshttp://designm.ag/typography/dashes-quotes-and-ligatures-typographic-best-practices/ http://designm.ag/typography/dashes-quotes-and-ligatures-typographic-best-practices/#comments Thu, 11 Jul 2013 16:50:12 +0000 http://designm.ag/?p=75811

Advertise here with BSA


Typography has become a hot topic, often used referring illustrative typography or custom lettering. At its core, however, typography is simply the skill of setting type. Several centuries ago, this meant composing every paragraph by hand, character by character, before locking it into a form and printing it on a letterpress machine. For much of the 1900s, this meant typing it out on a Linotype or a similar composing machine.Since the advent of the digital age, nearly all composing has been done digitally. This certainly makes things simpler, but we’ve also lost many typographic sensibilities. Here are a number of items for your consideration that will help you set type better, applicable in both print and web scenarios.

The Principle Of Typography

dashes1

Advertise here with BSA

]]>

Advertise here with BSA


Typography has become a hot topic, often used referring illustrative typography or custom lettering. At its core, however, typography is simply the skill of setting type. Several centuries ago, this meant composing every paragraph by hand, character by character, before locking it into a form and printing it on a letterpress machine. For much of the 1900s, this meant typing it out on a Linotype or a similar composing machine.

Since the advent of the digital age, nearly all composing has been done digitally. This certainly makes things simpler, but we’ve also lost many typographic sensibilities. Here are a number of items for your consideration that will help you set type better, applicable in both print and web scenarios.

The Principle Of Typography

dashes1

Type is intended for reading. Readability is your primary concern when setting type, and that’s what most of these principles affect. Whether it is the use of dashes, which ligatures are appropriate, or which type of quotes to use, it all comes back to the question of how the text is read.

Maintaining “type color” is important. Type color excludes the spectrum, only dealing with black and white. It is a figure–ground relationship, with “blackness” being the printed portion of the page (or its digital equivalent, in web design).

12_13

To learn more on type color and particularly the negative space and its role in typography, I’d recommend Cyrus Highsmith’s recent book, “Inside Paragraphs”, a foundational book on how text is read, dealing with typography and the thought that goes into individual characters, words, lines and entire paragraphs. For now, let’s get to some specific applications!

Dashes

Dashes remain among the more confusing and sometimes controversial components in typography. It doesn’t help that the dashes we should be using most often are not represented by a key on a standard keyboard! There are three types of dashes that we use often: the en dash, the em dash, and the figure dash. The mathematical symbol for minus and the hyphen are separate characters.

typesofdashes

The em dash is equal in width to—you guessed it—one em in any given typeface. An em is equal in width to the point size of a typeface, traditionally named because the capital ‘M’ was often one em wide in older typefaces. For a number of reasons that isn’t always true anymore, but the name remains.

The en dash was traditionally half the width of an em, but that is more of a guideline than a rule, and en dashes vary in length quite a bit. The figure dash, which is not as commonly used, is the width of a numerical character, which in most normal fonts as well as monospaced fonts, are all the same width.

En Dash Or Em Dash? The Controversy

One of the most common uses of dashes is to denote a break in thought, similar to parentheses. There is however, heated discussion over which method to use. Some style books, such as The Chicago Manual of Style and The Oxford Style Guide recommend using an em dash—like this—with no spaces around it. Robert Bringhurst’s Elements of Typographic Style, on the other hand, recommends a padded en dash – an en dash with a space on either side – like this.

emvsen

Many people have different opinions on what reads better and maintains a more even type color. Often a typographer will choose depending on the typeface being used, as some typefaces have an over-long em dash. Weigh the arguments, test both alternatives, and use what seems appropriate in the typeface you’re using! Some considerations depend on the language you’re typesetting as well. German uses the padded en dash almost exclusively, while Russian favors the em dash.

The Em Dash Elsewhere

emdash2

The em dash is also used to end a sentence mid-thought without usual punctuation, in dialogue, a similar effect as an ellipsis, although again it implies a stronger break in thought. When citing the author of a quote, use the em dash between the quote and the name of the author. It is also occasionally used in lieu of quotation marks to mark the beginning of quoted text, but this is an archaic method.

The En Dash Elsewhere

endash2

The en dash has a broader usage. When there is a range of values, or something similar, it is correct to use an en dash (rather than a hyphen) to connect the two, such as describing a range of dates or a series of pages (January–March, pp. 10–12). It’s also used in such instances as a relationship (father–son), in demonstrating a contrast (58%–42% vote, a 4-2 score).

The Figure Dash

The figure dash, a third type of true dash that is equal to the width of a given typeface’s digits, is not commonly used, and indeed not always available in a font. Its correct use is in a series of numbers, such as in a phone number, in which it would be used (rather than a hyphen) to separate the digits.

The Hyphen And Minus Sign

hyphenminus

Hyphens and minus signs are not true dashes. While dashes are completely horizontal, the hyphen often has a slight angle to mimic the stroke of a pen by a right-handed writer. It has a number of common uses. A hyphen connects compound words (e.g. egg-beater), and can also connect words in order to clarify meanings (e.g. “the man-eating sandwiches” versus “the man eating sandwiches”). Words are also hyphenated when they are split at the end of a line (see below).

A minus sign is exclusively used in mathematics. It’s longer than a hyphen, being closer in length to the en dash. As there are no standard shortcuts for typing a minus symbol and it must be inserted from the character set manually, most people simply substitute a hyphen or en dash.

Standard Shortcuts For Dashes

shortcutsdashes

Quotes

Quotes are perhaps a little more intuitive than the dashes. It’s easy to note when a person isn’t using “smart quotes”. The quotes should always point inwards. However, as you may have noticed, the correct quote glyphs are not represented on a keyboard. Instead, there are only straight quotes. If you’re typing in Microsoft Word or a similar word-processing program, it will correct the quotes for you automatically. However, if you’re typing a blog post or a piece intended to be printed, make sure you include the smart quotes. Single quotes are generally used for a quote within a quote, like this: “He told me not to ‘walk too near the edge’ or I’d fall off.”

The apostrophe is another often-misused glyph. It is essentially a closing single quote, but is used to indicate possession (John’s book), or to indicate a contraction (that’s, it’s). The apostrophe always points to the left. Where we see it often misused is when the software you’re typing tries to make it a “smart quote”, thus pointing the wrong direction, in abbreviations such as ’90s.

Other Common Quote Types

No matter which language you speak, it’s worth your while to be familiar with quotes used in multiple languages. Here are a few of the most common. Guillemets are used extensively, indicating quotes in dozens of languages, including German, Russian and French. Another common way to introduce a quote is the use of a padded en dash at the beginning of the line, or occasionally an em dash.

Sometimes people will mix and match, resulting in interesting discussions for editors and typographers!

Typing The Right Quotes

Since these characters aren’t represented by a key on the standard English keyboard, here’s a table of the common shortcuts for using these marks.

shortcutsquotes

Ligatures

Let’s face it – we all love ligatures. Perhaps we love them a little too much. They’re fun, unusual, and add a little interest to the type we use. With the advent of web fonts and broadening support across browsers, we’ve had even more opportunities to show off our typographic skills. However, there are a few rules about ligatures that we should consider in order to uphold the cardinal rule of typography – readability.

Ligatures are primarily intended to improve legibility, combining awkward character combinations into a single glyph, such as fi, ffl, or Th. These actually improve the flow of the text, aiding the eye in scanning the line by removing awkward visual tension or gaps.

standardligs

Others, however, are called “discretionary ligatures”, due to the fact that they don’t have a place in body text. These include the ct and st ligatures. They look cool (as all ligatures do!), but they disrupt the reading and are more of a distraction than an aid to legibility. These are better off used only in headlines, where they can be eye-catching and draw attention to the headline, serving a completely different purpose than that of a standard ligature smoothing out an awkward spot in a paragraph.

Some typefaces have deliberately over-the-top ligatures for display type, such as this sample of Magneta. I have to admit, these are quite cool, but also should be used very sparingly. They’re an aesthetic decision over legibility, and therefore should only be used when legibility is not a concern (i.e., if the type size is massive).

ligatures1

Some characters that look like ligatures are actually a unique character, such as æ or œ. They often originated as a ligature, but shouldn’t be treated as one today. The Latin “W” began this way, as a combination of two Vs, but now it is a unique character, and if there were a word with two Vs or Us we wouldn’t replace them with a W.

Closing Remarks

So there you have it! Those are the basic rules and guidelines relating to dashes, quotes and ligatures. Things can get much more complex than that, but if you stick with the material in this article you’ll be in good standing.

Some of you are probably thinking, “why should we worry about all of this? Is it necessary to worry about em dashes, en dashes, hyphens and minus signs, when they all look so similar?” The answer is, unequivocally, yes! For one thing, harking back to the principle rule of typography, using these features thoughtfully and correctly makes a huge impact on readability. Also, setting type correctly, with attention to detail, lends an entirely new level of professionalism to your typography, whether on the web or for print.

So, next time you are digitally setting type for a brochure, a book, or a blog post, take the extra time to make sure you’re using these typographic features correctly! Your readers will thank you for it, whether they know it or not!


Advertise here with BSA

]]>
http://designm.ag/typography/dashes-quotes-and-ligatures-typographic-best-practices/feed/ 0