Dont center text

I began this chapter talking about the importance of patterns and alignment. Centered text violates our need for pages with obvious alignment, clear places where different types of text start.

Compare Figures 7-13 and 7-14. Figure 7-13 is the original, a pathway page from a university web site. Figure 7-14 is a revision, where the only difference is moving from centered text to left-aligned text.

Text with each line centered is hard to read.

Our eyes don't know how far back to come to start each new line.

Health Benefits


ünestions about Clunaas in Ccm.raja Retro Ai)|usnn«ii;

Conlinuaurm nl Insnranre flnvaraga

Ittsnrance I iloim.ili tu ' i Regulin Etnplciye«

Jül» 1 2)05 tu June 30 2006 Btnttils Eüokln Julv I MK imune :<l JOBS Benilili Baus Comnarisün

Ii m ■: i r, ■ 1111.i i r >11 n i, for1 I' i. .i" i II Eiuf>loye#4

Cimmimm II Fmi.lm«5 ftentiH Inhimainn Crmlmqant II Helllh Insunn« Piemiurr Rai«

B&nefits Plans

Information CHinm nc the bmAi iri cos! of Ihc • stein; plant offiatad by Lhe 'ii.vii I •

ClkDosiiiy Hl« Rlyln Plan I 1 Y011

Mafylanrf Hnallh Cara Commitarna

Mtaii Um 111 diu Iii friili 'iiiiki ■

Retirement Planning and Programs

STATE-SU PPORTCD ««Ironien: Plans

Maw Employees Cwasinn a Pnonm

Ma lyl -,.l« liu'u enenf and l ot 11011 S, *, u 111

Sl«S RftlHirnnlPiSJiams Slate Retirement and Pensran System Handbooks

Optional Re Iii einem PI .ins tlplirmal firrnrajnenl Programs

Supplemental Retirement Annnl^ Pinns

SUPPLEMENTAL Relnemenl Plan» Planning tar Rm.amanl Informal icn about n lümirl t0iJ3i such as Imanciil planning. Choosing income options, social security anc bena'itL.

taxes and sal ale planning

Supplemental EBUremeiU "olail Info



July I 200S Jnire 30 3)06 Reliree Heallh Benenn a Enrollment Wotksheel Bilme Canum Prnnleqes

Figure 7-13 Centered text is harder on the eyes than text that lines up on the left. Don't center text.

The page is much neater f ^J and easier to use because the lines all start at the same place on the left.

Health Benefits


Nsw Fnrntl merits -tnangss in LQ.eiaoe

Retro AJl 1 jsrm fintq Banefits Appeal Prmess Continuation of Insurance Coverage hismtlncelirfoi [nation lot Retjitlai 1111111 yeas

Jutt-I. ja. JCpB SpffM^I

Jutyl MOäloJune }p ICnS Senate Raw r^nmnarisnn

Jlltv 1.1005 to Jung 3D. 20116 Buieswtlh 3uh?idies tnsmtinea InrfuiinjiiiriiTHM iL in nimjt rut > Employees

Continnenil H Fmnlnvesj Banelil Information Commflerrt 11 NtaHti insurants Premium Rales

Benefits Plans

Information concerning Ihe benefits and cosl of Ihe various plans offered byttra Unlwtsifc

Cftoosfcigthe Riijtrt Plan till Yuri

Maryland Hyalin , -i-^ Cqmml^glpn N ali.W.a I .r.Jir TOilf&'f"'fr.frU.MlTjI.-S

Relit em e 111 Planning .tint Proliant*

Terms YausnoulB Know

STATE-SUPPORTED Ratiiemeiir Hani tjg'gf.CT.'.CTS.eL-Cjaj'iifl.qii Platan

'.1:11,1.1 I Stmt Rem einent .mil Pension System

ReHrem^nl Prooram$ E1a1s Retirement a nil Pans nn Sv wm H anrtbnn k<i

Optional fteffr erneru Plans optional Relirern&nt Programs

SUPPLEMEHTW. Rjliremenl Plans


Information about reliremont Issues such as financial planning, ctrooaing income opIiDhs, social 56HJI.;. nnd medrcaie Peneti1 , tssres and eslate planning.

Retkees pgtirae B&nefit BooMel ■J^.L.fflllS.lg.JU"^ R^rB? Hjajh

BaneWs Enrallmeiil Works hgel RBtiraa ^amniKPrrjrlflntt

Figure 7-14 Text should start lined up on the left and end with the right margin ragged - wherever the words end.

I don't know why I see so much text on the web where each line is centered. We don't read centered text well. We expect each line of a paragraph or a related set of text to start at the same place on the left.

When the text is centered, our eyes have no "anchor" - no steady place to come back to at the start of each line. So centered text is much more tiring to read than left-aligned text.

Even menu items in a left or right navigation column are easier to skim and scan when they are lined up on the left. Indeed, column headings in a table work better with the items in the column if the heading starts at the left column edge rather than being centered over the column. Use left-aligned, ragged right for all your web content.

0 0

Post a comment