Header text on mobile looks jumbled?

You have some customizations but the customizations not are made in smart mode:

is need to use

@media (){
    ...
    css rules
    ...
}

to specify the css rules for the different screens size ( width )

ex:

I use this rules, you can overwrite and put it to your Custom css field:

@media (min-width: 1200px ){
    .mythemes-header a.header-title{
        font-size: 36px;
        line-height: 48px;
    }
    .mythemes-header a.header-description{
        font-size: 24px;
        line-height: 32px;
    }
}
@media ( min-width: 992px ) and (max-width: 1199px ){
    .mythemes-header a.header-title{
        font-size: 33px;
        line-height: 44px;
    }
    .mythemes-header a.header-description{
        font-size: 22px;
        line-height: 30px;
    }
}
@media ( min-width: 768px ) and ( max-width: 991px ){
    .mythemes-header a.header-title{
        font-size: 30px;
        line-height: 40px;
    }
    .mythemes-header a.header-description{
        font-size: 20px;
        line-height: 28px;
    }
}
@media ( min-width: 481px ) and ( max-width: 767px ){
    .mythemes-header a.header-title{
        font-size: 27px;
        line-height: 36px;
    }
    .mythemes-header a.header-description{
        font-size: 18px;
        line-height: 26px;
    }
}
@media ( max-width:480px ){
    .mythemes-header a.header-title{
        font-size: 24px;
        line-height: 32px;
    }
    .mythemes-header a.header-description{
        font-size: 16px;
        line-height: 24px;
    }
}

That makes it look better on mobile but the regular desktop size of the header title is now really small, and I can’t seem to make it bold either. Any ideas on that?

That’s the custom CSS I use right now for the current effects.

.mythemes-header a.header-title {
    font-size: 75px;
}

.mythemes-header a.header-title {
    font-weight: bold;
}

.mythemes-header a.header-description {
    font-weight: bold;
}

div.mythemes-header a.header-title,
div.mythemes-header a.header-description{
	display: block;

	font-style: normal;
	font-variant: normal;
	font-weight: 500;
}

He just replace the line-height and font size for each type of device !

/* LARGE SCREEN LIKE DESKTOP */
@media (min-width: 1200px ){
    .mythemes-header a.header-title{
        font-size: 36px;
        line-height: 48px;
    }
    .mythemes-header a.header-description{
        font-size: 24px;
        line-height: 32px;
    }
}

/* MEDIUM SCREEN LIKE NOTEBOOK */
@media ( min-width: 992px ) and (max-width: 1199px ){
    .mythemes-header a.header-title{
        font-size: 33px;
        line-height: 44px;
    }
    .mythemes-header a.header-description{
        font-size: 22px;
        line-height: 30px;
    }
}

/* MEDIUM SCREEN LIKE HORIZONTAL TABLET */
@media ( min-width: 768px ) and ( max-width: 991px ){
    .mythemes-header a.header-title{
        font-size: 30px;
        line-height: 40px;
    }
    .mythemes-header a.header-description{
        font-size: 20px;
        line-height: 28px;
    }
}

/* MEDIUM SCREEN LIKE VERTICAL TABLET */
@media ( min-width: 481px ) and ( max-width: 767px ){
    .mythemes-header a.header-title{
        font-size: 27px;
        line-height: 36px;
    }
    .mythemes-header a.header-description{
        font-size: 18px;
        line-height: 26px;
    }
}

/* MEDIUM SCREEN LIKE IPHONE */
@media ( max-width:480px ){
    .mythemes-header a.header-title{
        font-size: 24px;
        line-height: 32px;
    }
    .mythemes-header a.header-description{
        font-size: 16px;
        line-height: 24px;
    }
}