Paso 19: Tamaños de fuente relativos

Algunos diseñadores determinan el tamaño absoluto de la fuente con unos determinados pixeles o puntos. Esto impedirá la correcta visualización de los contenidos para aquellas personas que aumenten el tamaño, pues el navegador no lo aumentará ya que está predefinido por el autor.
Para evitar esto, hemos de definir los valores con unidades "em". Blogger utiliza porcentajes y diferentes palabras clave como:  xx-small, x-small, small, medium, large, x-large y xx-large.

Para comprobar que Blogger utiliza estos códigos accedo a la edición HTML de mi plantilla y encuentro lo siguiente:

<Variable name="keycolor" description="Main Color" type="color" default="#000000" value="#3d85c6"/>

   <Group description="Body Text" selector="body">

     <Variable name="body.font" description="Font" type="font"

         default="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

     <Variable name="body.text.color" description="Text Color" type="color" default="#666666" value="#000000"/>

   </Group>

   <Group description="Background" selector=".body-fauxcolumns-outer">

     <Variable name="body.background.color" description="Outer Background" type="color" default="#fb5e53" value="#3d85c6"/>

     <Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>

     <Variable name="body.border.color" description="Border Color" type="color" default="#fb5e53" value="#bbbbff"/>

   </Group>

   <Group description="Links" selector=".main-inner">
     <Variable name="link.color" description="Link Color" type="color" default="#2198a6" value="#073763"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#4d469c" value="#073763"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="$(link.color)" value="#073763"/>
   </Group>

   <Group description="Blog Title" selector=".header h1">

     <Variable name="header.font" description="Font" type="font"

         default="normal normal 60px Times, 'Times New Roman', FreeSerif, serif" value="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

     <Variable name="header.text.color" description="Text Color" type="color" default="#ff8b8b" value="#701967"/>

   </Group>

   <Group description="Blog Description" selector=".header .description">

     <Variable name="description.text.color" description="Description Color" type="color"

         default="#666666" value="#666666"/>

   </Group>

   <Group description="Tabs Text" selector=".tabs-inner .widget li a">

     <Variable name="tabs.font" description="Font" type="font"

         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#ffffff" value="#ffffff"/>

     <Variable name="tabs.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#666666"/>

   </Group>

   <Group description="Tabs Background" selector=".tabs-outer .PageList">

     <Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#ffa183" value="#4eabff"/>

     <Variable name="tabs.background.color" description="Background Color" type="color" default="#ffdfc7" value="#c2d8fa"/>

     <Variable name="tabs.border.bevel.color" description="Bevel Color" type="color" default="#fb5e53" value="#c2d8fa"/>

   </Group>

   <Group description="Post Title" selector="h3.post-title, h4, h3.post-title a">

     <Variable name="post.title.font" description="Font" type="font"

         default="normal normal 24px Times, Times New Roman, serif" value="normal normal 30px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

     <Variable name="post.title.text.color" description="Text Color" type="color" default="#2198a6" value="#251a9c"/>

   </Group>

   <Group description="Gadget Title" selector="h2">

     <Variable name="widget.title.font" description="Title Font" type="font"

        default="normal bold 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

     <Variable name="widget.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#000000"/>

     <Variable name="widget.title.border.bevel.color" description="Bevel Color" type="color" default="#dbdbdb" value="#ffffff"/>

   </Group>

   <Group description="Accents" selector=".main-inner .widget">

     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#cccccc" value="#666666"/>

     <Variable name="widget.border.bevel.color" description="Bevel Color" type="color" default="#dbdbdb" value="#dbdbdb"/>

   </Group>

   <Variable name="body.background" description="Body Background" type="background"

       color="$(body.background.color)" default="$(color) none repeat-x scroll top left" value="$(color) none repeat-x scroll top left"/>

   <Variable name="body.background.gradient" description="Body Gradient Cap" type="url"

       default="none" value="url(http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMMDZjM2Q4YjctMTY2OC00ZGU2LWJjZDYtODVjOGRiOThlMGQ3)"/>

   <Variable name="body.background.imageBorder" description="Body Image Border" type="url"

       default="none" value="none"/>

   <Variable name="body.background.imageBorder.position.left" description="Body Image Border Left" type="length"

       default="0" value="0"/>

   <Variable name="body.background.imageBorder.position.right" description="Body Image Border Right" type="length"

       default="0" value="0"/>

   <Variable name="header.background.gradient" description="Header Background Gradient" type="url" default="none" value="none"/>

   <Variable name="content.background.gradient" description="Content Gradient" type="url" default="none" value="url(http://www.blogblog.com/1kt/ethereal/white-fade.png)"/>

   <Variable name="link.decoration" description="Link Decoration" type="string" default="none" value="none"/>

   <Variable name="link.visited.decoration" description="Link Visited Decoration" type="string" default="$(link.decoration)" value="$(link.decoration)"/>

   <Variable name="link.hover.decoration" description="Link Hover Decoration" type="string" default="underline" value="underline"/>

   <Variable name="widget.padding.top" description="Widget Padding Top" type="length" default="15px" value="15px"/>

   <Variable name="date.space" description="Date Space" type="length" default="15px" value="15px"/>

   <Variable name="post.first.padding.top" description="First Post Padding Top" type="length" default="0" value="0"/>

   <Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string" default="" value=""/>

   <Variable name="mobile.background.size" description="Mobile Background Size" type="string" default="auto" value="auto"/>

   <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left"/>

   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>

*/

Dentro de este código podemos observar varias fuentes determinadas por pixeles. Por tanto, procedo a borrar todos los números con pixeles y quedo unicamente "normal normal".
Mi código quedaría entonces asi:

 <Variable name="keycolor" description="Main Color" type="color" default="#000000" value="#3d85c6"/>

   <Group description="Body Text" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal  Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal  Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#666666" value="#000000"/>
   </Group>

   <Group description="Background" selector=".body-fauxcolumns-outer">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#fb5e53" value="#3d85c6"/>
     <Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>
     <Variable name="body.border.color" description="Border Color" type="color" default="#fb5e53" value="#bbbbff"/>
   </Group>

    <Group description="Links" selector=".main-inner">
     <Variable name="link.color" description="Link Color" type="color" default="#2198a6" value="#073763"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#4d469c" value="#073763"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="$(link.color)" value="#073763"/>
   </Group>

   <Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Font" type="font"
         default="normal normal Times, 'Times New Roman', FreeSerif, serif" value="normal normal  Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="header.text.color" description="Text Color" type="color" default="#ff8b8b" value="#701967"/>
   </Group>

   <Group description="Blog Description" selector=".header .description">
     <Variable name="description.text.color" description="Description Color" type="color"
         default="#666666" value="#666666"/>
   </Group>

   <Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal normal Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#ffffff" value="#ffffff"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#666666"/>
   </Group>

   <Group description="Tabs Background" selector=".tabs-outer .PageList">
     <Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#ffa183" value="#4eabff"/>
     <Variable name="tabs.background.color" description="Background Color" type="color" default="#ffdfc7" value="#c2d8fa"/>
     <Variable name="tabs.border.bevel.color" description="Bevel Color" type="color" default="#fb5e53" value="#c2d8fa"/>
   </Group>

   <Group description="Post Title" selector="h3.post-title, h4, h3.post-title a">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal normal Times, Times New Roman, serif" value="normal normal  Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="post.title.text.color" description="Text Color" type="color" default="#2198a6" value="#251a9c"/>
   </Group>

   <Group description="Gadget Title" selector="h2">
     <Variable name="widget.title.font" description="Title Font" type="font"
        default="normal bold  Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold  Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#000000"/>
     <Variable name="widget.title.border.bevel.color" description="Bevel Color" type="color" default="#dbdbdb" value="#ffffff"/>
   </Group>

   <Group description="Accents" selector=".main-inner .widget">
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#cccccc" value="#666666"/>
     <Variable name="widget.border.bevel.color" description="Bevel Color" type="color" default="#dbdbdb" value="#dbdbdb"/>
   </Group>

   <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat-x scroll top left" value="$(color) none repeat-x scroll top left"/>
   <Variable name="body.background.gradient" description="Body Gradient Cap" type="url"
       default="none" value="url(http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMMDZjM2Q4YjctMTY2OC00ZGU2LWJjZDYtODVjOGRiOThlMGQ3)"/>
   <Variable name="body.background.imageBorder" description="Body Image Border" type="url"
       default="none" value="none"/>
   <Variable name="body.background.imageBorder.position.left" description="Body Image Border Left" type="length"
       default="0" value="0"/>
   <Variable name="body.background.imageBorder.position.right" description="Body Image Border Right" type="length"
       default="0" value="0"/>
   <Variable name="header.background.gradient" description="Header Background Gradient" type="url" default="none" value="none"/>
   <Variable name="content.background.gradient" description="Content Gradient" type="url" default="none" value="url(http://www.blogblog.com/1kt/ethereal/white-fade.png)"/>

   <Variable name="link.decoration" description="Link Decoration" type="string" default="none" value="none"/>
   <Variable name="link.visited.decoration" description="Link Visited Decoration" type="string" default="$(link.decoration)" value="$(link.decoration)"/>
   <Variable name="link.hover.decoration" description="Link Hover Decoration" type="string" default="underline" value="underline"/>

   <Variable name="widget.padding.top" description="Widget Padding Top" type="length" default="15px" value="15px"/>

   <Variable name="date.space" description="Date Space" type="length" default="15px" value="15px"/>

   <Variable name="post.first.padding.top" description="First Post Padding Top" type="length" default="0" value="0"/>

   <Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string" default="" value=""/>
   <Variable name="mobile.background.size" description="Mobile Background Size" type="string" default="auto" value="auto"/>

   <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left"/>
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>
*/

El cambio que observo al modificar esto es que la letra a disminuido su tamaño adaptándose a la definida por mi pantalla.

Problemas surgidos

Ninguno