Work Book a call

JM Design

A JM monogram: a tall serif J that leads, threaded through the M and cut where they cross.

01 The mark

Two letters, one mark: the J leads, and the M works with it.

J
The lead. Taller than the M: it rises above the M's cap height and drops below its baseline.
M
The frame. Its thick diagonal crosses the J, and the J is cut where they meet, so the two letters read as one.
JM
Jayson Mercado. My initials, as a mark calm enough to sign my work.
Project
Personal mark
Role
Designer: monogram and personal brand
Deliverables
Monogram, Construction and clear space, Usage rules, Logo reel
Tools
Illustrator, After Effects
The final JM monogram in black on cream: a tall serif J threaded through an M. The final JM monogram in cream on black: a tall serif J threaded through an M.

02 The brief

My personal brand needed a mark of its own: two letters that read as one, clean enough to work as a favicon and an avatar, and calm enough to sign my work.

03 Construction

Screenshot from Adobe Illustrator: the final monogram selected with the Direct Selection tool, every anchor point showing, on cyan guides at the top of the J, the M's cap height, its baseline and the bottom of the J.
The final monogram in Illustrator, every anchor point selected. Four guides hold it: the top of the J, the M's cap height and baseline, and the bottom of the J.
Screenshot from Adobe Illustrator at 400%: the M's thick diagonal passing over the J, the J cut into two pieces on either side of it, with anchor points showing.
At 400%: the cut. Every letter was offset, then the J was cut with Shape Builder where the M's thick diagonal crosses it, so the M passes in front.

04 Typography

The monogram on four faint guides: high-contrast capitals with fine serifs. The monogram in cream on black on four faint guides: high-contrast capitals with fine serifs.
Serif J and M A light titling serif: capitals only, calm and classic, with strokes thin enough for the cut to read. The J is set taller and dropped below the baseline, so it leads.

05 Colour

  • Black #0B0B0B The mark on light grounds, and the dark ground.
  • Cream #F5F1E8 The light ground, and the mark on dark.
  • Gold #BAA56B The mark on black, for special uses.

06 Usage

Screenshot from Adobe Illustrator: the monogram inside a pale gold clear-space zone with dashed edges and cyan guides, a grey square marked x on each side as the unit, and black labels: clear space x = half the height of the M, top of the J, cap height of the M, baseline and bottom of the J.
Clear space is x, half the height of the M, on every side, at whatever size the mark is used. The grey squares mark it; nothing enters the gold zone.
  • The monogram in black on cream.
    Black on cream
  • The monogram in cream on black.
    Cream on black
  • The monogram in gold on black.
    Gold on black
The monogram at 128, 64, 32 and 16 pixels tall, each labelled; 16 px is marked as the minimum. The monogram in cream on black at 128, 64, 32 and 16 pixels tall, each labelled; 16 px is marked as the minimum.
Never smaller than 16 px tall, the favicon size.
  • Keep clear space equal to half the height of the M on every side.
  • One colour at a time: black, cream or gold.
  • Never outline, stretch, recolour or add effects.
  • Use the official file; never retype the letters.

07 In use

  • Mockup: the monogram as gold dimensional letters on a charcoal meeting-room wall, above a wooden table and black office chairs.
    Mockup: gold dimensional letters on the wall.
  • Mockup: a black business card on a warm beige ground, the monogram printed in gold and embossed.
    Mockup: a black business card, the monogram printed in gold and embossed.
  • Mockup: a frosted glass sign plate on four steel standoffs with the black monogram, on a pale wall.
    Mockup: a frosted glass sign plate.
  • Mockup: a laptop showing this portfolio's home page, the monogram top left in the header above the name Jayson Mercado Erboila.
    Mockup: this portfolio, with the monogram in the site header.
  • Mockup: a stationery set from above: a cream letterhead, a DL card and a cream business card with the black monogram; a black business card, two black envelopes and a black mug with the gold monogram.
    Mockup: letterhead, cards, envelopes and a mug.

Photo mockups made from free Mockups-Design.com templates, with the final monogram placed in Photoshop. The laptop shows this portfolio.

08 The reel

The monogram built in Illustrator, then animated.

The reel shows the build: the J and the M drawn, offset and cut where they cross in Illustrator, then the finished mark flashing over black-and-white architecture before it settles, small and still, on black.

Back to top