Guides (like the ones in Adobe CS) for browser or Mac OS for precise text alignment?


I am styling a site with a lot of helvetica text of different sizes and lots of white space. it’s very minimal and serene. But I really need the alignment to be perfect to make it work. Can people point me to any browser extensions or Mac OS features that work the same way that Photoshop guides do. I don’t want a whole opaque grid over my site like so many of these extensions offer. It is an unnecessary pain to configure, typing in all the values so that it all lines up just right. It also unnecessarily obscures the view. I just want drag and drop guides like photoshop, in my browser or mac OS or something. Please Help.


No, sorry I don’t know of any. I know you can get bookmarklet background overlays for the browsers with grids etc but I’ve never used any of them.

Maybe someone else can comment.

I don’t know of any plug-ins either, unfortunately. If you can’t find a handy plug-in to use, you can always take screen shots and pull it into Photoshop. I know it’s a pain, but it works. =p

You could also figure out where all your guides should be and then make a transparent image with the lines for the guides on it. Then do an absolute positioned div and put it over top of everything. A bit manual, but may help if it’s really necessary.