Bezier Curves for Cowards

8/12/2019 Bezier Curves for Cowards

1/7

14

e best placement of Bezier points is at themost extreme edges of the curve: the 12, 3, 69 oclock positions. A tudy of the point placement 'in any well-drawn font will demonstrate this truth.Points in extrema (Latin , I guess) enable easiertweaking or point editing to ensure the smoothestand most agreeable curves. Equally important,points in extrema improve autohinting andPostScript interpretation of our fonts .

Whenever we are drawing in. Illustrator or Fontographer,whether pictures or letters,we should ever attemptto place all points

t I(But sometimes, darn it, you just gotta place

an extra point or two along the path to achievethe you 're wanting.)

ellipses have long bezier handles .

The straight side of aOIrveshould not have a bezier

How do I find the extreme position? Enlarge your view of astroke, or ascan

you are tracing, to see the bitmap rendering .The extreme point s where the stairsteps evel out.

The very center of the straight part s where the point goes.in extrema and keep all handles orthogonalstraight. vertically or horizontally) by holding

down the Shift key as we drag them away fromeach new point we draw.

If we are not drawing a fon t. the extrema rule isnot absolutely essential, except. as mentioned , itmakes curve editing easier.

Some designers may assume, incorrectly, thatusing more points guarantees better rendering ofletter shapes in printers and on-screen. Actually,the fewer points the better, so long as the extremarule is observed. Fewer points usually also meanssmoother curves.

I ve seen many commercial fonts designed onnow-outmoded font creation software, containingtons of extraneous points. Sometimes the processof converting a font to True Type causes extrapoints to be added. Autotracing from scans alsoplaces too many points and puts them in thewrong positions, i.e. not inextrema. Such fonts cangive the wrong impression about point placement.

continued on opposite page)

Small ellipseshave shortbezierhandles .

A oint thattransitions froma arge OIrve to

Left encompassing devicebelieved to have been used totorture early lettering scribesinto revealing trade secrets.

asmaller one willhave one handlelonger than the other

Drawing Type NEW S HOOL


2/7

1. Pretend we want to tweakthis S left, so the shapes ofthe inner curves match theblue-shaded letter in thebackground. Just look at howmany points we ' ll have tomove while still attemptingto retain smooth curves.

3. Here's that again-This time,with points in extrema. s we drageach bezier point to its new position,the resulting curves will remainbeautiful, requiring only minor ad-justment of handles.

In 1990, when we had 80MB hard drives and 16MB ofRAM , too many bezier points may have contributed to ageneral slowing up of font load ing or pr inting, but now,if you use too many points, it really doesn 't matter.

Except as previously mentioned: Points in extremamay produce better hinting for viewing fonts oncomputer monitors and the web . Hinting is the mannerin which a letter arranges itself into stairstep pixels on-screen. Some conscientious designers edit hinting toensure their fonts look good in all sizes and situations.But I'm told that other reputable designers never botherwith hinting. Personally, I couldn 't care less abouthinting because Idon 't consider the appearance of a fontat l1-point size on-screen, on the web or coming from a300 dpi laser printer a true end use. You may very welldisagree. In print, a font will look only as good or bad asthe designer designed it.

Which of these setsof letters left wouldeasier to tweak?

These threepoints weremarqueed andmoved as agroup, whichsaved time.

1. left, first steps have been takenby dragging po ints to the edges ofthe background S Next, the bezierhandles will all have to be adjustedto make the curves smooth again .That's work But could we get awaywithout bothering to fix the points?(Hey, most users of our font willnever notice the rough edges.)

4. Left the points at a and b havebeen dragged to their new positions.Arrows show that resulting curveshave remained nice. Right, points cand dhave been repositioned. Onlythe point at d will have to beslighdy tweaked by raising the lowerbezier handle abit

4

lIeIe's tUt..I-step l t11 4....01


3/7

42

tThe handles of points in extrema should bepositioned perfectly straight either vertically orhorizontally. When making an ellipse , any Ellipsetool will place points correctly, but when wedraw curves with a Pen tool , we must hold theShift key so handles stay level , a, or plumb, b.

Handles can be dragged up for a squarish ellipse.Illustrator's and Fontographer's Info pallets shownumeric point coordinates so bezier handles onall sides of a symmetrical curve can be madeexactly the same. Or, Reflect-Copy quadrant a tocreate b, then Reflect-Copy a and b o make c.

By extending bezier handles ridiculously, one caneliminate points such as would properly appearin he 12 oclock positions on the inner and outercircles above . But not only will most curvedshapes suffer from the omission, the rendering ofour fonts on-screen and in print may worsen.

When properly drawn , the two point handlesbordering a constant curved path, such as a, b,should always be the same length to equally bearthe burden of the curve. Sure , we can still , moreor less, achieve the same curved shape with anarrangement like c, d, but it is not ideal.

Rotating the counter, or center hole, of thegives a keen, old-fashioned look. But it requiresmoving the positions of the points back toextrema . In Illustrator, this may be done man -ually, or if making a font , Fontographer's CleanUp Paths filter will do it automatically.

The world won 't explode if points aren t inextrema and handles are crooked. If we 're notdrawing a font , points need be in extrema onlyfor ease of curve tweaking. Notice that when weangled the handle: above , the extrema posi tionshifted from a o b, where the point ought to go.

c

In most lettering styles, the two adjacenton inner and outer curves, such as a, b, or c, dshould always be in alignment with each other. Ina symmetrical letter like above, all four sets ofextrema points should be lined up horizontally orvertically with the center axis e.

.d

e'Notice, above , that the handles of the inner ellip.sepoints, such as a, b, are no longer the samelength, and that the angles of inner and outerpoints like c, d and e, f are in alignment with eachother and in oppositional symme try with thepoints on their adjacent sides.

_ e...-:c

So, do try to place all points in extrema and makeall handles straight up or down . But these rulesdon 't apply to corners (a), straight lines that arediagonal that transition into curves (b), and theoccasional extra point (c) that may be the onlyway to achieve just the elusive curve we want.


4/7

DRAWING wit BEZIERS7-8. Shift-click points toconstrain them straight.6. Click point. Drag out han-dle toward left-always in thedirection we re heading. Clickprodigal handle to kill it.

9. Shift-click point, drag outa ong handle. Drag left sidehandle back into point.

10. Click point at 30 clock, nowhold Shift, drag out (and keep) twohandles to make asmooth po nt

5. Shift-click the point. Pull handle up-ward. Drag prodigal lower handle back intopoint and proceed to next point.4. Click the point, hold down and drag ahandle upward . let up mouse , again clickthe point. The prodigal handle disappears .This is away to kill off an outgoing handle.Straight path segments don t need handles.3. Again, Shift-click the point to constrain(force) it into perfect horizontal alignment.with pointL Keep Shift down and don t let upon click until you ve dragged a hort bezierhandle toward the right, away from point. Aprodigal (unnecessary) handle emerges alsoon left. Press 3 to toggle to the White Arrowtool. Drag left handle back home to point. Thisis a ransition po nt (from straight to curve).2. Hold Shift key as you click (Shift-click) sothis next point is forced into perfect verticalalignment with point 1.I. Draw points in clockwisedirection. Read captions from

bottom up . Click first point.

Usually, we draw lettersfollowing the sha es Of

scans of rough etchesplaced on templatelayer ofud benuththe Working Iapr. eege 158 11 tracing scans.

PS: Note the extra-long handles betweenpoints 24 and 25 . Thisarrangement createsagently rounded ,pointless, virtualcorner.

II. Click point (not with Shift key) , drag handle toward left,angling it to match curve of bowl. Click point again to deletethe prodigal left handle . Option-click this same point and draga new handle out, but in the

direction of the leg ofRThispoint is now a corner po ntwith beziers12. Click point, drag shorthandle to the right. let upmouse. Hold Shift and dragthe left handle wide until theagee curve between points12 and matches the scan.13. Click point, draghandle up . Click again tokill it, adjust lower handleto achieve desired curve.

14., etc. Problem :caption spaceis no more. Reader must leave nest, flyon own wings. Remaining steps willfollow same four point models asalready explained: corner, transition,smooth wit beziers, and corner withbeziers. Go it, then? OK , proceed .

FAD Bezier Pointers

Why do I get weirdbumps in my curves?Always drag the handle in thegeneral direction your curvedpath is heading, or at leasttangent to the curve. Begin-ners always start wildly spin-ning handles, a. Or you mayhave a comer point where asmooth one should go, b.

0 0

How long should abezier handle bedragged out?A andle should extend aboutone-third the way to the nextpoint. Don't make one handledo all the work; both mustshare the curve. After youfinish drawing a path, you'llgo back to adjust all handles.

Which of the twohandles bordering acurve do I adjust inorder to get the curvethe way I want it?After a while you'll thefeel for it. Usually, adjustingboth handles-perhaps onemore than the other-isrequired to perfect the curve.

Points are in extrema,but the #@$ curvewon't do what I want.Just because a point is in ex-trema doesn't mean it's ideallyplaced in space. Above, whichpoint, a, bor c, will give thedesired curve? Also, try addinga point between the stubborntwo, or tilting point handlesout of square (just this once).

What should I doif the point don twork 'cause thevandals took thehandles?Iget the feeling that someof you just aren't taking thissubject seriously enough.


5/7

Can a segment of acurvebe scrutinized out ofcontext and still be

deemed good or bad?Yes .And when everyrurved segment of everyletter possesses a rhythmic

beauty unto iuelf-aswell as in context with thewhole-we can be surethat our lettering is gonnalook right. It takes agoodeye and practice, and with Jim Parkinson and Jonathan Hoefler are two type designers who do abet-

beziers, it also takes ter job than most at finessing rurves. The examples above are entirelylots of patience. without rudeness or lapses in artistic judgment. This, Ibelieve, is the goal.

I read somewhere that, whereas we can usetools to mechanically construct a letter, thereare sure to be places where we ve no choicebut to draw a certain portion by eye. I'malways amused to notice those places wherethe logic of a designer s geometric structurebreaks down, as in the letter fragment above,with non matching perfect circles on whatshould be identical corners, and the bluntedcircle in the counter that totally breaks style.

Above, although the two sides of this serifcannot, of course, be identical, they ought toappear to have once been a matched setprior to italicization. Instead, these serifs areof different parentage, and they re justugly curves, besides. For starters, itwould be an improvement if both bezierpoints , at a- b, which transition from thestraight stem into the curving serif, had beenplaced at the same height.

----

Above left, a piece chopped off a script letter from a major foundry.Aside from ugly, lumpy curves, the lines of the stroke don t followthrough as they loop around. In the designer s defense, I will admitthere s nothing more difficult than rendering delicate scripts. And Icertainly was reminded of this as I tried to improve these curves,above right, which are now reasonably beyond reproach .

Above left, the outer curve of the hump is awkward but acceptable.The inner curve, however, is obviously flawed. y corrections in theversion , upper right, consisted mainly of making the inner curve echothe arc of the outer as if made by a single brushstroke.

Often a curve is good or bad relative only to its opposite side. Eitherinner or outer could be good , but paired as opposite edges of onestroke, they don t properly relate. We must choose, then, which curveto fix so the two flow as one . At a, we see the original portion of aletter whose curves I don t like . At b, the outer curve is isolated tobetter scrutinize its very subtle bumps, flat spots, dips and corners.

At C the counter is isolated, and my shorthand notational systemindicates flaws in the counters curves. Basically, wherever we find abump , flat spot, dip or corner, we are sure to find bezier pointsplaced out of extrema, with handles poorly adjusted. At d, the innercurve has been fixed , the outer left alone. True , if you saw thesecurves in awhole-letter context, hey might make more sense. Or not.

At e, both sides of the curvehave been designed to flowsmoothly and work together.This was fairly difficult for me tocorrect and that s the point: Ittakes time to make good curves


6/7

IEZIERRORSa b

I created this pathetic H o demonstrate Bezierrors. These arecommon errors that the major font foundries consider unac-ceptable. Some of them are rendering mistakes that we all commit,and others are problems inherent in Adobe Illustrator or resultfrom the way in which our computers render our work on-screen.

Above, another straight-to-curve path was intended, but the bezier handle atthe 3 oclock position overshot the top line of the letter, creating a humpbefore the curved segment hitches up to the straight one . Ideally, the 12oclock point (the top one should carry half the bezier burden by having ahandle of its own . This handle would push the line in the direction it facedthereby-most likely-avoiding the hump, though another hump could occura little farther down path, if the 3o'clock handle still jutted too far up.

Instead of being straight and smooth as it should, the lower handle ofthis point changes direction from the top handle, proving that it s acorner point which has no business in the 3o'clock position on the bowlof this H Bezierrors such as this one often result from letting a drawprogram autotrace from a scan. Autotracing, as we explain on page 159,always requires an enormous amount of reworking before the paths canbe considered acceptable.


7/7

When s a ine not a ine? When it sajar. There s nothing more annoy-ing than seeing slightly off-straightstraight lines . Most of the time , youcannot successfully correct this bymanually moving a point to levelthe line . t may be because the lineisn t a line, it s a bunch of pixels and our monitor screens have to decidewhether to display them at level 24354647362562545 or at level24354647362562546, so they split the difference and you see one or twobumps in the line, indicating it isn t straight. Even when we drag down aguideline, the guide will snap some points right to it, and others above orbelow it. And you thought it was just that you were stupid? No, it happens toall of us. To alleviate the problem , always hold the Shift key down whiledrawing a straight vertical or horizontal line. But if you notice a path scrooked, you can select the points at both ends and go toOBJECT>Path>Average , then choose the Horizontal (or Vertical Axis radio

The top Bezierror at g s use of tw points where only one s needed. Thisusually results from Uniting tw or more parts, especially if the parts are notprecisely aligned to one another before going to Unite. It is sometimesadvisable to use double points (though not atop one another) to terminatea long, sharp pointed shape (inset) so that it doesn t either dot-gain ordisappear on press at small point sizes. The bottom Bezierror at h s straypoints : vestigal points that serve no purpose and must be deleted. Go to

. EDIT>Select>Stray Points, then delete, or select manually and delete.

button. Another path-straightening technique I use often s to draw arectangle on top of a crooked line segment and use Subtract From ShapeArea to chop off the crooked part. I demonstrate variations on this tech-nique in the Type Tix section (pages 166-193). But there s a larger issuewith regard to straight lines that keeps me up nights worrying . Thequestion s whether or not infinitesimally crooked lines matter. For example,what if the builder didn t perfectly square up the walls of your house?Chances are, you ll never notice it. likewise , with 9-point or even 96-pointtype, will a slightly crooked line or two be perceptible? In any event, wemust endeavor to make all vertical and horizontal lines truly on the level.

Here is a perfect 90 corner point.. .with bezier handles. Why?This pointshould have no handles. It seems that with the two most recent versions ofAdobe Illustrator, the program has begun to add these unnecessary handlesto the corner points of straight paths when Outline Strokes s used to turnstrokes into filled , closed-path objects . Handles make it impossible to dragfrom the middle of a straight line segment, as can be done when no handlesare present on either end of the line. Click once with the Convert AnchorPoint tool to remove handles from apoint.

49

Documents

Bezier Curves for Cowards