To produce the iOS 8 version, I opened the page in Safari on iOS 8.1 pinched zoomed to the maximum amount while keeping all five links within the frame, and took a screenshot.
To produce the SmartUnderline version, I visited the SmartUnderline install page [2] in Google Chrome on Mac OS X, entered the test page URL, and clicked “Preview in a separate window”. With the screenshot from my iPhone opened next to the browser, I used Command+[+/-] to zoom the browser until the font sizes were the same size, then took a screenshot.
Here are the results: [3].
To summarize, I believe iOS 8 has some advantages and some disadvantages, but to me there is no clear winner.
Some specific points in no particular order:
- iOS underline breaks are always vertical cuts. Since SmartUnderline uses text-shadow to “white-out” the underline, the cut-outs are in the shape of the glyph. To me, this looks better in the “g” in “eager”, but worse in the “q” in “quitting”.
- iOS 8 shows a line between a “g” and ”y” (as in ”piggy”) and SmartUnderline does not.
- SmartUnderline’s underline extends less far to the left of the first letter and right of the last letter. This looks better in “quitting” and potentially worse in ”discovery”.
- In general, SmartUnderline sets a little more space around each descender.
- Both implementations show no underline before or after a leading or trailing “g”.
- Both implementations show the underline very close to the left side of the “y” descender. I think improvements could be made here with both implementations.
[1]: http://jsfiddle.net/adamschwartz/hyyerbq4/show/light/
[2]: https://eager.io/app/eA9ULux0UOJP/install
[3]: http://postimg.org/image/nf9b2ahd1/ (@2x http://postimg.org/image/688ricy2v/)