Just for anyone coming to this topic now, I used @Tedde / @jalbert's solution and it worked a treat, but I've found it can actually be achieved with a bit less code. @jalbert added minZoom and maxZoom options to the tileLayer, essentially negating the need for the zoomend Event Listener that @Tedde suggested. So in short, the following code is all that's required:

map.options.minZoom = 4;
map.options.maxZoom = 17;

var topLayer = L.tileLayer('https://b.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, ',
    minZoom: 12,
    maxZoom: 17
}).addTo(map);

Just for anyone coming to this topic now, I used @Tedde / @jalbert's solution and it worked a treat, but I've found it can actually be achieved with a bit less code. @jalbert added minZoom and maxZoom options to the tileLayer, essentially negating the need for the zoomend Event Listener that @Tedde suggested. So in short, the following code is all that's required:

map.options.minZoom = 4;
map.options.maxZoom = 17;

var topLayer = L.tileLayer('https://b.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, ',
    minZoom: 12,
    maxZoom: 17
}).addTo(map);