Web design philosophy is a mixed bag, so I figured using a browser wide custom CSS to override font-family etc. would make for a more uniform browsing experience. This is the basics of what I am thinking should fix most annoyances:
html { font-family: sans-serif !important; } p, li, blockquote { font-family: serif !important; } code, pre, tt { font-family: monospace !important; } * { font-family: inherit !important; }
...and a plethora of site-specific hacks that I won’t post here.
What surprised me is how many popular sites use confusing html tags. For example, GitHub and StackExchange both don’t use <code> for code, many sites use <li> as a general go-to for menus, and <p> is used in way too many places that have only a couple words of text.
Then there’s the issue of icon fonts. With my approach, icons rarely, if ever, show anything, and if they do, it’s a random letter. Frankly, I don’t see the advantage of icon fonts over SVG files except loading time.
My goal is to have a serif font for the main content of the webpages, use monospace for code, and sans serif for anything else.
I know Firefox and IE have ways to override the three main categories of fonts. How does this work? Does it scan for a fallback serif/sans-serif/monospace on every element and use that info to patch the CSS? Do they go by a huge reference of fonts and their types? I would use it, but it doesn’t work well with icon fonts (those require site-specific CSS hacks).
Are there any web design best practices I have overlooked? Any other ways to accomplish what I want? Why are de facto site designs so incoherent and un-semantical?
Epic visual tool
Epson 5030UB 2D/3D 1080p 3LCD Projector
Submitted March 26, 2016 at 09:30PM by PM-me-your-regrets http://ift.tt/22P6Tnc
No comments:
Post a Comment