html - Is it necessary to set the base font-size when sizing with rem? -


i have seen multiple approaches web typography suggested setting base font-size (on either html or body element) precise pixel value, or percentage (62,5% example, easy sizing em, or 100%).

i'm researching whether still necessary, when sizing type rem. idea when working > ie9, rem easy way size type based on users preferred base font-size. is:

  • good accessibility (i.e. not overriding users preferences)
  • easy design (the values don't cascade, , entire design can sized or down, it's fluid)

but since there many recommendations, i'm wondering: there i'm missing? current state of affairs regarding font-sizing? there accessibility concerns approach, things haven't thought of? looking source material deals issue, standpoint of current state of affairs, not opinions.

rem based on root element, or html tag size, giving size advised. wouldn't wonder 'user preference', since modern browser enlarge uniformly. golden rule set html size base value in pixels:

html { font-size: 12px; }

simply because it's easy calculate there. after that, set every subsequent font value this:

.element {     font-size: 12px;     font-size: 1em;     font-size: 1rem; }

it seems quite extensive, allows maximum compatibility. accessibility wise it's not concern, increasing size of font in browser increase original 12px in html, , enlarge rest subsequently.


Comments

Post a Comment

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

i make custom datepicker directive custom template. but have no idea how start building it... how include date data directive? i appreciate guide or give me advice work on more precisely. it might you! follow below steps html code sample: <label>birth date</label> <input type="text" ng-model="birthdate" date-options="dateoptions" custom-datepicker/> <hr/> <pre>birthdate = {{birthdate}}</pre> <script type="text/ng-template" id="custom-datepicker.html"> <div class="enhanced-datepicker"> <div class="proxied-field-wrap"> <input type="text" ui-date-format="yy-mm-dd" ng-model="ngmodel" ui-date="dateoptions"/> </div> <label> <button class="btn" type="button"><i class="icon-calendar"></i>
Read more

javascript - jQuery date picker - Disable dates after the selection from the first date picker -

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui datepicker - default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function () { $("#datepicker1").datepicker(); }); </script> <script> $(function () { $("#datepicker2").datepicker(); }); </script> </head> <body> <p>date 1: <input type="text" id="datepicker1"></p> <p>date 2: <input type="t
Read more