1. 13
  1.  

  2. 9

    About underlining links, it may be useful to stick to conventions. Practical Typography makes links hard to spot, I don’t think this is a good idea to follow their advice. We have now more control on how links are underlined, notably the width and distance from text. Also, most browsers are now able to skip the descendants when underlining (which makes underlining quite OK visually). Also, sticking to standard underlining allow you to have a different color for visited links and not visited links. See https://www.nngroup.com/articles/change-the-color-of-visited-links/ for details on this.

    1. 2

      Agreed, links are extremely difficult to fathom on Practical Typography.

      Underlining may not be done thing in print, but on the web it’s synonymous with links; that’s why I decided to keep them.

      People expect either different colour text, underline, or both. So I stuck to convention on that one.

      1. 1

        Agreed. I like to sometimes drag my mouse over lines when reading the text and there were non-trivial number of times where I pressed on a link by accident while reading “Practical Typography” without knowing my cursor was on a link. It’s fancy but I think a poor design choice. And the separation between internal and external links is quite inconsistent.

        Personally, when it comes to hyperlinks, I don’t like them at all. When reading I typically check maybe 1 out of 100 or so hyperlinks, maybe less. Which is disproportional compared to the distracting effect they have. There seems to be no trivial way to mark them without standing out. I don’t even like underlines. The old fashioned approach of having a list references at the end is what works best for me.

        1. 1

          I am also distracted by texts with too many links. On my website, I only use color for the underline, not the text (something supported in most browsers now). I am keeping blue for the color of underline when not visited and I use black when visited. On hover, the text color is changed to highlight them and purple is used for visited links.

        2. 1

          On my site, I do it like wikipedia does: links are coloured blue, and underlined only when hovered. They are easy to spot, everybody understands they are links, and they don’t make the text ugly.

        3. 4

          It looks really nice, well done. But I would like to leave a few comments and thoughts for discussion:

          1. There are two schools of thought when it comes to fonts. One is your current stance, which is to serve fonts for best user experience. Another one is to set fonts to default (i.e. serif for text, sans for headers) and let user see their preferred fonts instead, also for best user experience. I haven’t chosen a side on this, but both sides seem to have a compelling argument.

          2. Having a truly stunning style takes a lot of work and design experience. So much so that it made me gave up trying. Here is one such example: https://harvardlawreview.org/2020/05/united-states-v-hill/

          3. Playing with typography is fun but the process can stuck in a state of constant flux. It’s like changing fashion. From my experience - you change it one day. Enjoy it for a week. But after a week you get bored of it and then try making adjustments again. And not because there was something wrong with the original way, but because your sense of what is interesting/beautiful changed during that time. Mostly, again, out of getting used to new look and getting bored of it.

          4. You mention that having narrower width is preferable, but I think it is not as hard as a rule as people sometimes claim it to be. Some types of content are better presented as wider text blocks. Here is one example I have in mind: https://daniellakens.blogspot.com/2020/05/red-team-challenge.html . I think narrow column works really well for text only. But if you have a lot of code blocks or math formulas then it can get quite jarring. For example there was a recent post: https://krasjet.com/rnd.wlk/julia/ . The typography is nice, many people praised it, but for me it seems to be applied to the wrong type content. I would much prefer this to be written with smaller letters and in wider style. While reading it I constantly wanted to look up at some previous example and needed to scroll up and down. Also, if the text is too small I can always zoom-in. But if it’s too big I cannot as easily zoom-out.

          5. Related to the above - the form a text is written in also demands a certain reaction. For example, when I read something written in the style of a Medium post I cannot help but think of the material as shallow. This is likely because reading hundreds of Medium posts left me with that impression. Conversely, when I read something written in the style of the example provided above, I take it more seriously. And LaTeX type documents or even pages like this one: https://fmwww.bc.edu/repec/bocode/t/transint.html appear most serious to me.

          6. Regarding your new look - only one criticism: a lot of paragraphs seem to contain single sentences. There are a lot of new lines, very few bodies of text. Everything feels disconnected.

          1. 2

            This is a great comment, thanks for the feedback - more food for thought.

            I’ll take the disconnected paragraphs on board too, appreciate the constructive criticism. 👍

          2. 3

            I’m personally not sold on the #333 color thing and am not sure there’s any actual justification for it. The best one I’ve seen is by going a little off black, it keeps the option open to use pure black somewhere else for additional special contrast. Seems reasonable… just every time I see the #333 text (which is a lot, ugh, including right here) the text just looks a little washed out.

            Perhaps has to do with my preferred lower monitor brightness setting. idk.

            1. 3

              I read in multiple places that black shouldn’t be used, but it was only Practical Typography that gave what I get was reasonable context as to why:

              Consider making your text dark gray rather than black. Unlike a piece of paper—which reflects ambient light—a computer screen projects its own light and tends to have more severe contrast. Therefore, on screen, dark-gray text can be more comfortable to read than black text. That’s why many digital-book readers let you reduce the screen brightness or change the text color.

              https://practicaltypography.com/color.html

            2. 2

              My eyes thank you! I think you’ve done a great job with it and I wish that more writers and site owners would take the time to learn about something which I consider pretty fundamental. I also agree that underlining links is generally a good idea, I just wouldn’t leave them at the default as I do think in most browsers it tends to be a bit tight. But underlines for links is pretty universally understood so I think it’s worth it. The way you’ve done it seems fine to me.

              Also, are you aware of units like ch? They can be useful for setting the line width and other similar things (grid columns, etc.).

              1. 3

                Thanks, I appreciate the kind words. 😊

                I am aware of ch, but I’ve never really used it. I always use either px or vw for setting the width. I’m an easily confused, simple man haha.

              2. 2

                You have created a great article Kev, I knew I was going to find it here after reading it on my RSS reader.

                I have read almost all the info you have in your post but in differente places, you have put all that info together and available with just one click. Good Job.

                1. 2

                  Thanks. 😊

                2. 1

                  Strangely all hyperlinks on that article are underlined for me in mobile Safari

                  1. 1

                    I still wanted a way of highlighting links within my posts while injecting some colour. So I decided to add a fun animation that swipes a background colour behind my links when they are hovered over.

                    Technically, my links are still underlined, but I really like this design so I’m going to stick with it. 🙂

                    1. 2

                      This reminds me that I only recently learned of the styling restrictions on the css :visited pseudoclass. My blog used forbidden styles (italics visited links) from before the restriction was imposed, and were broken for a long time and I only noticed in the last month or so.