I have this code:
li
{
width: 200px; height: 22px; overflow: hidden;
float: left;
line-height: 22px; letter-spacing: -1px;
font-weight: 400; font-size: 14px; font-family: "Helvetica Neue";
text-transform: uppercase;
}
I noticed that if I write all the font properties separated, then I'll have my text in the li box vertical-aligned middle.
font: 400 14px "Helvetica Neue";
Else, if I use the compact form, the text is vertical-aligned top.
I'd like to understand why this happens.
Thank you all in advance.
DEMO
CSS shorthand peoperties described as
selector {
font: font-style font-variant font-weight font-size/line-height font-family;
}
1) In your case: font: 400 14px "Helvetica Neue";
here you not defining any line height hence its taking default line height and Text seems to be vertically aligned top
2) if you use font: 400 14px/22px "Helvetica Neue";
here you are defining line height - 22px and this will be vertically middle aligned
Sidenote
vertical align middle works because height of LI = line height
Article URL
Related
The h1 font-size percentage isn't changing the text size according to the screen and just stays at 20px. Am I missing something?
html {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
h1 {
margin: 0;
font-size: 200%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 3px;
}
Try using this instead.
font-size:2em;
Ems are a more appropriate relative size unit for text. Also, without seeing your html structure, it's hard to know if there isn't some other element obstructing this font-size change.
I have very simple element on page - it's a quantity balloon for basket, which I'm unable to set properly. Not only the font is dramatically different, but its vertical position differs significantly for a small element like this:
I've tried some solutions from stackoverflow (e.g. to set line-height -1 from font size), but no luck. Here is the code:
HTML:
<span class="basket-qty">6</span>
CSS:
.basket-qty {
display: block;
text-align: center;
background-color: #C1637D;
color: #fff;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 13px;
font-weight: 500;
border-radius: 15px;
width:15px;
height:15px;
}
JSFiddle: https://jsfiddle.net/e563tgdn/
Could it "just" be Font Rendering? Do css-setting like this help to normalize?
-webkit-text-size-adjust: none;
text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-ms-text-size-adjust: 100%;
I have a situation that I can't seem to figure out with CSS.
I have a sidebar category menu that I want to be a certain font.. but the other content when it is in the sidebar to be the standard font.
The issue is that the div structure looks like this.
...
<div class="col-left sidebar">
<div id"sidebar-nav" class"block sidebar-nav-left codnitiveSidenavLeft">
<div class="block-title">..</div>
<div class="block-content">
Now what happens is that block-content has a font value in css which is the normal font.. when it is not under the class "block sidebar-nav-left coditiveSidenameLeft" then that is fine.. when it is under the "block sidebar-nav-left coditiveSidenameLeft" class then I want to use a special font called destroyregular.. here is what I have in the css.
.block .block-content {
padding: 5%;
font-family: 'Lato',sans-serif;
/*font-family: "destroyregular";*/
font-size: 100%;
font: bold 12px Arial, sans-serif;
color: #FFFFFF;
text-transform: uppercase;
}
#sidebar-nav.block.sidebar-nav-left.codnitiveSidenavLeft
{
padding: 5%;
font-family: "destroyregular" !important;
font-size: 100%;
/*font: bold 12px Arial, sans-serif;*/
color: #E6E6E6;
text-transform: uppercase;
}
While container class"block sidebar-nav-left coditiveSidenameLeft" does have the destroyregular font, it is overridden by the block-content.. how can I force the destroyregular font down to the block-content only if it is under it?
Thanks in advance..
--Corrected typo in div... side-nav was corrected to sidebar-nav sorry..
--Corrected typo #2!! arrgh.. #sidebar-nav.block.sidebar-nav-left codnitiveSidenavLeft
-Ken
Change the sidebar and .block-content to this:
#side-nav
{
padding: 5%;
font-family: "destroyregular", Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #E6E6E6;
text-transform: uppercase;
}
.block-content {
padding: 5%;
font-family: 'Lato', Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
}
This selector:
#sidebar-nav.block.sidebar-nav-left.codnitiveSidenavLeft
Doesn't select anything in that HTML snippet you posted. The ID and class names don't match.
UPDATE: With the corrected selector, what's going on now is that the font destroyregular is getting applied with very high specificity to the .block, but .block-content will not inherit it over something set specifically for .block-content jsut because the parent has high specificity. This is how I would do it, same HTML and add this CSS:
#sidebar-nav.block.sidebar-nav-left.codnitiveSidenavLeft .block-content {
font-family: "destroyregular";
}
This is not optimal. I think it's overspecified. And probably you can get rid of the font definition on the other (overspecified) selector and move it to that one, but that depends on what you actually need.
I have the following example Jsfiddle where i've posted all 12 columns and the required css. the next piece of code i think it's the one that's causing the problems. In the live example you will notice that these two columns at less than 320px screen width will break the container and scrollbar will appear. I've tried fixing this problem but i didn't find a solution so far. Anyone around who can help me out ?
<div class="col-mb-2 col-8 col-dt-5"><p> </p></div>
<div class="col-mb-2 col-2 col-dt-8"><p> </p></div>
Update:
Added a picture to see the portion of the problem
so you need to write media query
#media (max-width:312px) {
.col-dt-5, .col-dt-8{padding:0px 2px !important}
}
(max-width:312px) means, the width of the scree is 312px or less
I think the problem is with this class:
.testgrid p {
background: #5d68c2;
margin-bottom: 2em;
font-size: 0.75em;
line-height: 1em;
padding: 1em; /* <--- this is the problem */
color: #ffffff;
text-transform: uppercase;
font-weight: 800;
font-family: "Open Sans", Helvetica, Arial, Sans-serif
}
you need to remove left and right padding:
.testgrid p {
background: #5d68c2;
margin-bottom: 2em;
font-size: 0.75em;
line-height: 1em;
padding: 1em 0px; /* updated */
color: #ffffff;
text-transform: uppercase;
font-weight: 800;
font-family: "Open Sans", Helvetica, Arial, Sans-serif;
}
I tried box-sizing but not worked.
view this: DEMO
some elements on my website display perfectly, while other elements of the same font look grainy and choppy. I can't figure out why since I specify the style in the same way.
Here's my website:
http://violetoeuvre.com/
The side bar navigation (me, about, writing contact) is totally fine while the paragraph, h2, and footer styles are grainy and look like a rough version of the same type face.
CSS:
/* Fonts */
#import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
Funky styles:
h2 {
font-family: 'Playfair Display', sans-serif, 20px;
font-weight: 100;
line-height: 2em;
color: #000000;
letter-spacing: -1px;
margin: 0;
}
h3 {
font-family: 'Playfair Display', sans-serif, 12px;
font-weight: 100;
line-height: 2em;
color: #000000;
letter-spacing: -1px;
margin: 0;
}
#foot a:link {
font-family: 'Playfair Display', sans-serif;
font-size: 15px;
font-weight: 100;
color:#000;
text-decoration: none;
letter-spacing:0.2em;
}
These are functioning fine:
#emma_home a:link{
font-family: 'Playfair Display', serif;
font-size: 75px;
font-weight: 200;
color:rgba(255,255,255,1);
text-decoration: none;
letter-spacing:-4px;
}
#nav_menu a:link{
font-family: 'Playfair Display', serif;
font-size: 30px;
font-weight: 100;
color:rgba (255,255,255,1);
text-decoration: none;
text-align: center;
letter-spacing:0.2em;
}
#side_wrapper_text a:link{
font-family: 'Playfair Display', sans-serif;
font-size: 32px;
font-style: italic;
font-weight: 100;
color:#000000;;
text-decoration: none;
text-align: right;
letter-spacing:0.2em;
}
Also, on a PC the top Emma and Navigation (writing, blog, contact) are about 20 pixels ABOVE the black line, but on my Mac, the letters touch the white like I want.
What gives with these discrepancies??
Thanks.
I think you should move font-size property from font-family tag
and add it
font-family: sans-serif;
font-size : 12px;
check this W3 Schools they define 2 properties
Browsers behave differently with css some adapt the error some not
EDIT
You can save yourself from repeating code by putting the selector that have same styles mostly and then you can overwrite that style. for ex
h2,h3 {
font-family: 'Playfair Display', sans-serif;
font-size : 20px;
font-weight: 100;
line-height: 2em;
color: #000000;
letter-spacing: -1px;
margin: 0;
}
h3 {
font-size: 12px;
}
I see your a link has font weight property double than you defined for other so that may be the case for a tags but i dont see any other significant difference
I was confused as to why Playfair Display appeared grainy in my headings and paragraphs, but NOT in my sidebar navigation.
After some frustration, I realized that the typeface just looks bad at a certain (small) font.
Search for Playfair:
http://www.google.com/fonts/
As you can see, Normal 400 looks very weird, but in larger, bold, or italic styles, it looks just fine. The only thing to do was to choose a similar typeface for smaller styles, so I'm using Jacques Francois.
I'm a designer that works mostly in web but occasionally print as well. I think your issue may actually be with the Playfair font itself which I have just discovered is missing certain font styles when it displays on PCs (Macs look fine). I would test with another font before losing much more time.
As far as I can see IE prefers ttf format over woff and that specific exports is wrong. I simply downloaded the google font mercurial repo any converted original (otf) files with font squirrel, now it works.