3 ms·
This is one of my most common annoyances on web, and I am glad more and more people are taking an interest. For those with an interest in a deeper understanding
by stuart78 11y ago
This is one of my most common annoyances on web, and I am glad more and more people are taking an interest. For those with an interest in a deeper understanding of typography in general, I can't recommend The Elements of Typographic Style enough. Web is still primitive in the way it handles a lot of this, but there are some shining examples out there. The New Yorker is my favorite of these. To understand why, find a text hyperlink containing a descender (g,y,j,q,p) and observer how elegantly it is handled.
http://www.amazon.com/gp/product/0881792128/ref=pd_lpo_sbs_dp_ss_1?pf_rd_p=1944687702&pf_rd_s=lpo-top-stripe-1&pf_rd_t=201&pf_rd_i=0881791326&pf_rd_m=ATVPDKIKX0DER&pf_rd_r=04FW8H29AX3XT11MQR1H http://www.amazon.com/gp/product/0881792128/ref=pd_lpo_sbs_d...
http://www.newyorker.com/news/news-desk/is-the-islamic-state-hurting-the-presidents-point-man-on-isis-speaks-out?intcid=mod-latest http://www.newyorker.com/news/news-desk/is-the-islamic-state...
- dfc 11y agoWhat am I supposed to be observering? In the image below my mouse was hovered over the last link. When the descender is largely perpendicular to the text, like p or j, there is a nice balance between what is below and what is above the underline. But with g, the most frequently appearing descender in english, the look is not as nice. http://i.imgur.com/IVOHfIg.png http://i.imgur.com/IVOHfIg.png
- Chris_Newton 11y agoIn their links and headings within the main body text, they use a technique based on text-shadow and background-image in the CSS to draw underlines that don’t clash with the descender shapes. (Look for attributes in the HTML starting “data-smart-underline”.) For whatever reason, they don’t seem to be using the same technique with the links in the area you screen-capped there.