Minimizing CSS media queries for the page title?
If you have control over your html, give both headers the same class, for example .header-stretch.
For media queries - you actually can get rid of min-width. Yep, your code will be overriden for several times. But browser won't care rewriting the same parameter(font-size in this case - in any other you can do so) so it should be like this: 

@media screen and (min-width: 951px) {
  .header-stretch {
    font-size: 36px;
  } 
}
@media screen and (max-width: 950px) {
  .header-stretch {
    font-size: 24px;
  }
}
@media screen and (max-width: 749px) {
  .header-stretch {
    font-size: 22px;
  }
}
@media screen and (max-width: 569px) {
  .header-stretch {
    font-size: 20px;
  }
}
    @media screen and  (max-width: 321px) {
  .header-stretch {
    font-size: 18px;
  }
}