Solved

Responsive font sizing

Posted on 2013-10-27
19
403 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
Comment Utility
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
Comment Utility
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
Comment Utility
Hmmm

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

Thanks!

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 58

Expert Comment

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

Author Comment

by:Rowby Goren
Comment Utility
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
Comment Utility
Yep it's that font
0
 
LVL 9

Author Comment

by:Rowby Goren
Comment Utility
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
Comment Utility
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
Comment Utility
Not installed on my pc, maybe already downloaded from your site...
0
 
LVL 9

Author Comment

by:Rowby Goren
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks. Was at the client yesterday and it looks fine on her computer.

Rowby
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

743 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now