Felix's Own Web Authoring Topics & Tools

Most of this first group is done

• The (In)accessible Web
• Browser Default Text Size - Why do we see so little of it on web pages?
• Browser Defaults Are Too Big - We know this because all web designers say so.
• Felix's Definition of User Default-Based
• Fixed-width designs belong on paper, not the web.
• Impact of Clagnut 'body {font-size 62.5%}' CSS Styling Method
• Pixel Monkeys
• Lip Service Accessibility
• Web Page Hall of Shame
• Display Aspect Ratios
  • Standard, widescreen and 5/4 aspect ratios
  • Is what your PC displays distorted?
• Dots Per Inch
  • Logical DPI calculated by display size
  • Physical display pixels calculated by display size and dot pitch
  • Your DPI, display resolution, & window size
  • Use this to decide if your browser is using an appropriate DPI.
• A glance at sizing monospace text with CSS.
• Use this to see the full range of CSS absolute-size values on a mock web site.
• Text Zoom, no panacea for those who'd like to see their default text size used on web pages
• Helvetica - on Windows, you get Arial instead, more often than you might think.
• Font Families Index - various font family samples and comparisons
• CSS Line-Height
  • Normal line-height impact
  • Line-height inheritance impact
• Font size rounding
• The impact of inheritance on sizing
• Ems vs. Pixels
• Widths in em vs. widths in px
• Fluid vs. "fixed" width & their impact on line length
• Comparing Points to Pixels
• How Big is a Pixel?
  • Others measured
  • Measure some for yourself
    • Colored blocks
    • Horizontal 10 cm rulers
    • Vertical 10 cm rulers
  • 11px vs. 16px
  • When you size using pixels, things can break
  • Compare pixels sizes at your screen resolution to other resolutions, without changing yours.
  • Verdana size vs. Helvetica size
    • Testcase
    • Screenshots
  • A Look at Pixels & Points in Times, Helv & Courier
• Approximate Equivalent Font Sizes Across Various Resolutions
• High density default text samples for indicated default text sizes:
  • 12 pixel
  • 13 pixel
  • 16 pixel
  • 20 pixel
  • Non-specific size
• High density Arial text samples for 16 pixel default text size
• Brief Arial text samples for default sizes indicated:
  • Live 10 pixel default - 640x480 screenshot
  • Live 11 pixel default - 640x480 screenshot
  • Live 12 pixel default - 640x480 screenshot
  • Live 12 pixel default - 800x600 screenshot
  • Live 13 pixel default - 800x600 screenshot
  • Live 14 pixel default - 800x600 screenshot
  • Live 14 pixel default - 960x720 screenshot
  • Live 14 pixel default - 1024x768 screenshot
  • Live 15 pixel default - 960x720 screenshot
  • Live 15 pixel default - 1024x768 screenshot
  • Live 16 pixel default - 960x720 screenshot
  • Live 16 pixel default - 1024x768 screenshots: Mozilla IE6
  • Live 16 pixel default - 1152x864 screenshot
  • Live 17 pixel default - 1024x768 screenshot
  • Live 18 pixel default - 1024x768 screenshot
  • Live 18 pixel default - 1152x864 screenshot
  • Live 18 pixel default - 1280x 960 / 1024 screenshot
  • Live 20 pixel default - 1152x864 screenshot
  • Live 20 pixel default - 1280x 960 / 1024 screenshot
  • Live 22 pixel default - 1280x960 screenshot
  • Live 24 pixel default - 1280x 960 / 1024 screenshot
  • Live 24 pixel default - 1600x1200 screenshot
  • Live 26 pixel default - 1600x1200 screenshot
  • Live 28 pixel default - 1600x1200 screenshot
• The Real Meaning of CSS "font-size":
  • 60%
  • 70%
  • 76%
  • 80%
  • Arial @ 16px vs. 20px
• Web browsers, email & HTML Fonts - the legacy of pre-CSS text sizing
• KHTML's <absolute-size> assignments by resolution and default size
• Mozilla's <absolute-size> assignments by resolution and default size
  • Complete
  • Reduced, with smaller sizes real size, larger defaults omitted
• Mozilla's vs. Internet Explorer 6's <absolute-size> assignments by resolution and default size
• Internet Explorer 4 & 5 font size assignments in pixels by text and DPI Settings
• Internet Explorer 6 standards mode font size assignments in pixels by text and DPI Settings
• Internet Explorer 6 font size inheritance bugs
  • Quirks mode - smaller
  • Standards mode - smaller
  • Standards mode - larger
• Default & Win32 Menu Font Sizes Compared
• JavaScript select-a-size new window opener
• How Not to Create a Web Site demo page
• A demonstration of flexible web page design using neither px nor % for sizing
• Tabs, titles & Good Bookmarks
• Font issues on Linux
• Here's a little help if you are trying to work out your c o l o r - s c h e m e.

Most of the following group is undone

• Text size quotes
• Resolution Comparison Screenshots

Linkbacks

• Bergen County Internet Tutor
• Web Builders' Toolkit

Last Modified
2009/11/05
© Felix Miata
Felix's Home