punctuation part 3 featured image

Punctuation
Part 3: Dots

Previously, Part 2 of this punctuation series covered # ‐ – — _ and *. While that post dealt primarily with horizontal lines, this post focuses on dots. This includes . , ; : ! ¡ ? ¿ … and • but unfortunately not ‽ (the interrobang).

I quickly realized that I wasn’t going to be able to design an interrobang that coordinated well with the question mark because this typeface is too bold and the exclamation part gets lost in the small counter of the question part. Perhpas there’s a more elegant solution, but I’ll have to return to it later.

Period (.) and Bullet (•)

The period (or full stop) is a pivotal punctuation mark around which many others are based. It is most often circular, ovoid, square, or rectangular. In the case of square or squarish marks, it is the width of the thickest uppercase downstroke. For rounded marks it is based on the same measurement, but with overshoot. Protest font has a round period.

The period (.) is most often larger than the dot on the lowercase i, as is the case with the Protest typeface.

The bullet (•) is larger than the period, ranging anywhere from around twice to three times the diameter. Whereas if I were to add an interpunct (or middle dot) to the character set, it would be the same size as the period (or perhaps a hair smaller). I’ve made the bullet for Protest about the same size as the asterisk, with a diameter just larger than the distance from baseline to descender line.

[fusion_imageframe image_id=”2199″ style_type=”none” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]http://staging.quakercreative.com//wp-content/uploads/2017/12/Punctuation-pt3-dots-02-1024×640.jpg[/fusion_imageframe]

The period sits on the baseline, with overshoot for the round period. The bullet ranges in vertical alignment, but very often aligns midway between baseline and cap height, or just below.

Ellipsis (…)

Ellipsis is—essentially—a set of three periods spaced closer together. According to the Microsoft character design standards, an ellipsis (…) should be set on the em space, and the “dots should be evenly space[d] so when this character is repeated the space between the dots and the space between each repetition is equal.”

Here’s the math if you’d like it:
Given:
em space width (m)
dot width (d)

n = (m − 3d) ÷ 3

Where the space between dots is n and sidebearings are ⁄₂.

[fusion_imageframe image_id=”2200″ style_type=”none” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]http://staging.quakercreative.com//wp-content/uploads/2017/12/Punctuation-pt3-ellipsis-02-1024×301.jpg[/fusion_imageframe]

Colon (:)

The colon (:) is a period with another period directly above it. The top of the upper dot should be aligned with the x-height, but with no overshoot.

Exclamation (!) and Question (?) Marks

The exclamation mark (!) is a period with a vertical stroke over top. The vertical stroke style depends on the tool used and style of type. It can be a monoline stroke or tapered (to oversimplify it). The widest part of the stroke should be the width of an uppercase downstroke. The Protest explamation mark is limited by the tool being used, and so has a monoline version.

The question mark (?) is another place to play with form, similar to the asterisk and ampersand. While the dot is a period, the upper portion has plenty of room for variation.

Qusetion marks can be calligraphic or monoline. They can have open or closed apertures. The bottoms can be pointed, flat, or curled. They can have stylish terminals.

While I’d like to play more with the from, thtypeface I’m designing is limited by its tool. The chunky Sharpie® marker can be calligraphic, but the font is not. So my question mark is monoline, but I’ve added some curl to it. It has angled terminals similar to the S, and the bottom has a bit of curl, rather than just coming straing down.

Due to these stylistic decisions on the question mark, I’m unable to combine it with an exclamation mark to make an interrobang. This is probably okay, as it is a rarely used character, and certainly not one likely to be seen on protest posters.

[fusion_imageframe image_id=”2201″ style_type=”none” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]http://staging.quakercreative.com//wp-content/uploads/2017/12/Punctuation-pt3-questexcl-02-1024×640.jpg[/fusion_imageframe]

Inverted Marks (¡¿)

The inverted question mark (¿) and inverted exclamation mark (¡) are simply question and exclamation marks rotated 180 degrees. Some typefaces sit them on the baseline, and some align the dots with the x-height. I’m choosing to do the latter.

Comma (,) and Semicolon (;)

The comma (,) is the width of a period, and has a left–facing tail hanging below the baseline. The tail should be at least as long as the dot is tall. If the tail isn’t long enough, then at small sizes it looks too much like a period. The only time it’s permissible to have smaller tail size is when it’s a display font meant for larger sizes.

The semicolon is just a colon with a comma in place of the lower dot.

Up Next

I’m taking a break next week for the holidays, and the blog will be back the following Tuesday. Thanks!

  • Punctuation
    1. § ¶ † ‡
    2. * # – – — _
    3. . , ; : ! ¡ ? ¿ ‽ … •
    4. ' ‘ ’ ‚ “ ” „ ′ ″ ‹ › « »
    5. / \ | ¦ ( ) [ ] { }
  • Mathematic Symbols
    1. + − ± × ÷ = ≠ ≈
    2. > < ≤ ≥ % ° ⁄
  • Diacritics

Posted

in

,

by

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.