4 ms·

Web Design is 95% Typography

12 points by blader 20y ago

blader 20y ago
Part II: http://www.informationarchitects.jp/webdesign-is-95-typography-partii http://www.informationarchitects.jp/webdesign-is-95-typography-partii
blader 20y ago
I also recommend the rest of the articles in their "IA Notebook" on design questions of all kinds: http://www.informationarchitects.jp/ia-notebook http://www.informationarchitects.jp/ia-notebook
- rolodex 20y ago
  Dude, have you seen that WaPo thing? http://www.informationarchitects.jp/washington-post-redesign-as-a-wiki http://www.informationarchitects.jp/washington-post-redesign-as-a-wiki
  - blader 20y ago
    Yeah, it's great work.
gibsonf1 20y ago
Ironically, I find the article's Typography to be completely underwhelming. No attempt has been made to have the fonts visually represent the hierarchy of ideas being presented in the article, or to use the article as a showcase for how good great typography can be. If this article is supposed to be doing that, it radically undercuts the article's position.
- rolodex 20y ago
  I have no idea what you're talking about. To me, this looks like a classic Brockmann-style hardcore Swiss grid design. Very conscious of macro- and micro-typography, negative space, hierarchy. Beautiful - to say the least...
  - gibsonf1 20y ago
    Visual Confusion The main flaw I see, using clarity of communication as a standard, is the lack of right justification. This is compounded with the quoted material that is also not right justified. It looks confusing. Hierarchical Differentiation Also, the quoted material is slightly smaller than the main text. The text size difference should vary in a greater degree if the idea is to have the text size differentiate between the kind of message being expressed. (In this case differentiating the source of the message.) Lack of Consistency The article uses a blank line as a way to differentiate paragraphs. This rule is broken in the fourth paragraph.
    - rolodex 20y ago
      1. I guess full justification on the web is not a viable option (no hyphenation, no control over rivers). 2. On my machine PC/Firefox the font is considerably smaller. Just checked: The anti aliased Mac version is still obviously smaller. The indent also helps. I guess if it were too small it becomes difficult to read. But again, this is a matter of taste (among specialists) and not so much an objective design flaw. This site is 100 times superior in terms of design to anything I have seen in the last couple of weeks. 3. As far as I can see this line announces the update, thus a harsh break. That's why it's so loud. I have no problem with that either. To say that the form contradicts the message is WAY out of line. Just checked your website www.gibson-design.com. You must be joking...
      - blader 20y ago
        Just when you think you might never need to see a <scroll> tag again ...
      - gibsonf1 20y ago
        1. Is this something that can be fixed? One solution many sites use is to have a color differentiation (or a graphic element) that defines the right side of text, making it easier for the eye to scan the text. 2. Mine is also PC/Firefox (very high res monitor). (I tried it on a lower res monitor, and it looked much better (ie more differentiation) 3. On my high-res screen, 2 of the paragraphs at this location ran together. On my low res screen, they do not. -The page looks much better in lower res. For my site, you are right, it is vastly out of date. (I was the 7th architect on the web in 1995, and used front-page.) I am holding off on the overhaul (there are so many pages) to make the entire site active using the technology my startup company is creating, probably won't get to it until later in the year. In spite of the retro look, I do get a lot of traffic on it.
jamongkad 20y ago
Anyways since recently I've been such a stickler for user interface design. I feel it's often a neglected part in my opinion as I'm so used to programming the back end of web apps. Yet I feel that a really good UI will make a difference with your customers.
celoyd 20y ago
I started skimming when they used hyphens for dashes.
- blader 20y ago
  I see the proper use of hyphens and em dashes in the article ...
  - celoyd 20y ago
    Wow, they changed it since I said that. Good for them. Their robots.txt blocks the Wayback Machine, but the current Google cache has it (search for "The main - usually whiny - argument"): http://tinyurl.com/26o3nq http://tinyurl.com/26o3nq Edit: link syntax.

12 points by blader 20y ago

Part II: http://www.informationarchitects.jp/webdesign-is-95-typography-partii http://www.informationarchitects.jp/webdesign-is-95-typography-partii

blader 20y ago

I also recommend the rest of the articles in their "IA Notebook" on design questions of all kinds: http://www.informationarchitects.jp/ia-notebook http://www.informationarchitects.jp/ia-notebook

rolodex 20y ago
Dude, have you seen that WaPo thing? http://www.informationarchitects.jp/washington-post-redesign-as-a-wiki http://www.informationarchitects.jp/washington-post-redesign-as-a-wiki
- blader 20y ago
  Yeah, it's great work.

gibsonf1 20y ago

Ironically, I find the article's Typography to be completely underwhelming. No attempt has been made to have the fonts visually represent the hierarchy of ideas being presented in the article, or to use the article as a showcase for how good great typography can be. If this article is supposed to be doing that, it radically undercuts the article's position.

rolodex 20y ago
I have no idea what you're talking about. To me, this looks like a classic Brockmann-style hardcore Swiss grid design. Very conscious of macro- and micro-typography, negative space, hierarchy. Beautiful - to say the least...
- gibsonf1 20y ago
  Visual Confusion The main flaw I see, using clarity of communication as a standard, is the lack of right justification. This is compounded with the quoted material that is also not right justified. It looks confusing. Hierarchical Differentiation Also, the quoted material is slightly smaller than the main text. The text size difference should vary in a greater degree if the idea is to have the text size differentiate between the kind of message being expressed. (In this case differentiating the source of the message.) Lack of Consistency The article uses a blank line as a way to differentiate paragraphs. This rule is broken in the fourth paragraph.
  - rolodex 20y ago
    1. I guess full justification on the web is not a viable option (no hyphenation, no control over rivers). 2. On my machine PC/Firefox the font is considerably smaller. Just checked: The anti aliased Mac version is still obviously smaller. The indent also helps. I guess if it were too small it becomes difficult to read. But again, this is a matter of taste (among specialists) and not so much an objective design flaw. This site is 100 times superior in terms of design to anything I have seen in the last couple of weeks. 3. As far as I can see this line announces the update, thus a harsh break. That's why it's so loud. I have no problem with that either. To say that the form contradicts the message is WAY out of line. Just checked your website www.gibson-design.com. You must be joking...
    - blader 20y ago
      Just when you think you might never need to see a <scroll> tag again ...
    - gibsonf1 20y ago
      1. Is this something that can be fixed? One solution many sites use is to have a color differentiation (or a graphic element) that defines the right side of text, making it easier for the eye to scan the text. 2. Mine is also PC/Firefox (very high res monitor). (I tried it on a lower res monitor, and it looked much better (ie more differentiation) 3. On my high-res screen, 2 of the paragraphs at this location ran together. On my low res screen, they do not. -The page looks much better in lower res. For my site, you are right, it is vastly out of date. (I was the 7th architect on the web in 1995, and used front-page.) I am holding off on the overhaul (there are so many pages) to make the entire site active using the technology my startup company is creating, probably won't get to it until later in the year. In spite of the retro look, I do get a lot of traffic on it.

jamongkad 20y ago

Anyways since recently I've been such a stickler for user interface design. I feel it's often a neglected part in my opinion as I'm so used to programming the back end of web apps. Yet I feel that a really good UI will make a difference with your customers.

celoyd 20y ago

I started skimming when they used hyphens for dashes.

blader 20y ago
I see the proper use of hyphens and em dashes in the article ...
- celoyd 20y ago
  Wow, they changed it since I said that. Good for them. Their robots.txt blocks the Wayback Machine, but the current Google cache has it (search for "The main - usually whiny - argument"): http://tinyurl.com/26o3nq http://tinyurl.com/26o3nq Edit: link syntax.