7 ms·
It’s true that many designers tend to look at text more like a texture. Instead of making it large and distinct they will make it small and light colored when i
by ThomPete 10y ago
It’s true that many designers tend to look at text more like a texture. Instead of making it large and distinct they will make it small and light colored when it's in fact the only valuable thing on the screen.
It's an unfortunate consequence of so much design today going minimal and more typographic, which makes it's hard to differentiate elements any other way than to start evening out the contrast. If everything that is text was just black you would loose the hierarchy.
There er of course plenty of ways to get around it and most experienced designers know how to deal with it. I don't think it's going to be a lasting problem though.
Also important to notice that retina screens make a big difference between what is readable and not. You can get away with much more finesse when you design for retina screens. And I think a lot of designers unfortunately use only that when they design.
If you look at print typography you will find a lot of small text sizes because print is crisp enough to be readable. So technology will take care of most of it IMO.
- mercurysmessage 10y agoI'm assuming that by retina screen you simply mean high resolution? Because Retina display is just the apple term for a high resolution screen.
- sthatipamala 10y agoIts actually their term for high DPI displays. If you want to be pedantic, at least be correct.
- DavidWanjiru 10y agoSpeaking of pedantic, what is the difference between "high resolution screens" and "high DPI screens"? Assuming, of course, that screen and display mean the same thing.
- deleted 10y ago[deleted]
- mordocai 10y agoResolution is how many pixels per the entire screen. DPI is how many pixels per a inch. For instance, a high resolution 4k TV that is 50" might not be considered high DPI compared to a 4k 15" laptop screen.
- deleted 10y ago[deleted]
- andrewmu 10y agoHigh resolution screens have lots of pixels and high DPI screens have many pixels per inch. If you look at an Ultra HD (3840x2180) 40" TV close up versus a 5" phone screen (say 1334x750) viewed from the same distance you'll notice the phone screen is sharper despite having fewer pixels.
- jasode 10y ago2560x1440 is ~109 dpi when the pixels are arranged to fill a 27" monitor. (This is not considered "Retina".) 2560x1440 is ~500 dpi when the pixels are squeezed into a 6" phone display such as as Google Nexus 6/6P. The "Retina" description refers to the dpi exceeding 300 dpi and not the absolute # of pixels.
- deleted 10y ago[deleted]
- Crespyl 10y ago"High resolution" could mean any display >= 1080p or so, whatever size (6 inches, or 6 feet). DPI, being "dots per inch" relates to resolution for a given physical size, so a "low resolution" 720p display that was only 1 inch across would have a high DPI (in this case, 720 dots per inch), but a "high resolution" 4k display at 50 feet across would have a low DPI. Generally speaking, the higher the DPI the harder it is to discern individual pixels, and the better for viewing fine details.
- lemmings19 10y agoHigh DPI refers to a high pixel density. High resolution refers many pixels. If I have one million pixels on a 10cm by 10cm screen, and one million pixels on a 100cm by 100cm screen, they both have the same resolution because they both have the same number of pixels. However, the 10cm screen has a much higher pixel density because the pixels are much smaller and closer together in order to fit on such a small surface. The effect of a high pixel density is that you cannot tell pixels apart because they are so small and clustered, even up close. This results in a much more fine looking image. 'Retina' is just a marketing term for high DPI displays.
- adrianratnapala 10y ago> High resolution refers many pixels. That's correct, but only within our narrow jargon. In optics, when I say "resolution", I mean the smallest distance (either angular or linear) beween two points that can be distinguished by the apperatus. E.g. "The CCD resolution is 10 microns per pixel". Not how many distinct points there are ("The CCD has 1024x786 pixels"). Sometime in the computer age, "resolution" became used for the latter meaning and so DPI had to be used where "resolution" was previously meant. But don't blame people if they still use the original meaning.
- deleted 10y ago[deleted]
- mercurysmessage 10y agoRight, my mistake.
- smrtinsert 10y agoMost designers are frankly awful at typography. I would argue most design elements on a page can be simply removed if they properly used hierarchy of text to call out important areas for example.
- ThomPete 10y agoSure just like you don't need insane convoluted frameworks with a billion dependencies to develop 99% of the web-apps out there yet thats what most developers end up with. This is about self-expression and it's a small price to pay (and easily fixable by just forcing your own style sheet) for getting a vibrant and diverse jungle of content and ways to express it. The rest we can deal with.
- zeveb 10y ago> This is about self-expression and it's a small price to pay Is that a small price to pay for worsening the experience of anyone older than maybe 26? I can't even imagine trying to walk my elderly neighbour through installing her own stylesheet, nor trying to explain why none of her sites look right now, even if they are more legible.
- ThomPete 10y agoIt's not that simple. If you don't experiment, make mistakes etc. you don't grow.
- jalfresi 10y ago"If everything that is text was just black you would loose the hierarchy" Nonsense. Type weights exist for this, as does size, grouping, placement etc. Typography IS hierarchy.
- ThomPete 10y agoSure but that doesn't mean it's used as that.
- the_other 10y agoTo echo your point, the screen shots from the original article bare this out. The new App Engine interface does express information hierarchy through type, but it does so badly. The side menu uses all three of spacing, text size and colour to indicate hierarchy, to the point where the lower-level items are nearly illegible. Skimming it, I got the feeling the designer was saying "You don't need this", rather than "You won't need this often" or "Y is a specialisation of X" (which was probably the intent).
- cooper12 10y agoAlso relevant is the typography concept of "color": http://practicaltypography.com/color.html http://practicaltypography.com/color.html.
- eriknstr 10y agoThat website is currently not loading for me.
- cooper12 10y agoAh it seems to redirect HN users to [0]. Sorry, it worked in my search so I didn't know about that. You can just search for "color typography" and read an alternate link or try clicking into that one from Google/the address bar mode since it seems to rely on reading the referrer. On a sidenote, the whole book is great so if you do read it and find it useful, I would pay for it. [0]: http://practicaltypography.com/graylist.html http://practicaltypography.com/graylist.html
- onli 10y ago> Instead of making it large and distinct they will make it small and light colored when it's in fact the only valuable thing on the screen. But modern web design is the contrary. Large big webfonts, distinct ones for headlines and text as beautiful as possible. Yes, sometimes the text is then made grey and oftentimes this is just bad design, but I don't think the texture comaprision is accurate. Here for example, in the appengine dashboard screenshots, the grey text in the menu is used to create hierarchy. I would also argue that the greying of the text has another function here: By making most of the menu labels less visible, you can focus the attention to the parts of the page that are the most prominent. Not sure hat worked very well sincethat does nto seem to be used here, but it sure has another effect than the prior design where almostevery element was screaming for attention.
- liveoneggs 10y ago> Large big webfonts I think you're confusing filesize with font size. :)
- onli 10y ago;) That only as well. I mean, just look at https://www.apple.com/iphone/ https://www.apple.com/iphone/. The page is defined by images and big headlines.
- flukus 10y ago> Large big webfonts This can be aggravating too, just because I'm on a desktop doesn't mean I have 19" monitors and the browser maximized.
- onli 10y ago19" monitors are like the smallest you can still buy, and have been for some years. But sure, Browsers are not always maximized, and there are small laptops and tablets and smartphones… but modern webdesign has with responsive design really a good answer here that takes that into account, and that also considers the font size. So yes, that can be aggravating, but not in modern webdesign per se, only in bad design in general.
- monknomo 10y agoEvery designer, or UI/UX person should work on a shitty CRT with a flicker and a bad green channel. If the design doesn't work under those conditions, it doesn't work.
- andrepd 10y ago"Retina" screen is an Apple marketing term. Would you care to specify exactly what you mean by that?