I'm trying to force Illustrator to be my goto web design "raster" editor. Working in pixel preview is certainly the way to go but I've run into a problem. In web design there is no AA for boxes and edges/strokes and I wanted to replicate this in illustrator and eventually through the images I export to show my clients.
With AA on the edges look incredibly blurry but font is perfect (using crisp) and not representative of the final product if one were to design this in HTML/CSS.
With AA off the box looks much better but of course this turns off AA for the font regardless of what sharpness/smoothing option I choose in the Character dialog box.
I'm crossing my fingers here for a best of both worlds solution so I can have artwork without AA but fonts with AA.
EDIT: I did find a workaround - albeit not a very good one for dynamic content editing. I select the text and go to Object > Rastersize. I optimize for type and 72dpi and check transparent background to achieve this result below:
Still looking for a better solution.
Under Preferences, set up a grid with gridlines every 10px with 10 subdivisions:
Then, you can turn on View â†’ Show Grid and View â†’ Snap To Grid and all drawing actions will snap to the pixel grid.
With everything set up, when you draw or edit, it will be snapped to the pixel grid. This results in nice sharp lines, even with pixel preview on.
Strokes will only be sharp if theyâ€™re an
outer stroke, or if theyâ€™re a
centre stroke where the line width is an even value (2px, 4px etc).
Hereâ€™s a 1px inner stroke, center stroke and outer stroke with pixel preview on and off. You can see the center stroke looks bad.
If youâ€™d like an easy way to start with an inner stroke or a quick way to apply and inner stroke, Graphic Styles and editing or creating your own document templates can help.
Hereâ€™s Adobeâ€™s help page for graphic styles: - https://helpx.adobe.com/illustrator/using/graphic-styles.html