Solved

Responsive font sizing

Posted on 2013-10-27
19
411 Views
Last Modified: 2013-10-30
Hello CSS Experts!  

I am working on a responsive website using twitter bootstrap (Joomla 3.x)

I'm using px for font sizing i,e.  20px  and am having weird results when the browser resolution changes.

The overall body text seems fine, but everything else becomes somewhat unpredictable as I change my "resolution" with my mouse.

I realize there are all sorts of philosophies regarding responsive font sizing,  I found this interesting article, that may be of relevance to this question:

HUBBERS BLOG re responsive font sizing.

In my next comment I'll give the link to the development site and show you some of the main issues I am having with fonts.

Thanks, as always,

Rowby
0
Comment
Question by:Rowby Goren
  • 12
  • 7
19 Comments
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39604138
Here's the link to the page.

Link to the test page

Here are the main issues.

At a wide resolution this css looks fine:
.allmode-default .allmode-topitem .allmode-title {
    color: #000000;
    font-family: Colaborate-ThinRegular,arial;
    font-weight: 100;
    letter-spacing: -0.5px;
    line-height: 22px;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

Open in new window


But as you zoom in the font become bold and goes from webfont Colaborate-ThinRegular to arial.   The weight is much "bolder" at close resolution.  And the line height becomes much too "high".  Again, would percentages or another solution for font size and height and weight fix this?

Another area of fonts changing is this interesting problem.  

h2, div.contentheading resizes fine -- but div.moduletable._GalaxiesEtc h1 {  switches from the web font to arial when I zoom in.  When I zoom in it becomes controlled by h3 {
    font-size: 16px;
}

Those are the main issues, so far....

On a side note, I am wondering if using Google fonts rather than the site based web fonts would be a better solution because I am not seeing the web fonts on my android devices.  So I am wondering if web fonts are not good for androids and that google fonts would be better -- for the headline type fonts.  h1, h2, h3 etc.    But perhaps we may want to keep that issue out of this question???

Thanks!

Rowby
0
 
LVL 58

Expert Comment

by:Gary
ID: 39604167
Well why are you using two different blocks of code to display at different resolutions?
The second block (H3) only has the Arial font
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39604189
Hmmm

Can you point out the line of css where you are seeing the "different resolutions-- second block....."

Thanks!

Rowby
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 9

Author Comment

by:Rowby Goren
ID: 39604215
I think I see what is going on here.  I forgot that I am using two different joomla modules for that portion of the page -- based on resolution.

The mobile resolution module is kicking in.

I guess this is where I would need to specify the web  font for the narrower resolution(s)?

div#OurGalaxiesHASOMMobile {
    float: left;
    margin-right: 20px;
}
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39604245
I did some "fixes" to the mobile group of fonts -- and now I"m seeing the webfont in my mobile devices.

The fonts need to be resized for the mobile - type resolutions -- not 100 percent sure what would be the best values to put where.  

Rowby
0
 
LVL 58

Expert Comment

by:Gary
ID: 39604435
Why two modules/separate blocks of code?
Use the same block of code - end of story.
The css and html is so messed up its impossible to know where to start.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39604554
Hi Gary123,

You're right.  :)

I realize I mistakenly had those  two modules in the same position -- and to compound my mistake I gave them incorrect Responsive utility classes.  

I changed the correct module to show  hidden-phone, so now it only shows up for Desktop and tablet.  

I changed  the second module to show in its correct module position and made it "visible-phone"

So those two "modules" are under reasonable control, except for some font styling which I can do myself.  So that issue we can mark "Fixed!"

The other issue in this question are the "headlines" under News/Events.  

At wide resolution the "Headline Fonts" (i.e. "...appointed Interim Director..." has non-bold looking fonts.  And that's how I want them to be.  

But if I use my mouse and "zoom in" on those headlines they appear to become very bold.  I am using font-weight: 100;    I tried changing the font-weight to other values but they don't seem to fix it.

How can I keep those headlines from becoming bold when "zooming" in -- or I assume when someone is using an older computer that has a screen with narrow resolution?

The controlling css appears to mainly be:

.allmode-default .allmode-topitem .allmode-title {
    color: #000000;
    font-family: Colaborate-ThinRegular,arial;
    font-size: 20px;
    font-weight: 100;
    letter-spacing: -0.5px;
    line-height: 22px;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

Open in new window


Thanks!

Rowby
0
 
LVL 58

Expert Comment

by:Gary
ID: 39604581
Don't look bold to me, it's probably just the way your browser is rendering the zoomed font.
The more you zoom the more width the font will be given.
What is the purpose of this checking what the site looks like zoomed?
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39604599
I am "zooming in" because one of the people at the college, who is reviewing the test site made this comment:  

" the darkness of the news headlines overpowers the text underneath, especially because the text underneath is so small (btw, I am not asking to increase the size of the text underneath). It seems that you increased the size of the headlines on the news events AND made them darker. That is just too much, in my opinion."

I am thinking that she is looking at the site with an older computer that has "narrower resolution".  I can call her tomorrow and try to get her display specifics.

However perhaps this is the problem....

I  looked at the live site (which I am attempting to recreate, but in a responsive upgraded version of Joomla) , and see this via firebug.  I am wondering if in my development site that ColaborateLightRegular etc are not being properly referenced.  And because of that  is showing arial instead of colaborateLIghtRegular.....

@font-face {
	font-family: 'ColaborateLightRegular';
	src: url('fonts/ColabLig.eot');
	src: local('ColaborateLight Regular'), local('Colaborate-Light'), url('fonts/ColabLig.woff') format('woff'), url('fonts/ColabLig.otf') format('opentype'), url('fonts/ColabLig.svg#Colaborate-Light') format('svg');
}

@font-face {
	font-family: 'Colaborate-RegularRegular';
	src: url('fonts/ColabReg.eot');
	src: local('Colaborate-Regular Regular'), local('Colaborate-Regular'), url('fonts/ColabReg.woff') format('woff'), url('fonts/ColabReg.otf') format('opentype'), url('fonts/ColabReg.svg#Colaborate-Regular') format('svg');
}
@font-face {
	font-family: 'Colaborate-ThinRegular';
	src: url('fonts/ColabThi.eot');
	src: local('Colaborate-Thin Regular'), local('Colaborate-Thin'), url('fonts/ColabThi.woff') format('woff'), url('fonts/ColabThi.otf') format('opentype'), url('fonts/ColabThi.svg#Colaborate-Thin') format('svg');
}

Open in new window

I have not been including the live site link in this question but here it is  Live site trying to match -- but responsive etc.

When I "zoom" in and out of that page, the font does not get bolder.   I'll check the page via another computer and see if I have the same "bold/zoom" problem.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39604606
I don't see any boldness going on with the text
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39604618
I don't see any boldness going on with the text

Then I want to confirm that you are seeing the "Colaborate" font and not arial.

Because I am still thinking that the web font group of fonts called "Colaborate" is not being properly referenced in my test / development site.

Thanks!

Rowby
0
 
LVL 58

Expert Comment

by:Gary
ID: 39604621
Yep it's that font
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39604690
Ok.  I will contact site reviewer and try to clarify issue with her. I will see her tuesday.  S hmmo stay tuned.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39605683
Hi

I did some more testing and determined that the web font ColaborateLightRegular was not being referenced properly.  The family of fonts is in a folder on the website, and without it being reference it apparently reverted to arial -- which was causing my so-called "bold" issues.

Now if you go to the site, and "zoom in and out" you will see that the font resizes and matches the live site...

@font-face {
  font-family: 'ColaborateLightRegular';
ETC ETC

Maybe it didn't look bold to you because possibly you have ColaborateLightRegular on your local machine?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39605946
Not installed on my pc, maybe already downloaded from your site...
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39606053
Yup.   Once I go over the page tomorrow (tuesday)  at the client's own computer and see all is okay from her POV then I'll close the question and award the points.

Thanks for helping me troubleshoot this issue!

BTW do you like Google fonts as an overall font solution -- for example as opposed to web fonts.  (I don't plan on using any google fonts on this site, but would welcome your opinion for future sites....) :)

Rowby
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39606107
Personally avoid them.  If I need a fancy font then I'll just make an image.  You are relying on another site to make your site look fancy
If I was to choose then I would go with Google - at least the download should be fast and they have plenty of redundant servers if any fail.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39606194
I  agree.  And if it is a popular Google font than hopefully it will have been already downloaded to "many users" local computer.

At some point I hope to replace the "web fonts" -- but for now the client wants to match the live site which uses the web fonts.  

In any case all seems to be working fine now.

Rowby
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 39613215
Thanks. Was at the client yesterday and it looks fine on her computer.

Rowby
0

Featured Post

Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question