Today I started implementing a design that had some copy text with font size 17px. My fellow web developer told me that we should round that to 18px and more in general that we should not use odd font sizes. He thought this is because the text may look better.
So my question is: do text with even font size look better than odd? Or what is the reason to round odd font sizes as given by design to even in the css?
I think your fellow developer is somehow correct. To be honest, as far as I know there's no "set in stone" rule for this, so nobody is right or wrong as an absolute. However, depending on implementation, you may end with browsers rendering your font as integer numbers. Which isn't a big deal on modern screens, but some older screens will start to add subpixel rendering and therefore results might look inconsistent. See how subpixel rendering works in the image below
This being said, at this point we're talking of edge cases, nowadays most screens won't have any issues dealing with subpixel rendering and display will be consistent in most cases.
However, there's an scenario where even sizes are really useful: developing. If you define an even number , it's easier to develop based on rem or em sizes. This way, you can define a base size and then use sizes such as 2rem, 1rem, .25 rem, .5em . For example, if you use 16px as base size it's really easy to scale using rem or em knowing that they will become soemthing like 16px: 1rem ; 8px: 0.5rem ; 4px: 0.25rem and so on.
Please note that I chose 16px because its' the default and because we use 8pt vertical rhythm system as default on all our projects, but you could use any size, of course
Sans fonts, which are commonly used on screens, are mostly designed to have the same thickness of stems and bars.
When the font size is quite small and is odd, like 17px, the font renders in a way that the bars are about 2 times thinner than stems.
Such rendering badly represents the actual look of the font, and that's why there are recommended font sizes:
6, 8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72 px
This is based more on a very psychological perspective (number psychology to be precise) than it has to do with designs or programming or any other thing.
Even numbers sort of has the calmness and the 'I'm not doing something awkward or out of place' feeling and has over time been been employed as the standard font sizes across various devices and platforms (even MS word has its predefined fonts in even numbers).
Odd numbers in a way have this attention seeking and 'chaotic' feeling to it and if you were designing and your font is odd, a lot of designers would round up to the nearest even number.
You could read more from a UX designer's research on the disparity here.
even MS word has its predefined fonts in even numbers - I'm pretty sure that my own personal aversion to odd-numbered font sizes is primarily learned from the evenness of the predefined options offered in MS products.
There is utterly no (general) reason why even-number sizes will look "better" than odd-number sizes. How these numbers correspond to the degree to which stroke widths and positions line up naturally on a pixel grid (vs needing ugly hinting or subpixel positioning) is completely font-dependent, and in a modern web context where px sizes are not even necessarily physical pixels, just a logical unit corresponding to historical display resolutions, also device-dependent. On high-resolution/"retina" devices, the correspondence is largely irrelevant anyway except at extreme small sizes.
However, there may be good reason to work in even increments, and even larger ones past a certain point. 13px and 14px, or even moreso 17px and 18px, are going to be difficult to distinguish visually, and using both in the same context creates a disconcerting feeling that something is "off" (likely, that someone copied and pasted text with mismatched formatting and didn't clear/fix the formatting) rather than that distinct sizes are being used intentionally.
