6 ms·

It's all about typography

• webmaven 8y ago
  Nice! Thanks for sharing your research. Edit: BTW, this shuld probably be a "Show HN:" post.
  • lucagez 8y ago
    Thank you for your feedback! Sorry I am new to hacker news and I didn't know about that feature!
    • majewsky 8y ago
      It's less of a feature and more of a convention. Just put "Show HN:" in front of the title if you're showing your work, or "Ask HN:" if you're asking a question without linking to an existing article. For "Show HN", it's customary to only submit each project once. There is also "Tell HN:" but afaik it's mostly used by the mods, dang and sctb, to announce rule changes or new features.
• quickthrower2 8y ago
  Nice work. I'm always after some thought out opinion when choosing colors and font so I'm glad to see this.
  • lucagez 8y ago
    I am glad you find that helpful (:
• InGodsName 8y ago
  Imho biggest problem for creating SaaS experience is subscription management. I've been looking for a drop in subscription manager with support for manual payment/credit card/bitcoin But it seems no unified effort is being made in this direction. I wonder where i can find a community of SaaS builders
  • sksksk 8y ago
    I've had luck with Recurly in the past (https://recurly.com/ https://recurly.com/), I don't think it has support for Bitcoin though.
• bshimmin 8y ago
  This is great work! However, I would just drop the drop cap. I don't really think they serve any purpose on the web, and I don't think they work terribly well either (they're especially silly when a paragraph starts with a two letter word like "It", which on Medium they have both letters of as the drop cap: this may or may not be the correct way of doing it, but it looks ridiculous).
  • lucagez 8y ago
    Thank you bshimmin!
• open-source-ux 8y ago
  "I found myself always struggling for a basic set of rules to make a decent reading experience" This is an excellent talk on web typography that I think you might find helpful. It includes a series of easy-to-follow guidelines to help improve web typography. If the pace of the talk is too slow, you can speed up the video: https://www.youtube.com/watch?v=hbIZX6tE9JY https://www.youtube.com/watch?v=hbIZX6tE9JY
  • lucagez 8y ago
    Thank you! I will definitely check it out!!
• arc2 8y ago
  Looks good, I have some remarks though. Is making your blog look exactly like medium legal? If it is, isn't that a dick move though?
  • shanehoban 8y ago
    "Good artists copy; great artists steal"
  • lucagez 8y ago
    Well, this is a style exercise to analyze what makes good typography. Not an attempt to steal their style (:
  • anc84 8y ago
    Medium themselves did that to svbtle iirc, so they would have zero ground for complaining about someone else being a dick.
  • dmos62 8y ago
    I wish we'd presume, as a society, that everything intellectual is, at least implicitly, free to use.
• sureaboutthis 8y ago
  The problem is, you are talking about art. And art is in the eye of the beholder. There are plenty of people who will disagree with your opinion and chosen fonts. I like all the fonts you used but don't like how they're used in your example. So this becomes similar to a color palette site where someone shows a bunch of colors that you purportedly are able to use and are told they work well together. Until you use them together on your site and find them to be garish/boring/loud/goofy/amateurish/etc. Of course, this is why we have typographers and graphic artists. btw, if you go to real typographer web sites, you'll often read some groaning about Google fonts and you'll see that few, if any, use them for all the reasons they groan about them.
  • lucagez 8y ago
    I understand your point of view. However I am mainly a web developer but I often find myself doing also the design side of projects by necessity. So this is only a basic attempt to learn how to make things look a little bit prettier. BTW thank you for your feedback (:
  • jalfresi 8y ago
    "The problem is, you are talking about art. And art is in the eye of the beholder." Typography is Graphic Design, not art. The goal is usually to impart knowledge to the viewer. A legible message objectively aids in this. However, typography can tap the viewers knowledge for additional tone, for example, choosing era appropriate typefaces for 100 year old stories. If you are trying impart an emotion, then post-modernist graphic design may eschew legibility for emotive punch, in which I would agree that it is very much a subjective response, however, I would still argue that it is design, not art.
  • IAmEveryone 8y ago
    Art isn't about "looking pretty".
• JAdamMoore 8y ago
  I love how this guy takes the entire field of graphic design and simplifies it down to "cut and paste, bro."
• mattkevan 8y ago
  Matthew Butterick's Practical Typography is a great primer on all things typographical. https://practicaltypography.com https://practicaltypography.com
• anc84 8y ago
  > However using google fonts in your web projects is always a good idea as their cdn's are lightning fast (and they are free). No, it is not always a good idea. If you care about your user's privacy a single bit, you should self-host. Easily done thanks to https://google-webfonts-helper.herokuapp.com/fonts https://google-webfonts-helper.herokuapp.com/fonts
  • dmitriid 8y ago
    In addition to privacy, web fonts are often huge. In a project, we reduced our page size by a few megabytes by sticking just to one font with just three font weights. Most people will load several fonts with all weights enabled.
  • fabricexpert 8y ago
    Also SEO scores are impacted by external requests and page speed.
  • basch 8y ago
    Or use the fonts installed on their computer. Let me, as the client have some say in rendering things. In many cases, where absolute placement of words doesnt matter, font families are just fine.
    • detritus 8y ago
      Or let me, as the content provider decide how I'd like to display my content, that you're not paying for, thanks. You're more than welcome to make your on effort stripping that out after the event, of course.
      • stan_rogers 8y ago
        Using the bandwidth and batteries you didn't pay for.
        • detritus 8y ago
          haha, ok? That's a bit of an ambitious stretch towards a counterpoint, but I'll bite — You pay for the bandwidth you choose to consume (assuming you're on a metred connection), I pay for the bandwidth on the content I choose to deliver (assuming I run a server), but ultimately you choose what to consume — you have every right not to not even bother with my content and its gorgeous choice of font. Heck, if I've done my job properly, you can nix all my styling and read my content as you wish, but that's your palava. As for your battery - I'll plant a tree and say a small prayer for its sacrifice.
• Foomandoonian 8y ago
  The Medium Design blog is a great resource if you want to unpick their design. They talk in great detail about the various typefaces they have chosen over the years, and why. https://medium.design/ https://medium.design/ Butterick’s Practical Typography is the best beginner's guide to type on the web that I know about. If you want to know how to lay out pages with good typography, this takes you through everything in easily digestible chapters. https://practicaltypography.com/ https://practicaltypography.com/
  • lucagez 8y ago
    thank you, I didn't know about medium.design!
• rntz 8y ago
  Medium no longer uses a custom or proprietary font for body text. They used to use Freight Text, but now they use Bitstream Charter, which is free (in several variants): https://practicaltypography.com/charter.html https://practicaltypography.com/charter.html https://www.samiam.org/blog/2014-07-04.html https://www.samiam.org/blog/2014-07-04.html https://ctan.org/pkg/xcharter?lang=en https://ctan.org/pkg/xcharter?lang=en https://software.sil.org/charis/ https://software.sil.org/charis/ Charter is an excellent and very legible font. I wish more people would use it, especially in the LaTeX world, where most people stick with the to-my-eyes nearly unreadable default Computer Modern. A few critiques of your design: You put linebreaks in unexpected and jarring places, breaking the flow of paragraphs. For example, in the paragraph under the heading "The Hero". You use a narrow column for body text. This is often recommended by typography nerds, but it doesn't play nicely with elements that can't be hyphenated and split across multiple lines, such as <code> spans. See eg. the paragraph under the heading "Content font". I suggest using a wider text column to make the resulting line-breaks less jarring relative to their surroundings. You might also want to enable "hyphens: auto" in your CSS, or use a JS hyphenation library (make sure to load it asynchronously so people on slow connections can still read your content while it's loading!). And finally, there's more to typography than choosing typefaces, as I hope the above makes clear.
  • lucagez 8y ago
    thank you rntz, I recognize I am at the very beginning on the road to a good knowledge of typography and how to use it well on the web. You enriched me with all those feedbacks! (:
  • pavlov 8y ago
    Computer Modern is indeed a poor font from the stone age of digital typography. It's the Comic Sans of computer science. However it effectively communicates "I'm a serious expert in this computer stuff and you won't understand this text anyway", which is why blockchain ICO fraudsters write their zero-content whitepapers in Word but change the font to Computer Modern.
    • mbrock 8y ago
• dmos62 8y ago
  For me, in typography the four most important things are these, in this order: - appropriate choice of content/mono/headline typeface to the usage (regular content / preformatted content / headlines); that's really easy; - spacing settings: line height, character horizontal spacing; that's also easy, though there's much more room for nuances; - vertical rhythm, that's a big one; when wrong it's not as destructive to readability as what I mentioned above, but it feels really wrong, i.e. you're not sure why, but you just want to leave the site. Vertical rhythm is very hard due to technical reasons, and it's nuanced as well; - and, finally, in the last place for me, the typeface choice. I find the differences between various fonts of the same type to have, by comparison to the things mentioned above, the least influence on my experience, whether in the aesthetic or functional sense. Not that I'm not sensitive to differences between typefaces, it's just that those other things seem to be much more influential. I'd like to hear others' accounts of this.
  • lucagez 8y ago
    Definitely a checklist to add to my typography toolbelt. Thank you! (:
• mrzool 8y ago
  The assumption behind your whole argument is wrong. Choosing a typeface is not typography. See: http://ia.net/blog/the-web-is-all-about-typography-period http://ia.net/blog/the-web-is-all-about-typography-period > However using google fonts in your web projects is always a good idea as their cdn's are lightning fast (and they are free). I would argue that the exact contrary is true. Using web fonts in your project is always a bad idea for performance and functionality reasons. Stop bloating the web. Use system fonts. See: http://mrmrs.cc/writing/2016/03/17/webfonts/ http://mrmrs.cc/writing/2016/03/17/webfonts/ Edit: fix URL, formatting
  • lucagez 8y ago
    Thank you mrzool, I accept the criticism. I think I will try to understand better the use of system fonts (:
• ourcat 8y ago
  Fonts and Typography in Newspapers has always been incredibly important, when it comes to the audience they're trying to reach.
• scroot 8y ago
  Back in 2012, Errol Morris performed a typeface experiment on unsuspecting NYT readers [1]. The results are worth reading (hint: use Baskerville if you want to be trusted) [1] https://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye-people-hearken-o-earth/ https://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye...
  • lucagez 8y ago
    Whoa! Fonts shaped our minds D:
• rchaud 8y ago
  Thanks for the Codepen. I think you did a good job of replicating the Medium look. Unsurprisingly, you are catching flak from HN users whose idea of perfect typography is "motherfuckingwebsite.com". Typography does matter, especially in a time when "websites" are links I click on via a HN/Reddit/Twitter link and usually never visit again. Very different from even 15 years ago, when I pretty much only visited sites on my bookmarks list. For sites that have visibly attractive, readable typography, I find myself wanting to stay on the site longer, if maybe just to explore some more content. That usually doesn't happen on most sites, since you can tell right away that it's a CMS template where the defaults weren't changed at all. Right away I get the vibe that the content on the site is mass-produced, and not a good use of my attention. Sites that invest in good, unique typography on the other hand make me feel more like the content matters.
  • lucagez 8y ago
    "Sites that invest in good, unique typography on the other hand make me feel more like the content matters" That's a very good point of meditation!
• michaelscott 8y ago
  I just want to thank you for taking the time to make all this and I applaud your attitude toward a lot of the criticism (which can often be so erroneously certain of itself here on HN). I'd just say that with type it's important to take it back to its first principles: the interplay of positive and negative space in letterforms and their context. There is a little science, or a few hard rules, in typography but it is still a subjective design discipline and driven largely by the philosophy of the designer on the other side of the screen. Many of the best designers in the world often disagree with one another about the minutiae of type (Massimo Vignelli believed Helvetica was one of the only good typefaces a designer could use, while Erik Spiekermann dislikes it intensely and David Carson finds it dull and uninspiring). On this foundation you can build a view of how different typefaces interact with one another. Do they harmonise when it comes to m-width, letterform curvature and/or thick-thin contrast, or do they instead complement one another in their differences? Both can be valid approaches and lead to good results. In the end, typography like all design is a matter of context. Who will be reading your text, what will they be reading it on (phone, desktop, piece of paper?), where will they be when they read it (sitting in a lazy chair at home on a Sunday or on a train commute to work on a busy Monday?), what fonts can they support etc. Thanks very much for your hard work :)