About Dave on Design

https://daveon.design/about-dave-on-design.html

by susam • 3 years ago

19 28 3 years ago

alxmng• 3 years ago

I agree typography could be a lot better on the web, in general.

I wonder if the author has thought about their use of bullet lists containing paragraphs and article headings. I think both the main page and linked article would look much better without them.

If it’s a paragraph or heading it doesn’t belong in a list, IMO

manuelmoreale4• 3 years ago

One of the stated goals was "Be light" and yet the author managed to make a 1.2Mb page for what is just text.

Another one is "Beautiful typography" and yet there's a justified text without hyphens that creates some atrocious spacing.

This site has incredibly good intentions and plenty of room for improvements.

kybernetikos• 3 years ago

I agree that the justified text isn't always creating good outcomes. This is particularly true with the margin notes. I like margin notes, but when there's a lot less horizontal space to play with, the justification can cause some really awkward spacing issues.

All of this somewhat undercuts the sentence spacing argument. I think sentence spacing is interesting, and I agree that it should have had more support from css and html, but if your word spaces range from tiny to enormous and vary on each line, it's hard to even really see the sentence spacing.

manuelmoreale4• 3 years ago

Yeah the side notes are especially painful and they become really hard to parse with those gaps.

As for sentence spacing, I honestly don't understand what the goal is here. Especially because in this case the sentences are all wrapped in spans and then are not spaced at all.

The only spacing is between p so why bother doing the whole sentence wrapping.

gwern2• 3 years ago

Yeah, I highlighted those (and most of the other points in the comments here) last week in my critique: https://news.ycombinator.com/item?id=36625742

Presumably Dave just hasn't gotten around to it - that's how personal sites are, they fit only into the cracks of one's time-energy. No one to report a bug to but yourself...

502• 3 years ago

re: your site, don't you think the standard for epigraphs (and quotes in general) should be non-italicized, i.e., left to how they were originally written, with or without emphasis?

manuelmoreale4• 3 years ago

Personal sites are a tricky beast. Especially if you’re someone who’s obsessed with details. I spent way too much time on mine but to get to a point where I was happy it took me years. So I’m sure Dave will get there eventually.

beezlewax• 3 years ago

Yeh justified text reads horribly almost always online. It has it's place but doesn't work well here in my opinion.

bradrn3• 3 years ago

… forces use of ‘house style’ by adding dipthongs in words like ‘encyclopædia’

Nitpick: firstly, it’s spelled ‘diphthong’. Secondly, ⟨æ⟩ is a ligature, not a diphthong (at least in English). Diphthongs are sounds made up of a smooth transition from one vowel to another, so I can see what caused this mistake… but it’s a little jarring to see the term misused in an essay about typographical conventions.

esquivalience• 3 years ago

In typography the term diphthong also. Means the character itself - "a digraph representing the sound of a diphthong or single vowel". I can't speak to the possible typo in the word itself, but I believe it might be a old spelling of the same word.

bradrn3• 3 years ago

All I can say is that I’ve never seen this usage before.

zvr• 3 years ago

No, it cannot be an old spelling, since it comes from Greek: an initial "di-" (δι- from dual, two) and then phthong (φθόγγος, voice). So the two initial letters of the second part are phi and theta.

euroderf2• 3 years ago

Some words (and maybe with British spelling) look unearthly this way. Manœuvre. Diarrhœa.

bradrn3• 3 years ago

But that’s ⟨œ⟩, not ⟨æ⟩. They’re different letters.

adrianmsmith• 3 years ago

The site claims to be using https://fonts.google.com/specimen/EB+Garamond but something has gone wrong with the italics (at least on my screen), they are just an oblique version of the roman version of the font, whereas the Google Fonts page has a much nicer actually italic version (e.g. compare the lowercase h on the Google Fonts page above vs the linked page).

the-printer2• 3 years ago

I’m seeing the same thing. Sorts Mill Goudy also comes in a single weight and it looks like the author is forcing CSS font-weight values beyond 400 for their headings.

Off-topic: I think UX blogs give me the heebie jeebies.

manuelmoreale4• 3 years ago

I think UX blogs give me the heebie jeebies.

Interesting. Why is that if you don’t mind me asking

quadral• 3 years ago

Why is it every time I visit a blog which focuses on UX design, there's always an article which talks about Windows 95 dialog is superior than modern dialogs.

Not everything needs to be black and white and uniform.

snide• 3 years ago

Saw this and laughed. While not entirely the same, I made a website with similar goals earlier this year. I am another Dave, another designer.

There's a funny part about being a web designer and then having to build your own site. You sort of want to drop all the bullshit, and just focus on typography and spacing. No color, no tricks, just simple stuff. It can be surprisingly hard.

I went with Astro, which I think is much better for this kind of thing, and let me write very, very simple HTML + CSS with only a small bit of JS.

https://www.davesnider.com

j_crick2• 3 years ago

The way paragraphs and lists are wrapped around big letters doesn’t look like beautiful typography to me: https://imgur.com/Yc7pkss unless it is trolling and I can’t comprehend tongue-in-cheek humour there. Well, anyway...

petercooper• 3 years ago

I can't speak to the OP's particular use of them, but initial capitals are a long standing typographical feature: https://en.wikipedia.org/wiki/Initial – CSS even has a ::first-letter pseudo element to help style them.

j_crick2• 3 years ago

Yes, but then maybe some thought should be put by author into lists behavior around them on devices that aren’t phones? Just maybe...

davetron5000• 3 years ago

The typography is almost great but it full justifies all text (at least on mobile) which looks horrible. Web browsers have limited hyphenation and don’t do any kerning or other adjustments (like hyphenation) to make full justified text look good like it does in a book.

502• 3 years ago

i'm of the stylistic critiques that (1) one should resort to using one set of alternates (a letter or word) per page at most, if the conditions are appropriate for using them at all, and (2) opt out of the typographic convention of side/margin notes in favor of the traditional[1]: footnotes, captions under figures, navigation, if necessary, at the top of the main body, etc - hyperlink references exist for some of these reasons. but otherwise, i recently came across a neat eb garamond alternative: tribute by frank heine[2]

1. my non-designer peculiarity: by using side/margin notes, by factor of them being in the peripheral of the main text and therefore it's imposed cognitive addition to the reader, one is already, implicitly, making the claim that the side/margin note is a must-read, which, in that case, one might as well incorporate it in the main text

2. https://www.emigre.com/Fonts/Tribute

strogonoff• 3 years ago

Typography tips:

Don’t separate a paragraph by both indenting the first line and also adding top margin.

Don’t use both increased font size and bullets to emphasize a paragraph.

(The above are special cases of the same general rule informally known as “pick one”. Another special case of the same rule is why we never use multiple factors, such as font style and font weight and color and underline, simultaneously to emphasize a span of the text.)

Unless you are careful about hyphenation, don’t use full justification unless your lines are sufficiently long to avoid awkwardly large word spacing.

(No one is going to notice your fine-tuned sentence spacing and other flourishes of typography when word spacing is so annoyingly inconsistent from line to line.)

About Dave on Design

Related Stories